Guide des commandes de la console

Les consoles de développeurs de navigateurs Web sont de puissants outils de débogage, évoluant de simples journalistes d'erreurs aux systèmes de journalisation complets. Ils suivent l'activité du réseau, les problèmes de sécurité, etc., et permettent à JavaScript de produire des informations de débogage via l'objet console . Bien que largement cohérents entre les navigateurs, des différences visuelles et fonctionnelles subtiles existent. Ce guide se concentre sur Firefox et Chrome, avec un bord à base de chrome se comportant de la même manière que Chrome. La spécification WhatWG fournit plus de détails.

Navigation rapide

• Bases de journalisation
• Effacement de la console
• Méthodes de journalisation communes
• Formatage des chaînes
• Sortie de style
• Affirmation
• Compter les occurrences
• Inspection des propriétés
• Regroupement
• Sortie de la table
• Opérations de synchronisation
• Traces de pile
• Déboguer avec debugger
• Utilitaires de console supplémentaires

Enregistrement avec console.log()

Commencez par examiner l'objet console lui-même:

 console.log (console);

Cela révèle les propriétés de l'objet, principalement des fonctions, avec des variations spécifiques au navigateur mineures. Par exemple, Chrome comprend une propriété "mémoire", tandis que Firefox propose une propriété "nom". Ces différences sont généralement mineures.

Effacer la console: console.clear()

Une console encombrée entrave le débogage. Utiliser:

 console.clear ();

Cela efface la sortie de la console et affiche un message de confirmation (par exemple, "la console a été effacée").

Fonctions de journalisation communes: debug() , error() , info() , log() , warn()

Cinq fonctions semblent similaires mais offrent des améliorations spécifiques au navigateur:

 console.debug ();
console.error ();
console.info ();
console.log ();
console.warn ();

Ces fonctions diffèrent légèrement en Chrome et Firefox concernant le codage couleur et l'utilisation des icônes, et dans le niveau de détail fourni (par exemple, traces de pile pour les erreurs). Les navigateurs offrent des options de filtrage pour contrôler la visibilité de chaque type de journal.

Ces fonctions acceptent divers types de données JavaScript (chaînes, nombres, objets, tableaux) comme arguments. Plusieurs arguments sont affichés en ligne.

Substitution de cordes

L'enregistrement amélioré implique une substitution de chaîne à une sortie plus claire:

 console.log ('Ceci est une chaîne:% s', 'string');
console.log ('Ceci est un nombre:% i', 42);
console.log ('Ceci est un objet:% o', {objet: 'objet'});

Les types de substitution pris en charge incluent %s (chaîne), %i (entier), %o (objet), et plus encore. Les modèles littéraux offrent une alternative plus concise:

 console.log (`Ceci est une chaîne: $ {'String'}`);
console.log (`c'est un nombre: $ {42}`);
console.log (`Ceci est un objet: $ {{objet: 'objet'}}`);

Les deux méthodes peuvent être combinées pour le formatage flexible.

Sortie de la console de style

Appliquer les styles CSS pour améliorer la lisibilité:

 Console.log ('% cthis est un grand texte rouge', 'Couleur: rouge; Font-Size: 30px;');

Des différences de rendu spécifiques au navigateur peuvent se produire. Les espaces réservés de plusieurs %c permettent un style varié dans une seule instruction de journal. Les variables peuvent être utilisées pour stocker et réutiliser les styles, améliorant l'organisation du code.

Affirmation: console.assert()

console.assert() prend une condition booléenne. Si faux, il publie un message d'erreur; Sinon, cela ne fait rien. Cela simplifie la journalisation des erreurs conditionnelles:

 Soit la valeur = 10;
Console.Asersert (valeur <p> Chrome fournit des traces de pile pour les affirmations ratées, contrairement à Firefox.</p><h3> Comptage des occurrences: <code>count()</code> et <code>countReset()</code>
</h3><p> Suivez les appels de fonction ou les événements à l'aide de <code>console.count()</code> . Les étiquettes facultatives permettent des comptes séparés:</p><pre class="brush:php;toolbar:false"> Console.Count («MyFunction»);
Console.Count («MyFunction»);
Console.Count («une autre fonction»);

console.countReset() réinitialise un compteur spécifique. Des différences spécifiques au navigateur existent dans la façon dont la réinitialisation est indiquée visuellement.

Inspection des objets: dir() et dirxml()

console.dir() affiche les propriétés des objets dans une structure en forme d'arbre, tandis que console.dirxml() est destiné aux éléments XML / HTML. Firefox traite les deux comme des alias pour console.log() . Chrome's console.dir() est particulièrement utile pour inspecter les éléments DOM, fournissant des informations de propriété détaillées.

Groupement de sortie: group() , groupCollapsed() , groupEnd()

Organisez la sortie de la console à l'aide console.group() , éventuellement avec une étiquette. console.groupCollapsed() effondre initialement le groupe. console.groupEnd() ferme un groupe. La nidification est soutenue. Le style peut être appliqué aux étiquettes de groupe.

Sortie du tableau: console.table()

Affichez les tableaux et objets dans un format tabulaire à l'aide de console.table() . Les tableaux d'objets sont rendus avec des clés sous forme d'en-têtes de colonne. Les structures de données complexes (tableaux de tableaux, objets avec des valeurs de tableau) entraînent des tables plus élaborées. Les différences de navigateur existent dans la façon dont les objets imbriqués sont gérés dans le tableau.

Opérations de synchronisation: time() , timeLog() , timeEnd()

Mesurer le temps d'exécution du code à l'aide de console.time() , console.timeLog() et console.timeEnd() . console.timeLog() fournit des mises à jour de synchronisation intermédiaire. Des différences mineures spécifiques au navigateur existent.

Traces de pile: console.trace()

Générez une trace de pile pour identifier l'origine d'une instruction de journal spécifique.

Déboguer avec debugger

La déclaration debugger interrompt l'exécution et ouvre le débogueur sur cette ligne. Ce n'est pas une méthode d'objet console mais un puissant outil de débogage intégré à la console.

Utilitaires de console supplémentaires

Il existe plusieurs utilitaires spécifiques au navigateur:

• $0 , $1 , etc .: raccourcis pour accéder aux éléments DOM sélectionnés dans l'inspecteur.
• $('element') , $$('elements') : raccourcis pour document.querySelector() et document.querySelectorAll() .
• $x('xpath') : Évaluateur d'expression xpath.
• clear() : efface la console sans message.
• getEventListeners(object) : répertorie les écouteurs d'événements attachés à un élément DOM (Chrome uniquement).

Ce guide complet fournit une base solide pour tirer parti des commandes de console de navigateur pour un débogage et un développement efficaces. Une exploration plus approfondie révèlera des caractéristiques et des capacités supplémentaires spécifiques au navigateur.

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!