Introduction au code de débogage de la console du navigateur et aux méthodes de la console JavaScript

Introduction au code de débogage de la console du navigateur et aux méthodes de la console JavaScript

Code de débogage de la console du navigateur

La console du navigateur (Console) est un outil de développement fourni par le navigateur pour exécuter et déboguer le code JavaScript dans le navigateur. Il fournit un environnement interactif dans lequel vous pouvez saisir du code JavaScript et voir immédiatement les résultats de l'exécution du code ou les informations de sortie.

Dans la plupart des navigateurs, vous pouvez ouvrir les outils de développement en appuyant sur la touche F12 ou en cliquant avec le bouton droit sur la page Web et en sélectionnant « Inspecter » (comme le navigateur Microsoft Edge) ou « Inspecter l'élément » (comme le navigateur 360), et le trouver. il y a l'onglet Console.

La console JavaScript présente les fonctionnalités suivantes :

Exécuter le code JavaScript : vous pouvez saisir n'importe quel code JavaScript dans la console et appuyer sur la touche Entrée pour l'exécuter. Le résultat de l'exécution du code sera immédiatement affiché dans la console, qui peut être une valeur de retour, des informations imprimées, etc.

Informations de sortie : en utilisant console.log() ou d'autres méthodes de console, vous pouvez imprimer les informations de sortie dans la console. Ceci est utile lors du débogage du code ou de l’affichage de la sortie d’un programme pendant son exécution.

Code de débogage : la console fournit certaines fonctions de débogage, telles que la définition de points d'arrêt, l'exécution en une seule étape, l'affichage des valeurs des variables, etc. Vous pouvez utiliser l'instruction du débogueur pour définir des points d'arrêt dans le code ou utiliser les outils de débogage de la console pour les opérations de débogage.

Message d'erreur : Si une erreur se produit lors de l'exécution du code, un message d'erreur s'affichera dans la console. Vous pouvez afficher les informations sur les erreurs, localiser les problèmes et déboguer.

Étapes spécifiques pour le code de débogage de la console du navigateur

Entrez about:blank dans la barre d'adresse du navigateur pour ouvrir une page vierge dans le navigateur

Appuyez ensuite sur la touche F12 pour ouvrir les outils de développement et saisissez le code JS dans la console à exécuter.

Vous pouvez insérer le mot-clé du débogueur à des endroits clés de votre code.

Mot-clé du débogueur : lorsque le code est exécuté avec le mot-clé du débogueur, le navigateur interrompt activement l'exécution et ouvre le débogueur. Les développeurs peuvent parcourir le code et afficher des informations importantes telles que les valeurs des variables dans la console. Par exemple:

function calculateTax(income) {
  debugger; // 中断代码执行，打开浏览器控制台的调试器

  var taxRate = 0.2;
  var tax = income * taxRate;

  console.log("计算税额中...");
  console.log("收入：" + income);
  console.log("税率：" + taxRate);
  console.log("税额：" + tax);

  console.log("计算完成。");

  return tax;
}

var finalResult = calculateTax(50000);
console.log("最终结果：" + finalResult);

Voici la situation dans le navigateur Microsoft Edge (c'est similaire dans d'autres navigateurs, mais la disposition de l'interface est différente) :

Le débogueur vous permet de parcourir votre code ligne par ligne, d'examiner les valeurs des variables et de voir comment votre code s'exécute. L'utilisation d'un débogueur peut vous aider à comprendre comment votre code s'exécute, à identifier les problèmes et à apporter les correctifs appropriés.

Il convient de noter qu'avant de publier le code, veuillez supprimer toutes les instructions du débogueur, sinon ces instructions affecteront les performances dans l'environnement de production.

 

Quelles sont les méthodes de la console JavaScript

La console JavaScript est un environnement interactif fourni par des outils de développement pour exécuter du code JavaScript et déboguer dans le navigateur. Ce qui suit est une introduction à certaines méthodes de console JavaScript couramment utilisées :

1. console.log() : Vous pouvez afficher n'importe quel type de valeur sur la console, comme des chaînes, des nombres, des valeurs booléennes, des objets, etc. comme:

console.log('Bonjour tout le monde !');

console.log(10 + 5);

2.console.error() : message d'erreur de sortie sur la console. Habituellement utilisé pour générer des conditions anormales pendant l’exécution du programme. comme:

essayer {

  // où le code pourrait mal tourner

  throw new Error('Ceci est un exemple d'erreur !');

} attraper (erreur) {

  console.error('Une erreur s'est produite :', erreur);

}

Une instruction try...catch est utilisée pour intercepter un bloc de code où des erreurs peuvent survenir. Utilisez la méthode console.error() pour afficher les informations d'erreur sur la console à des fins de débogage et de dépannage.

3. console.warn() : affiche un message d'avertissement avec une icône d'avertissement sur la console. Habituellement utilisé pour afficher des problèmes potentiels ou des informations nécessitant une attention particulière. comme:

console.warn('Ceci est un avertissement !');

4.console.info() : affiche une information d'invite avec une icône d'information sur la console. Habituellement utilisé pour afficher des informations rapides. comme:

console.info('Voici quelques informations.');

5. console.clear() : efface toutes les informations de la console.

console.clear();

6. console.table() : affiche les données d'un objet ou d'un tableau sur la console sous forme de tableau. Le paramètre est un tableau ou un objet dans lequel chaque élément ou attribut sera affiché sous forme de ligne ou de colonne du tableau. comme

données const = [

  { nom : 'John', âge : 25 },

  { nom : 'Alice', âge : 30 }

];

console.table(données);

7.console.dir() : Affiche les propriétés et méthodes de l'objet dans une arborescence sur la console. comme:

const obj = { nom : 'Jean', âge : 25 } ;

console.dir(obj);

8. console.time() et console.timeEnd() : calculez l'intervalle de temps requis pour l'exécution du code. Lorsque vous devez calculer le temps d'exécution du code, appelez la méthode console.time() au début du code et la méthode console.timeEnd() à la fin du code, en passant les mêmes paramètres. comme:

console.time('myTimer');

//Exécuter du code

console.timeEnd('myTimer');

9.console.assert() : Déterminez si une expression est vraie - affirmez l'expression et si le résultat est faux, affichez un message d'erreur sur la console. comme:

console.assert(2 + 2 === 5, 'Erreur : 2 + 2 n'est pas égal à 5');

10. console.group() et console.groupEnd() : créez un groupe pour organiser les informations de journal associées. comme:

console.group('Résultat du calcul');

console.log('2 + 2 =', 2 + 2);

console.log('3 * 3 =', 3 * 3);

console.groupEnd();

console.group('Groupe A');

console.log('Bonjour du groupe A');

console.groupEnd();

11.console.count() : compte le nombre d'appels d'une étiquette spécifique. A chaque appel de cette méthode, le compteur est incrémenté de un.

pour (soit i = 0; i < 5; i++) {

  console.count('Count');

}

12.console.trace() : génère les informations de trace de la pile d'appels de la fonction actuelle, qui sont utilisées pour suivre l'emplacement d'exécution du code. comme:

fonction foo() {

  bar();

}

barre de fonctions() {

  console.trace();

}

foo();

13.console.timeStamp() : affiche un horodatage sur la console pour marquer des événements ou des segments de code spécifiques.

console.timeStamp('Démarrer');

//Exécuter du code

console.timeStamp('Fin');

14.console.profile() et console.profileEnd() : démarrez et arrêtez le profileur de processeur JavaScript pour analyser les problèmes de performances du code.

console.profile('Performances');

//Exécuter du code

console.profileEnd('Performance');

Ces méthodes peuvent aider les développeurs avec la sortie des journaux, le débogage des erreurs, l'optimisation des performances, l'analyse du code, etc. Veuillez choisir la méthode appropriée en fonction des besoins réels.