L'API de la ligne de commande pour le plaisir et le profit

API de ligne de commande d'outil de développeur de navigateur: un outil puissant pour améliorer l'efficacité du développement et du débogage

Cet article explore la puissante API de ligne de commande dans les outils de développeur de navigateur, qui fournit une gamme d'alias, de fonctions pratiques et de raccourcis pour améliorer considérablement l'expérience de développement et de débogage.

Points de base:

• L'API de ligne de commande permet aux développeurs d'interagir avec les pages Web de la console JavaScript.
L'API
• est limitée à l'accès à la console JavaScript et ne peut pas être utilisée pour les scripts de page, mais il est pratique d'expérimenter les extraits de code directement dans la fenêtre du navigateur.
• API fournit une variété de fonctions pour l'exploration DOM, le suivi des objets et le débogage de la console, y compris $ (document.querySelector alias), dir (énumérez toutes les propriétés de l'objet), debug et monitor (Définissez les points d'arrêt et les appels de la fonction de surveillance).
• Malgré les limitations (par exemple, non applicables aux méthodes natives ou aux événements personnalisés), l'API de ligne de commande est un outil puissant pour les développeurs, augmentant considérablement l'efficacité et simplifiant les workflows.

L'API de ligne de commande contient une série d'alias, de fonctions pratiques et de raccourcis qui vous permettent d'interagir avec les pages Web directement dans la console JavaScript. Cet article présentera certains outils pratiques et leurs applications dans l'amélioration de l'expérience de développement et de débogage.

Vous pouvez accéder à la console JavaScript du navigateur de diverses manières. Appuyez généralement sur la touche F12 et cliquez sur l'onglet "Console".

Avant d'aller plus loin, ayons un quiz: savez-vous comment visualiser un aperçu de la disposition CSS dans votre navigateur?

Réponse: Seuls 108 octets de code sont requis.

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

Comme Addy Osmani, le créateur de ce code concis, a dit, il s'agit d'un "débogueur de taille Twitter". Vous pouvez l'essayer maintenant. Copiez simplement cette ligne de code et collez-le dans la console JavaScript de vos outils de développeur préférés (tels que Chrome's Devtools, Firefox's Firebug, Opera's Dragonfly, Safari's Inspecteur et même les outils F12 d'IE) (bien que IE ne supporte que

et la série et la série et la série $ et la série et le support console et la série et le support

et la série de support

et de la série de support

et d'IE) (IE Unique objets).

$$ document.querySelectorAll

Bien que la génération de valeurs hexadécimales de couleur soit impressionnante, je voudrais vous faire prêter plus d'attention aux plus spéciales. Il s'agit d'un alias pour

et l'une des nombreuses fonctionnalités intelligentes de l'API de la ligne de commande. Voyons quelles autres fonctionnalités de l'API peuvent fournir.

L'API de ligne de commande n'est disponible que dans la console JavaScript. Vous ne pouvez pas servir l'API aux scripts sur la page. Mais l'avantage est que cela vous donne la possibilité d'essayer tous les extraits de code pour le reste de cet article directement dans la fenêtre du navigateur. Ouvrez simplement votre console JavaScript et votre expérience.

Exploration DOM $ document.querySelector

Si vous connaissez la bibliothèque JQuery, vous avez peut-être deviné ce que fait. En tant qu'alias pour , il renvoie une référence au premier élément DOM qui correspond au sélecteur CSS donné.

Voyons comment l'utiliser dans le célèbre jeu Cookie Clicker. Si vous n'avez jamais rencontré ce jeu monotone mais étrangement addictif: vous cliquez essentiellement sur un grand cookie pour produire plus de produits de boulangerie et acheter une variété d'équipements de cuisson. Ensuite, ces appareils feront plus de cookies… vous l'obtenez.

Maintenant, ne serait-ce pas génial si nous pouvions faire cliquer sur les cookies et donner une pause à nos mains et à nos souris? Avec juste un peu JavaScript et notre nouvel ami $, vous pouvez l'implémenter avec une simple ligne de code:

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

Bien que cela soit intéressant, dans certains cas, la fonction de sélection DOM de l'API de ligne de commande a également une valeur réelle. Vous avez appris le pouvoir de $$ dans l'introduction de cet article. En tant qu'alias pour document.querySelectorAll, il renvoie un tableau contenant tous les éléments DOM qui correspondent au sélecteur CSS donné.

Par exemple, nous pouvons utiliser cette fonction pour extraire toutes les sources d'image du site Web:

setInterval(function() { $("#bigCookie").click(); }, 10);

Si vous recherchez un élément spécifique et que vous souhaitez le revérifier, utilisez inspect. Par exemple, inspect(document.body) vous amènera directement à l'élément body dans l'onglet Elements de l'outil de développement. (Si vous y transmettez une fonction JavaScript, inspect fonctionne également - il vous amènera au panneau source.)

Suivi des objets

Lorsque j'essaie de comprendre l'héritage du prototype de JavaScript, j'ai un petit assistant dans la console: dir. Lorsque cette méthode est appelée sur un objet, il affiche une liste de toutes les propriétés de l'objet, y compris par exemple prototype et __proto__. Ce n'est qu'une des nombreuses scènes qui sont utiles. J'ai trouvé qu'il visualise facilement les propriétés de tous les objets. dir

Si vous êtes uniquement intéressé par les propriétés directes d'un objet (c'est-à-dire des propriétés qui ne sont pas héritées de la chaîne prototype), vous pouvez utiliser

et keys pour obtenir un tableau contenant le nom et les valeurs associées , respectivement. Essayez-le: values

var pics = $$("img");
for (pic in pics) {
  console.log(pics[pic].src);
}

Étant donné que les objets sont les structures de données les plus fondamentales et les plus omniprésentes en JavaScript, j'utilise souvent ces fonctions pour suivre l'état d'objet.

Débogage de la console

La première chose que je fais chaque fois qu'il y a un problème avec mon site Web ou mon application est de vérifier la console pour les messages d'erreur. J'ai passé beaucoup de temps de développement dans la console. Si c'est le cas, vous devez être enthousiasmé par des fonctions comme

et debug. Ce ne sont que deux exemples des puissants outils de débogage fournis par l'API de ligne de commande. (Malheureusement, l'inspecteur Web de Safari ne prend pas en charge les deux fonctions.) monitor

debug(YourLibrary.someFunction)

Cela définit un point d'arrêt sur la première ligne de la fonction YourLibrary.someFunction, et le débogueur s'ouvre chaque fois que la fonction est appelée. Depuis que je travaille dans la console presque tout le temps, c'est beaucoup plus rapide que de parcourir le code source et de définir manuellement les points d'arrêt, en particulier lorsqu'il s'agit de code compressé. Pour désactiver ce comportement, appelez simplement undebug à la même fonction.

Si vous ne voulez pas appeler le débogueur, mais que vous êtes simplement informé chaque fois que vous appelez une fonction spécifique et quels paramètres utiliser, monitor est votre ami.

Le code suivant dans la console:

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1

Par exemple, une fois que vous avez appelé square, Chrome vous informera comme ceci:

square(5); function square called with arguments: 5

Appelez simplement unmonitor à la même fonction pour arrêter la surveillance. Notez que monitor dans Firebug ne fonctionne qu'avec des fonctions dans le code de la page.

L'API de ligne de commande fournit également une prise en charge du débogage des événements. getEventListeners Renvoie un objet contenant un tableau de chaque type d'événement (tel que "cliquez" ou "MousDown") enregistré pour l'objet spécifié.

getEventListeners(document);

En allant plus loin, vous pouvez également utiliser monitorEvents pour obtenir des commentaires dans la console pour savoir si l'événement spécifié est réellement déclenché. Continuez à saisir ce qui suit dans la console:

monitorEvents(window, "resize");

Après avoir redimensionné la fenêtre du navigateur, vous obtiendrez des commentaires dans la console avec l'objet de l'événement pour une inspection plus approfondie. Firebug ajoute une belle fonctionnalité supplémentaire qui vous informe même quels éléments DOM sont ou débordant de la fenêtre actuelle - ce qui est très utile pour déboguer les dispositions réactives.

Vous pouvez également spécifier plusieurs événements, et même sélectionner dans la liste des types d'événements:

monitorEvents(window, ["scroll", "mousedown"]); monitorEvents(document, "key");

Voir la référence de l'API de ligne de commande sur les développeurs Google pour la liste complète. Vous ne serez peut-être pas surpris à ce moment-là que vous pouvez utiliser unmonitorEvents pour désactiver la surveillance des événements.

Avantages supplémentaires pour les utilisateurs de Chrome

Tôt ou tard, la fonction de débogage de la console exposera certaines lacunes, notamment:

• debug et monitor ne s'appliquent pas aux méthodes natives
• monitorEvents Non applicable aux événements personnalisés
• fonctionnalités manquantes, telles que l'interruption lorsque les propriétés des objets sont accessibles

Heureusement, Amjad Masad a résolu ces problèmes dans son excellent Chrome Extension Debug Utils (vous pouvez trouver le code source sur Github).

Comment utiliser l'API de la ligne de commande?

L'API de ligne de commande fournit une série de fonctions utiles et pratiques pour l'évaluation temporaire des pages et applications Web. Surtout dans mon flux de travail de débogage, il a rapidement remplacé le Nightmare entier et est devenu l'un de mes outils préférés. console.log

La console JavaScript est un outil puissant auquel vous pouvez désormais accéder dans chaque navigateur majeur. L'utilisez-vous? Si oui, quels sont vos conseils et conseils préférés?

(La partie FAQ est omise car elle a une faible corrélation avec le sujet et est trop longue.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!