Débogage des projets JavaScript avec VS Code et Chrome Debugger

Master JavaScript Débogage avec le code vs et le débogueur Chrome: un guide complet

Fatigué de compter sur console.log() pour le débogage javascript? Cet article présente des techniques de débogage puissantes à l'aide du code Visual Studio (VS Code) et de l'extension Chrome Debugger, transformant votre flux de travail de débogage.

Imaginez un monde sans console.log(). Le débogage serait un cauchemar! Bien que console.log() offre une solution rapide, il devient lourd pour les problèmes complexes. Les outils de débogage offrent une alternative supérieure. Ce guide utilise le débogueur intégré de VS Code et le débogueur pour l'extension Chrome pour l'intégration transparente avec Chrome Devtools.

Avantages clés:

• Débogage rationalisé, éliminant console.log() Reliance.
• Points de rupture précis pour une pause exécution à des points spécifiques.
• Inspection détaillée des états variables et exécution de code étape par étape.
• Configurations personnalisables launch.json pour le débogage ciblé.
• Gestion efficace des points d'arrêt et observation de l'expression dans le panneau de débogage du code VS.
• Débogage de test Mocha sans couture pour l'isolement et la résolution des échecs des tests.
• Débogue JavaScript côté client avec le débogueur Chrome.

Prérequis:

• Compréhension moderne de JavaScript.
• node.js
• Visual Studio Code
• navigateur chromé
• debug-example Projet (cloner ce projet pour une pratique pratique).

Configuration du projet debug-example:

1. Clone le référentiel debug-example.
2. Ouvrez le projet dans le code vs.
3. Installez les dépendances:

<code class="language-bash">npm install
npm install -g mocha</code>

Débogage dans VS Code: un guide étape par étape

Debugs src/places.js:

<code class="language-javascript">const places = [];

module.exports = {
  places,

  addPlace: (city, country) => {
    const id = ++places.length; // Bug: Modifies places.length prematurely
    let numType = 'odd';
    if (id % 2) { // Bug: Incorrect modulus condition
      numType = 'even';
    }
    places.push({ id, city, country, numType });
  },
};

module.exports.addPlace('Mombasa', 'Kenya');
module.exports.addPlace('Kingston', 'Jamaica');
module.exports.addPlace('Cape Town', 'South Africa');</code>

1. Définir les points d'arrêt: Cliquez dans le gouttière à côté des numéros de ligne pour définir les points d'arrêt (points rouges).

2. Lancez le débogueur: Cliquez sur l'icône de débogage (icône de bogue) dans la barre d'activité VS Code.

3. Configurez launch.json: Cliquez sur l'icône du matériel pour créer launch.json. Configurez-le pour déboguer places.js:

<code class="language-bash">npm install
npm install -g mocha</code>

4. Démarrer le débogage: Sélectionnez "Lancement des lieux" et appuyez sur F5 (ou cliquez sur le bouton de lecture).

5. Contrôles de débogage: Utilisez les contrôles de la barre d'outils de débogage: continuez, passez, interrompez, sortez, redémarrez, arrêt.

6. Inspecter les variables: survole les variables pour voir leurs valeurs, ou utiliser les sections "variables" et "regarder" du panneau de débogage.

7. Identifier et corriger les bogues: par le pas et l'inspection, identifiez les bogues dans places.js (incrément de longueur prématuré et condition de module incorrect). Corrigez le code en conséquence.

Débogage des tests Mocha:

1. Ajouter la configuration de Mocha: Dans le panneau de débogage, cliquez sur la liste déroulante et sélectionnez "Ajouter la configuration". Choisissez "Mocha Tests".

2. Définir les points d'arrêt dans placesTest.js: Ajouter des points d'arrêt dans votre fichier de test.

3. Commencez à déboguer: Sélectionnez "MOCHA TESTS" et commencez à déboguer. Passez à travers les tests, inspectant les variables pour identifier et résoudre tout problème restant. N'oubliez pas d'ajouter un crochet beforeEach pour réinitialiser le tableau places entre les tests.

Débogage du code côté client avec chrome Debugger:

1. Installez l'extension: Installez l'extension "débogueur pour Chrome" à partir du marché du code VS.

2. Configurer launch.json: Ajouter une configuration chromée:

<code class="language-javascript">const places = [];

module.exports = {
  places,

  addPlace: (city, country) => {
    const id = ++places.length; // Bug: Modifies places.length prematurely
    let numType = 'odd';
    if (id % 2) { // Bug: Incorrect modulus condition
      numType = 'even';
    }
    places.push({ id, city, country, numType });
  },
};

module.exports.addPlace('Mombasa', 'Kenya');
module.exports.addPlace('Kingston', 'Jamaica');
module.exports.addPlace('Cape Town', 'South Africa');</code>

3. Démarrez le serveur: Exécutez votre serveur express (npm start).

4. Démarrer le débogage: Sélectionnez "Lancer Chrome" et démarrez le débogage. Le débogueur s'attachera à votre instance chromée.

5. Débogage Code côté client: Définissez des points d'arrêt dans votre JavaScript côté client (app.js), parcourez le code et inspectez les variables pour identifier et corriger tous les bogues côté client (par exemple, incorrect sélecteurs, ID manquants).

Résumé:

Ce guide démontre la puissance du code vs et le débogueur Chrome pour un débogage efficace de JavaScript. En maîtrisant ces techniques, vous pouvez améliorer considérablement votre efficacité de débogage et écrire du code de meilleure qualité. Explorez la documentation de débogage du code VS pour des fonctionnalités avancées telles que les points d'arrêt conditionnels. 告别 console.log() ， 拥抱高效调试！

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!