Beyond Console.log () - Augmentez vos compétences de débogage

Les outils du développeur de navigateur sont bien plus que <code>console.log(), et leurs fonctions puissantes peuvent améliorer considérablement l'efficacité du développement. Cet article explorera quelques conseils pratiques moins connus pour vous aider à optimiser votre flux de travail.

Points de base

• Utilisez l'expression en temps réel de la console pour surveiller les changements de script en temps réel sans rechercher des changements spécifiques dans le journal.
• Utilisez la console pour utiliser directement le document actuel, utilisez <code>$_ pour obtenir le résultat de la dernière commande, et <code><code> à
pour accéder à la pile des éléments cochés.
Passer de la console vers le panneau "Sources" pour un environnement d'édition de script plus puissant, prenant en charge les scripts multi-lignes et les interactions complexes avec les pages Web.
Utilisez des touches de raccourci (telles que Ctrl Shift P) pour accéder rapidement aux outils de développement via le menu de commande pour simplifier le processus de débogage.
Intégration transparente du débogage et du développement en configurant les espaces de travail, en synchroniser les modifications apportées dans les outils du développeur de navigateur directement sur le code source.
Intégrer le code Visual Studio avec des outils de développeur de navigateur via les DevTools pour l'extension de code vs, combinant de puissantes capacités d'édition et débogage du site en temps réel.

Éclatement de la zone de confort

<code>console.log() Les développeurs sont souvent utilisés pour fixer les flux de travail, ce qui peut limiter les gains d'efficacité. Un processus courant est: Écrivez du code dans l'éditeur, enregistrez-le et passez au navigateur pour le charger, puis utilisez des outils de développement pour ajuster le CSS, effectuer des tests de dimensionnement et de simulation mobile. Débogage en ajoutant des instructions

, étroitement liées aux numéros de ligne et aux informations de débogage.

Cette méthode est inefficace et déroutante. Les outils de navigateur sont remplis d'informations de débogage qui n'appartiennent pas au produit final, ce qui rend non seulement difficile pour les autres de comprendre, mais cause également des problèmes aux développeurs novices. Nous n'avons utilisé qu'une petite partie des fonctionnalités de l'outil de développeur et avons raté l'occasion d'améliorer l'efficacité.

Cet article introduira certains outils de développeur de navigateur Chromium et des fonctionnalités pratiques dans le code Visual Studio. Tout d'abord, plongeons dans la console.

Compétences avancées sur la console

<code>console.log(thing) Nous avons l'habitude d'ajouter

au code de débogage. Mais cela est parfois inefficace et les données de format d'origine sont difficiles à comprendre.

Les conseils suivants peuvent être obtenus sur GitHub et visualisés dans le navigateur où les outils du développeur sont ouverts. (Ou consultez la démo en ligne dans Codepen)

Tout d'abord, ajoutez des accolades bouclées au journal non seulement pour imprimer la valeur de la variable, mais également afficher le nom de variable pour un suivi facile.

<code class="language-javascript">let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}</code>

FORMAT LOG

En utilisant un spécificateur de format commençant par un pourcentage de signe, des valeurs spécifiques peuvent être enregistrées dans différents formats:

• <code>%s: Enregistrez comme une chaîne
• <code>%i ou <code>%d: Enregistrez comme entier
• <code>%f: Enregistrer en tant que numéro de point flottant
• <code>%o: Enregistrez comme élément DOM extensible
• <code>%O: En tant qu'enregistrement d'objet JavaScript extensible

Ces spécificateurs peuvent être utilisés dans un mélange de l'ordre de remplacement et de paramètre:

<code class="language-javascript">let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}</code>

La conversion de type peut également être effectuée:

<code class="language-javascript">console.log('%ix %s developer', 10, 'console');
// 10x console developer</code>

<code>%c Le spécificateur permet des messages de journal de style CSS:

<code class="language-javascript">console.log('%i', 12.34455241234324234); // 12</code>

Log de groupe

grouper les journaux avec <code>console.group() pour une expansion et un effondrement faciles:

<code class="language-javascript">console.log('%cPay attention to me','color:firebrick;font-size:40px')</code>

Vous pouvez nicher des groupes et utiliser <code>console.groupCollapsed() sans expansion des groupes par défaut:

<code class="language-javascript">const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);</code>

Filtrage des journaux

En utilisant <code>console.info(), <code>console.error() et <code>console.warn(), vous pouvez utiliser la barre latérale ou le sélecteur de niveau de la console pour filtrer les messages pour faciliter la recherche d'informations spécifiques dans un grand nombre de journaux.

Autres méthodes de console utiles

<code>console.count() et <code>console.countReset() Les méthodes peuvent compter le nombre de fois un appel de méthode ou une exécution de fonction:

<code class="language-javascript">const extendedlabel = 'The Millenium Falcon Crew extended';
const meat = 'Humanoids';
const metal = 'Droids';
console.group(extendedlabel);
console.groupCollapsed(meat);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(meat);
console.group(metal);
console.log('R2D2');
console.log('C3PO');
console.groupEnd(metal);
console.groupEnd(extendedlabel);</code>

<code>console.time() Les méthodes peuvent mesurer le temps d'exécution du script:

<code class="language-javascript">console.count('Chocula'); // Chocula: 1
console.count(); // default: 1
console.count('Chocula'); // Chocula: 2
console.countReset('Chocula'); 
console.count(); // default: 2 
console.count(); // default: 3
console.count('Chocula'); // Chocula: 1</code>

<code>console.dir() Affiche le contenu et le type de données, <code>console.dirxml() Affiche la représentation XML du nœud, et <code>console.table() affiche les données JSON dans une table triable.

Remplacez les journaux par des expressions en temps réel

<code>console.log() La surveillance des valeurs fréquemment changeantes est inefficace. Les expressions en temps réel peuvent résoudre ce problème. Activez le bouton Eye dans les outils du développeur et entrez une expression JavaScript valide dont la valeur sera affichée au-dessus de la console.

Par exemple, entrez <code>document.activeElement et l'expression affichera l'élément actuellement activé dans la page.

Les expressions en temps réel sont durables et n'ont rien à voir avec un nom de domaine ou un site spécifique. Il doit être supprimé une fois le débogage terminé pour éviter les erreurs.

Les expressions en temps réel sont idéales pour surveiller les changements de données de script, en particulier pour les valeurs fréquemment modifiées telles que la position de la souris.

Utilisez la console pour utiliser le document actuel

La console

est un REPL qui permet d'écrire et d'exécuter JavaScript et d'utiliser la fonctionnalité d'observation automatique pour comprendre les méthodes et propriétés disponibles du document actuel.

La console fournit également de nombreuses méthodes et raccourcis pratiques:

• <code>$_: Stockez le résultat de la dernière commande.
• <code><code> à
: la dernière pile d'éléments vérifiée.
• <code>$() <code>$$() et <code>document.querySelector(): abrégé <code>document.querySelectorAll() et
respectivement.
• <code>$x()
: Utilisez XPATH pour sélectionner l'élément DOM.
• <code>copy()
: Copiez le contenu dans le presse-papiers.
• <code>clear()
: Effacez la console.
• <code>getEventListeners(node)
: Répertoriez tous les écouteurs d'événements pour les nœuds.
• <code>monitorEvents(node, events)
: Surveillez et enregistrez les événements sur les nœuds.
• <code>monitor(method)
: Crée un élément de journal lors de l'appel d'une méthode.

de la console vers le panneau des sources

L'environnement unique de la console limite l'écriture de code. Les scripts multi-lignes peuvent être écrits à l'aide de Shift Enter. Le panneau Sources fournit un environnement d'édition de script plus puissant.

Menu de commande des outils du développeur

Le menu de commande (Shift P ou CMD Shift P) permet d'accéder à toutes les fonctions de l'outil de développement via le clavier.

Code Snippet

Les extraits de code sont un moyen pratique de sauvegarder des scripts qui interagissent avec les documents. Ils ont des moyens pratiques d'accéder aux documents et consoles du navigateur actuellement ouvert.

Couverture

La fournure est une copie locale du fichier distant. Les outils de développeur de navigateur remplacent les fichiers distants par des copies locales, ce qui facilite la modification des feuilles de style de site Web ou effectuer des tests de performances.

Espace de travail: tâches de développement et de débogage synchrones

L'espace de travail permet d'ajouter des dossiers de projet aux outils du développeur, à synchroniser les outils du développeur et l'éditeur.

Devtools pour vs extension de code

Le DevTools pour VS Code Extension intègre le code Visual Studio avec les outils de développeur de navigateur, combinant de puissantes capacités d'édition et débogage du site en temps réel.

Étapes suivantes

Il est recommandé d'apprendre à utiliser le débogage des points d'arrêt, qui est une méthode de débogage plus efficace.

JavaScript Debogging Skills FAQ

(La partie FAQ du texte d'origine est omise ici parce que cette partie du contenu a peu à voir avec le thème principal de l'article et est longue, donc la conservation de l'article pseudo-original semble redondant.)

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!