Home-theater-designers
La console du navigateur Web est l'un des outils les plus utilisés pour le débogage des applications frontales. L'API de la console offre aux développeurs la possibilité de gérer les erreurs et de consigner les messages.
console.log() est probablement la méthode la plus couramment utilisée dans l'API de la console, mais il existe également d'autres méthodes que vous pouvez utiliser dans votre flux de travail. Ce guide vous montre les différentes méthodes de console de navigateur Web que vous pouvez utiliser pour améliorer votre flux de travail de débogage.
Pourquoi la journalisation est-elle importante ?
La connexion à la console du navigateur Web est l'une des meilleures méthodes de débogage des applications frontales ou basées sur JavaScript.
Connexe: 6 frameworks JavaScript qui valent la peine d'être appris
La plupart des navigateurs Web modernes prennent en charge l'API de la console, ce qui la rend facilement accessible aux développeurs. L'objet console est chargé de fournir l'accès à la console de débogage du navigateur. L'implémentation peut être différente selon les navigateurs, mais la plupart des méthodes fonctionneront dans tous les navigateurs modernes.
Conseil : la console de votre navigateur peut exécuter tout le code décrit dans ce guide. presse F12 sur votre clavier pour ouvrir les outils des développeurs de navigateur dans Chrome ou Firefox.
Journalisation des messages de chaîne
L'une des méthodes de console les plus courantes est console.log() . Il envoie simplement un message de chaîne ou une valeur à la console Web. Pour les valeurs simples ou les messages de type chaîne, le console.log() méthode est probablement la meilleure option à utiliser.
puis-je utiliser des jeux ps3 sur ps4
Pour sortir un Bonjour le monde message, vous pouvez utiliser ce qui suit.
console.log(`Hello World`); Une autre particularité du console.log() méthode est la possibilité d'imprimer la sortie des éléments DOM ou la structure d'une partie d'un site Web, par exemple, pour afficher la structure de l'élément body et tout ce qu'il contient utilise ce qui suit.
console.log(document.body) La sortie est une collection d'éléments DOM sous la forme d'une arborescence HTML.
Journalisation des objets JavaScript interactifs
Les console.dir() La méthode est utilisée pour enregistrer les propriétés interactives des objets JavaScript. Par exemple, vous pouvez l'utiliser pour afficher les éléments DOM dans une page Web.
La sortie typique du console.dir() La méthode est composée de toutes les propriétés de l'objet JavaScript spécifié au format JSON. Utilisez la méthode ci-dessous pour imprimer les propriétés de tous les éléments du corps d'une page HTML :
console.dir(document.body) Évaluation des expressions
Vous connaissez peut-être les méthodes d'assertion issues des tests unitaires. console.assert() méthode fonctionne de manière similaire. Utilisez le console.assert() méthode pour évaluer une expression ou une condition.
Lorsque la méthode assert échoue, la console affiche un message d'erreur ; sinon, il n'imprime rien. Utilisez le code ci-dessous pour évaluer si l'âge d'une personne est supérieur à 18 ans :
let ageLimit = 18;
let yourAge = 12;
const assertFailMessage = 'You have to be older than 18 years of age';
console.assert( yourAge > ageLimit, assertFailMessage); L'assertion ci-dessus échoue et un message d'erreur s'imprime en conséquence.
Enregistrement de données dans des tables
Utilisez le console.table() méthode pour afficher les données sous forme de tableau. Les bons candidats à afficher sous forme de tableau incluent des tableaux ou des données d'objet.
Noter : Certains navigateurs, comme Firefox, ont une limite maximale de 1 000 lignes qui peuvent être affichées avec le console.table() méthode.
En supposant que vous ayez le tableau d'objets voiture suivant :
let cars = [
{'color':'purple', 'type':'minivan', 'registration': new Date('2021-04-05')},
{'color': 'red', 'type':'minivan', 'registration': new Date ('2021-06-10')}
] Vous pouvez afficher le tableau ci-dessus dans un tableau en utilisant la méthode ci-dessous :
console.table(cars); Journalisation des messages par catégorie
Les messages de la console du navigateur Web sont principalement classés en trois groupes : erreur, avertissement et information.
les erreurs
Pour imprimer spécifiquement des messages d'erreur sur la console à l'aide de la console.error() méthode, les messages d'erreur sont affichés en rouge.
console.error('error message'); Mises en garde
Pour imprimer des avertissements, utilisez ce qui suit. Comme dans la plupart des scénarios, les messages d'avertissement sont affichés en orange :
console.warn('warning message');Info
Pour imprimer des informations générales sur la console, utilisez le console.info () méthode:
console.info('general info message') Il est facile de filtrer ou de trouver des messages dans la console du navigateur lorsqu'ils sont correctement classés.
Traçage du flux du programme
Utilisez le console.trace() méthode pour imprimer une trace de pile du flux ou de l'exécution du programme. C'est une fonctionnalité très utile pour le débogage car elle imprime l'ordre dans lequel les fonctions sont exécutées dans votre programme.
Pour voir le console.trace() méthode en action, vous pouvez créer trois fonctions (comme ci-dessous) et placer une trace de pile dans l'une des fonctions.
function functionOne(){
functionTwo()
}
function functionTwo(){
functionThree()
}
function functionThree(){
console.trace()
}Dans la console de votre navigateur, appelez ou déclenchez fonctionUne() et vous obtiendrez une trace de pile des appels de fonction imprimés dans le dernier ordre entré, premier sorti (LIFO) car il s'agit d'une pile.
Exécution du programme de synchronisation
Pour chronométrer la durée d'exécution d'une opération dans votre programme, vous pouvez utiliser le console.heure() méthode. console.heure() est généralement utilisé avec le console.timeEnd() méthode où ce dernier est utilisé pour terminer la minuterie.
Vous pouvez exécuter jusqu'à 10 000 minuteurs par page Web, ce qui souligne l'importance d'étiqueter correctement vos minuteurs.
Pour chronométrer le temps qu'il faut à une boucle for pour parcourir les nombres 1 à 50 000, vous pouvez utiliser la minuterie comme suit.
console.time('loop timer 2');
for(i=1; i<50001; i++){
}
console.timeEnd('loop timer 2');
Compte
Les console.count() La méthode est utilisée pour garder une trace du nombre de fois qu'une fonction ou un morceau de code a été appelé dans un programme. Par exemple, nous pouvons suivre le nombre de fois qu'une boucle for s'est exécutée comme suit :
for(i=0; i<4; i++ ){
console.count();
}Regroupement des messages de journal
Tout comme la méthode de la minuterie, le console.groupe () , et console.groupEnd() les méthodes sont généralement utilisées par paires.
La méthode de groupe vous aide à mieux organiser vos messages de journal. Par exemple, nous pouvons créer un groupe de messages d'avertissement avec les avertissements d'étiquette comme suit.
console.group('warnings')
console.warn('another warning');
console.warn('This is a warning')
console.groupEnd()Les deux messages au sein du groupe d'avertissement sont visuellement classés comme indiqué dans la sortie ci-dessous.
Effacer la console
Enfin, voici plusieurs façons d'effacer les messages de journal dans la console de votre navigateur.
Utilisez le console.clear() méthode comme suit.
console.clear() Vous pouvez également effacer la console du navigateur à l'aide des raccourcis clavier du navigateur.
Google Chrome : Ctrl + L
Firefox : Ctrl + Maj + L
Utiliser la console du navigateur au maximum
Ce guide vous a montré certaines des différentes méthodes de console de navigateur Web disponibles pour vous aider à déboguer les applications frontales. L'API de la console est très légère, facile à apprendre et largement prise en charge dans la plupart des navigateurs modernes.
raisons pour lesquelles les médias sociaux sont bons
Faites une validation CAPTCHA de votre prochain projet et mettez vos nouvelles compétences en débogage à l'épreuve !
Partager Partager Tweeter E-mail Créer un formulaire de validation CAPTCHA à l'aide de HTML, CSS et JavaScriptSécurisez vos sites Web avec la validation CAPTCHA.
Lire la suite Rubriques connexes- La programmation
- Développement web
- JavaScript
Mwiza développe des logiciels par profession et écrit abondamment sur Linux et la programmation frontale. Certains de ses intérêts incluent l'histoire, l'économie, la politique et l'architecture d'entreprise.
Plus de Mwiza KumwendaAbonnez-vous à notre newsletter
Rejoignez notre newsletter pour des conseils techniques, des critiques, des ebooks gratuits et des offres exclusives !
Cliquez ici pour vous abonner