DevTools

Les DevTools JavaScript est une fonctionnalité intégrée dans les navigateurs modernes qui permet aux développeurs de

voir le journal des erreurs et des avertissements
exécuter des commandes JavaScript
parcourir le DOM et modifier le code HTML directement dans le navigateur
inspecter et analyser l’activité du réseau

Pour ouvrir la console

sous Opera: Ctrl + Shift + I
sous Chrome: Ctrl + Shift + J
sous Firefox: Ctrl + Shift + K

La console peut être affiché au sein de la page ou en une fenere séparée.

Inspecteur

L’inspecteur permet de debugger et modifier le code HTML/CSS de la page.

HTML

Les éléments peuvent être déplacés dans le DOM via drag & drop
Modifiés via un clic droit > Modifier comme HTML
Attention, en modifiant le noeud, les événements JavaScript qui étaient dessus sont perdus.
On peut également utiliser le double-clic pour modifier une valeur et non le noeud entier.
Ou supprimer un noeud via un clic > Supprimer le noeud

CSS

Lorsqu’on sélectionne un noeud du DOM, le CSS qui s’y applique est affiché dans le panel à droite, onglet “Règles”.

On peut modifier le CSS: cliquer sur le sélecteur, la propriété ou la valeur à modifier
Ajouter de nouvelles propriétés: cliquer dans le bloc de l’élément
Ajouter des nouvelles règles: cliquer sur le bouton “+”
Choisir l’état de l’élément sélectionné (:hover, :focus, etc) pour pouvoir visualiser ou modifier le CSS appliqué à cet état: cliquer sur le bouton à côté du plus et cocher l’état voulu

Console

La console permet d’exécuter du JavaScript et de vérifier les valeurs retournées.

Le code est exécuté lorsqu’on presse Entrée.
Utiliser Shift + Enter pour ajouter un retour chariot et non exécuter le code
Les flèches haut/bas permettent de naviguer dans l’historique des commandes
La tabulation (ou flèche droite) permet d’autocompléter la commande
L’objet console permet d’afficher des messages dans la console
Console API Reference

console.log

Permet d’afficher un message simple.

On peut interpoler des variables

%o pour afficher un objet
%s pour afficher une chaîne de caractères
%d ou %i pour afficher un entier
%f pour afficher un réel (float)
%c pour appliquer du CSS

const success = [
 'background: green',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');

const failure = [
 'background: red',
 'color: white',
 'display: block',
 'text-align: center'
].join(';');

console.info('%c /dancing/bears was Successful!', success);
console.error('%c /dancing/bats failed!', failure);

console.warn

Permet d’afficher un avertissement — fond jaune
Outre l’intérêt purement visuel, on peut filtrer le type de messages affichés dans la console pour ne voir que les informations qui nous intéressent

console.error

Permet d’afficher une erreur — fond rouge

console.info

Permet d’afficher une info

console.assert

Permet de tester une assertion.
Affiche une erreur dans la console uniquement si l’assertion est fausse

console.dir

Permet de visualiser des éléments du DOM.
console.log se contente d’ajouter un lien vers l’inspecteur, ce qui ne permet pas de connaître la valeur du noeud au moment de l’appel à console.log mais la valeur une fois le script finit (lorsqu’on accède aux DevTools)

console.group

groupCollapsed et groupEnd permettent de grouper un ensemble de messages.
Les messages peuvent être masqués ou affichés (en cliquant sur la flèche sur la gauche)

console.count

Permet de compter le nombre de fois que la console est appelée avec un message donné

console.time

time et timeEnd permettent de minuter le temps que prend une action donnée

console.table

Permet de visualiser un tableau sous forme de table

console.trace

Permet d’afficher la call stack en cours

Debugger

Plutôt qu’utiliser console, on peut utiliser le debugger pour connaître la valeur des variables à un moment donné

Choisir le fichier que vous voulez débugger dans le panel de gauche
Si le contenu du fichier est minifié, cliquer sur le bouton {} (formatter et indenter la source) en bas à gauche
Ajouter un breakpoint sur la ligne
Lorsque cette ligne sera exécutée, l’éxecution du script sera stoppée. On peut alors vérifier la valeur des variables (au survol).
Une fois le script en pause, on peut
- play: reprendre l’exécution du script
- step over: exécuter la ligne, pauser sur la suivnte
- step in: entrer dans l’appel de fonction
- step out: exécuter le script jusqu’à ce que la fonction en cours se termine

Network

L’onglet réseau affiche les ressources chargées et leur temps de chargement

La partie translucide de la barre indique la latence de la requête — combien de temps s’est écoulé entre l’envoi de la requête et le début du transfert.
La partie solide indique quand le navigteur a démarré et terminé le téléchargement de la ressource.
Le point final est le moment où toutes les données ont été reçues
En cliquant sur l’URL, on peut obtenir plus d’informations sur la requête, telles que les entêtes HTTP envoyées et reçues
Pour voir le temps de chargement des ressources lorsqu’elles ne sont pas en cache, recharger la page sans utiliser le cache: Shift + F5, utiliser le mode incognito ou désactiver le cache dans les paramètres de DevTools (s’applique tant que les DevTools sont ouverts)

This site is open source. Improve this page.