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é)

$_

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

$ et $$

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

Inspect()

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

keys(object) & values(object)

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

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.

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

• Références des API Command Line de Chrome, Firebug et
  Firefox
• CheatSheeet : Chrome et Firebug.
• Become a Javascript Console Power-User : Une vidéo montrant pas mal de ces astuces (en anglais)