La console Chrome Developer Tools est probablement l'un des outils de navigation spécialisés les plus utilisés et les plus utiles. La console offre au programmeur de nombreuses fonctionnalités intéressantes. Il aide au débogage, au profilage et à la surveillance du code de page. Le matériel que nous traduisons aujourd'hui est dédié à vous parler de certaines fonctionnalités de la console Chrome qui ne sont pas aussi largement connues qu'elles le méritent.
Fonction moniteur
La fonction est monitorutilisée pour organiser la surveillance d'autres fonctions. En particulier, il vous permet de savoir quand une certaine fonction a été appelée et avec quels paramètres elle a été appelée. Prenons un exemple (son code est entré dans la console Chrome):function traceFunc (arg) { }
monitor(traceFunc)
La fonction est traceFuncpassée à la fonction monitorcomme argument. Maintenant, lorsque la fonction traceFuncest appelée, nous recevrons une notification à ce sujet (encore une fois, dans la console):traceFunc(90)
function traceFunc was called with arguments: 90
Utilisation de la fonction moniteurFonction de non surveillance
La fonction unmonitorvous permet de désactiver la surveillance d'une fonction qui était précédemment surveillée à l'aide de la fonction monitor. Afin d'arrêter la surveillance de la fonction traceFunc, nous utilisons la construction suivante:unmonitor(traceFunc)
Si vous appelez après cela traceFunc, aucune notification ne s'affichera dans la console.traceFunc(90)
L'appel d'une fonction dont la surveillance est désactivée n'entraîne pas la sortie d'informations sur cet appel vers la consoleFonction MonitorEvents
Le schéma d'utilisation des fonctions monitorEventsressemble à ceci:monitorEvents(object,[,events])
Cette fonction vous permet de suivre l'occurrence des événements d'objet et affiche des informations sur ces événements dans la console.Supposons qu'il existe un bouton sur la page décrite par le code suivant:<button id="button">Button</button>
Commençons à suivre l'événement de clickce bouton:monitorEvents(button, "click")
Si après avoir commencé l'observation d'un événement, clickcliquez sur le bouton - des informations sur l'événement seront affichées dans la console.Cliquez sur le bouton et commencez à surveiller ses événements. Vouspouvez surveiller plusieurs événements en passantmonitorEventsun tableau enfonction dudeuxième argument:monitorEvents(button, ["click", "mouseover"])
Maintenant sous observation sont des événements clicket mouseover. En conséquence, la console reçoit des messages sur le fait de cliquer sur le bouton et sur le fait qu'il était maintenu sur la souris.Surveillance des événements des boutons clic et survolVous pouvez organiser la surveillance des groupes d'événements:monitorEvents(button, ["click", "mouse"])
Une chaîne mouseest un identifiant universel pour un groupe d'événements liés à la souris. Par exemple - mouseover, mousemove, mouseout. Comme dans le cas de la souscription à des événements spécifiques, la souscription à un identifiant d'événement universel entraînera l'émission de notifications lorsque de tels événements se produisent.Surveillance des événements de bouton liés au clic dessus et à la sourisBien sûr, la fonction estmonitorEventsapplicable à d'autres objets, et pas seulement aux boutons. La même chose s'applique aux événements qui peuvent être regardés avec elle. Ce ne sont pas seulementclickdes événements de souris.Fonction UnmonitorEvents
La fonction unmonitorEventsvous permet d'annuler la surveillance des événements d'objet lancés par la fonction monitorEvents.Supposons que nous décidions de suivre les clics sur les boutons:monitorEvents(button, "click")
Par conséquent, lorsque vous cliquez sur le bouton, les informations sur ces événements parviennent à la console. Pour arrêter la surveillance, nous avons besoin de cette conception:unmonitorEvents(button, "click")
Maintenant, le système cesse de surveiller l'événement de clickbouton.Après avoir refusé de surveiller les événements de clic, les rapports sur les clics sur un bouton cessent d'accéder à la console$ _ Construction
La conception $_vous permet d'accéder au résultat de la dernière expression exécutée dans la console.Supposons que nous ayons entré une expression dans la console 2 + 2et l' avons exécutée. Cela nous a donné 4.Ensuite, nous avons entré et exécuté l'expression 3*2. Cela nous a donné 6.Il s'est avéré que nous avons effectué deux expressions, dont la plus récente est 3*2. Si maintenant entrez dans la console $_et cliquez Enter- le résultat de l'expression est affiché 3*2, c'est - 6.Utilisation de la construction $ _Fonction de copie
La fonction copyvous permet de copier les données qui y sont transférées dans le presse-papiers.Exécutons, par exemple, la commande suivante:copy("nnamdi")
Cela copiera la ligne dans le presse-papiers nnamdi. Afin de vérifier cela, exécutez la commande ci-dessus dans la console, puis essayez de coller ce qui se trouve dans le presse-papiers dans la barre d'adresse du navigateur. Vous devriez obtenir quelque chose qui ressemble à l'image suivante.Logiciel copiant des données dans le presse-papiersFonction claire
La fonction clearvous permet d'effacer l'historique de l'exécution des commandes dans la console. Cette fonction est utile dans les cas où la console est remplie de divers matériaux qui y sont affichés et que vous souhaitez en retirer tout ce qui y est affiché.Fonction touches
La fonction keys(object), comme la méthode Object.keys, renvoie un tableau de clés de propriété d'objet:const obj = {prop1: 0, prop2: 1, prop3: 2}
keys(obj)
Utilisation de la fonction des touchesFonction Valeurs
La fonction valuesest similaire à une méthode Object.values. Il renvoie un tableau de valeurs de propriété d'objet.const obj = {prop1: 0, prop2: 1, prop3: 2}
values(obj)
Utilisation de la fonction de valeursFonction GetEventListeners
La fonction getEventListenersrenvoie des informations sur les événements enregistrés pour l'objet. Par exemple, si vous enregistrez certains événements pour un bouton, la fonction getEventListenerspassée à ce bouton retournera un objet contenant, sous forme de tableaux, une description des événements du bouton.Supposons que la page ait ce code:<button id="button"
onclick="clickHandler()"
onmousedown="mousedownHandler()"
onmouseover="mouseoverHandler()">
Button
</button>
<script>
function clickHandler() {
}
function mousedownHandler() {
}
function mouseoverHandler() {
}
</script>
Ce code décrit le bouton et trois événements: click, onmousedownet onmouseover. Les événements sont affectés de gestionnaires clickHandler, mousedownHandleret mouseoverHandler.Appelez la commande suivante dans la console:getEventListeners(button)
Pour plus d' informations sur les bouton gestionnaires d'événementsUn objet, émis après la commandegetEventListeners(button),propriétés disponiblesclick,mousedownetmouseoverdontnoms correspondent aux noms des gestionnaires d'événements qui assignent un bouton. Les propriétés contiennent des tableaux d'objets contenant des informations détaillées sur les événements.Fonction $
La fonction $renvoie le premier des éléments DOM qui correspondent au sélecteur qui lui a été transmis. Le diagramme d'appel de fonction ressemble à ceci:$(elementName, [,node])
Supposons que la page ait le code suivant:<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
Ce code décrit quatre boutons.Exécutons la commande suivante:$("button")
Ce qui suit montre ce qui entre dans la console après son exécution.Résultat de la commande $ ("button") .Comme vous pouvez le voir, la commande a renvoyé un boutonButton1. Ce bouton est le premier élémentbuttondu document. Après avoir à notre disposition un nœud DOM d'un élément, nous pouvons nous référer à ses propriétés et méthodes.Par exemple, afin de trouver l'identifiant d'un bouton, vous pouvez utiliser cette construction:$("button").id
Clarification de l'identifiant du bouton A l'aide de la fonction$, vous pouvez spécifier le nœud DOM, dont le premier élément nous intéresse.SupposonsboutonsButton2,Button3etButton4de l'exemple précédent sont placés dans un élément<div>:<button id="button1" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button1</button>
<div>
<button id="button2" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button2</button>
<button id="button3" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button3</button>
<button id="button4" onclick="clickHandler()" onmousedown="mousedownHandler()" onmouseover="mouseoverHandler()">Button4</button>
</div>
Pour sélectionner le premier bouton parmi ceux qui sont imbriqués <div>, vous pouvez utiliser la commande suivante:$("button", document.querySelector("div"))
Accéder à un élément imbriqué dans un autre élémentComme vous pouvez le voir, il$renvoiemaintenantun boutonButton2, car il s'agit du premier élémentbuttonimbriqué dans l'élément<div>Fonction $$
La fonction $$fonctionne de la même manière que la fonction ci-dessus $. Mais il renvoie tous les éléments correspondants. Cela s'appelle comme ceci:$$(element, [,node])
Supposons qu'il y ait quatre boutons sur une page, comme dans les exemples précédents.Appelez la commande suivante:$$("button")
Utilisation de la fonction $$Après l'appel$$, comme le montre la figure précédente, nous avons à notre disposition un tableau d'élémentsbutton.Les éléments peuvent également être sélectionnés parmi ceux spécifiés lors de$$l'appel dunœud DOM. Par exemple, si une page contient plusieurs boutons<div>, nous pouvons, pour sélectionner tous ces boutons, utiliser cette conception:$$("button", document.querySelector("div"))
Utilisation de la fonction $$ pour sélectionner des éléments imbriqués dans un autre élémentSommaire
La console Chrome est un outil utile. À mesure que de nouvelles versions de Chrome deviennent disponibles, les capacités de sa console s'étendent. Par conséquent, il est utile de regarder périodiquement ici à la recherche de quelque chose de nouveau et d'intéressant.Chers lecteurs! Quels outils de console Chrome utilisez-vous le plus souvent?