Astuces pour bien débuger du Javascript avec la Console : Command Line API

Les développeurs web connaissent bien les barres d’outils des navigateurs qui permettent de développer et déboguer plus facilement des sites. Ces barres d’outils mettent à disposition des alias et des fonctions utilitaires pour augmenter votre productivité. A priori, la barre d’outils (qui s’est grandement améliorée) de IE (même dans sa version 10) ne les proposent pas 🙁

$0, $1, …, $4

Ces alias permettent d’accéder aux éléments inspectés via l’inspecteur d’éléments (Firebug ne permet d’accéder qu’aux 2 derniers mais fournit une fonction $n qui permet de récupérer l’un des 5 derniers éléments sélectionné)

Alias $0

$_

Retourne la dernière valeur évaluée dans la console (Chrome seulement)

Alias $_

$ et $$

alias des fonctions document.querySelector() et document.querySelectorAll() (j’avais évoqué ces fonctions dans un article précédent)

Méthode $$

Inspect()

Cette fonction prend en paramètre un objet du DOM et permet de l’afficher dans l’inspecteur d’élément

Méthode Inspect

keys(object) & values(object)

Ces 2 fonctions permettent d’afficher respectivement les clés et les valeurs de propriétés d’un objet.

Méthodes keys values

monitorEvents

Cette fonction permet de logger les évènements émis pour un élément donné. On peut filtrer suivant le type d’événement. Seulement disponible sur Chrome.

Méthode monitorEvents

Copy

Copie le paramètre dans le presse papier. Cela peut être une valeur retournée par une fonction ou un objet.

Clear

Vide la console. Les barres d’outils proposent également des boutons pour le faire.

Références

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *