Chrome Developer Tools
en 15 minutes

France HTML5 meetup

Thomas Bassetto
26 mars 2012

Thomas

• Developpeur JavaScript chez Joshfire (on recrute)
  
  
• ParisJS
• PhoneGap Paris

Chrome Canary

• http://tools.google.com/dlpage/chromesxs
• Version expérimentale
• Se met à jour automatiquement (contrairement à Chromium)
• Ne peut pas être mis navigateur par défaut
• Utilise un "profil" différent de Chrome

WebKit Web Inspector sert de base à :

• Chrome Developer Tools
• Safari Web Inspector
• BlackBerry Web Inspector
• Weinre
• Adobe Shadow
• iWebInspector

Onglet Elements

• Suppression de nœuds
• Annuler/Recommencer
• Glisser/déposer
• Édition HTML (F2)

Console API

• console.log n'est pas seul :)
• console.log accepte plusieurs arguments

• console.log('Name: %s, Intergalactic Credits: %d.', 'Alex', -100)
  // Name: Alex, Intergalactic Credits: -100.

• console.dir
• console.time et console.timeEnd
• console.group et console.groupEnd
• console.count
• Exemples

Console

• Peut-être appelé de n'impotre quel onglet via ESC
• Auto-complétion
• Historique via ↑ et ↓
• $(id)
• $$(selecteur)
• $0 — $4 : historique des nœuds sélectionnés
• clear()
• copy()

Panneau CSS

• Auto-complétion
• Palette de couleur
• Créer un nouveau sélecteur
• Édition de :hover, :focus, etc.
• Incrémenter les valeurs avec les flèches (par 0.1, 1, 10, 100 avec combinaisons de Shift, Alt, etc.)
• Clic sur le nom du fichier CSS pour avoir accès au diff + historique

Onglet Ressources (pour CSS)

• Diff
• Revenir à une version précédente
• Sauvegarde dans un fichier
• Édition libre

Préférences

Roue dentée en bas à droite :

• Désativer le cache
• Déplacer l'inspecteur dans la barre latérale à droite
• Changer l'User-Agent
• Simuler les touch events
• Log XMLHttpRequests
• Se souvenir des logs entre plusieurs chargements

JavaScript

• Points d'arrêts pour à peu près tout !
• Beautify
• Édition libre (incompatible avec le code beautifié)
• Pause lors d'exceptions (attention à jQuery)
• debugger;

Extensions

• Ajout d'audits ou d'onglets
• Page Speed
• Autosave ! (nécessite un serveur)

Divers

• chrome://net-internals/
• chrome://appcache-internals/

À venir

• Source Maps
• Snippets

Merci !

• @tbassetto
• Joshfire.com