Comment maîtriser le débogage JavaScript pour les applications Web

Écrit par Ivy Walobwa✏️

À mesure que votre application Web gagne en complexité, il devient essentiel de maîtriser l'art du débogage.

Un débogage JavaScript efficace implique bien plus que la simple correction des erreurs. Cela nécessite une compréhension du fonctionnement de votre code sous le capot pour garantir le bon fonctionnement de votre application et offrir la meilleure expérience utilisateur.

Le code minifié, qui est la version de votre code qui atteint les utilisateurs en production, est optimisé pour les performances. Cependant, le code minifié peut être un cauchemar à déboguer. Lorsque les utilisateurs rencontrent des erreurs, reproduire et diagnostiquer les problèmes dans du code minifié est souvent difficile.

Cependant, avec les bons outils, le débogage JavaScript peut devenir beaucoup plus facile. Cet article explique comment exploiter les mappages sources pour déboguer le code minifié et se penche sur d'autres techniques utilisant Chrome DevTools pour identifier et résoudre efficacement les problèmes dans votre application Web.

Exemple d'application

Nous travaillerons sur une application simple qui incrémente un décompte et l’enregistre sur la console. Cette application montre comment un code minifié peut rendre le débogage délicat et comment les mappages de sources peuvent aider à simplifier le processus.

Créez les fichiers .js ci-dessous et ajoutez les extraits de code comme indiqué :

1. src/counterCache.js

export const countCache = { 
     previousCount: 0, 
     currentCount: 0, 
     totalCount: 0 
}
export function updateCache(currentCount, previousCount) { 
     countCache.currentCount = currentCount; 
     countCache.previousCount = previousCount; c
     ountCache.totalCount = countCache.totalCount + countCache.currentCount; 
}

2.src/counter.js :

import { updateCache } from './counterCache.js';
let count = 0; 
export function incrementCounter() 
     { count += 1; 
     const previousCount = count; 
     updateCache(count, previousCount); 
}

3.src/index.js :

import { incrementCounter } from './counter';
import { countCache } from './counterCache';
const button = document.createElement('button');
const previousElement = document.getElementById('previous');
const currentElement = document.getElementById('current');
const totalElement = document.getElementById('total');
button.innerText = 'Click me';
document.body.appendChild(button);
button.addEventListener('click', () => {
     incrementCounter();
     previousElement.innerText = countCache.previousCount;
     currentElement.innerText = countCache.currentCount;
     totalElement.innerText = countCache.total();
});

Dans votre fichier package.json, ajoutez les packages webpack comme indiqué ci-dessous puis exécutez npm i pour les installer. Nous utiliserons webpack dans le cadre du processus de construction pour générer du code minifié pour la production :

  "devDependencies": {
    "webpack": "^5.96.1",
    "webpack-cli": "^5.1.4"
  }

Pour activer la minification du code, ajoutez un fichier webpack.config.js avec l'extrait suivant. Définir le mode sur production indique à Webpack d'appliquer des optimisations telles que la modification :

 const path = require('path');
    module.exports = {
        mode: 'production', // Enables optimizations like minification and tree-shaking
        entry: './src/index.js', // Specifies the entry point of your application
        output: {
            path: path.resolve(__dirname, 'dist'),// Defines the output directory for bundled files
            filename: 'bundle.js',// Specifies the name of the bundled file
        },
    };

Exécutez maintenant npx webpack pour regrouper et réduire votre code. Le fichier dist/bundle.js est généré avec le contenu comme indiqué ci-dessous. La minification masque les noms de variables et de fonctions et supprime les caractères inutiles tels que les espaces, les commentaires et le code inutilisé, ce qui rend le fichier de sortie plus petit et plus rapide à charger :

(()=>{"use strict";const t={};let e=0;const n=document.createElement("button"),o=document.getElementById("previous"),u=document.getElementById("current"),r=document.getElementById("total");n.innerText="Click me",document.body.appendChild(n),n.addEventListener("click",(()=>{var n,c;e+=1,n=e,c=e,t.currentCount=n,t.previousCount=c,t.totalCount=t.totalCount||0+t.currentCount,o.innerText=t.previousCount,u.innerText=t.currentCount,r.innerText=t.total()}))})();

Ensuite, mettez à jour le fichier index.html pour référencer la sortie groupée, en vous assurant que votre application utilise le code minifié :

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Web Debugging Example</title>
    <link rel="stylesheet" href="styles.css"> 


    <h1 id="Web-Debug-App">Web Debug App</h1>
    <p>Check console for bug</p>
    

Previous count	Current count	Total count
Finally, run the app and check the console after clicking the button. To preview the app locally, you can use the Live Server extension in VS Code: The error in the console, t.total is not a function, is difficult to interpret. Clicking on the file in the console does not help pinpoint the issue due to the compact and obfuscated nature of minified code. Identifying the root cause of such an error in a large codebase can be frustrating and time-consuming, as the minified code obscures the original logic and context. 8 JavaScript debugging strategies for web apps Let’s demonstrate eight methods to help make JavaScript debugging a bit easier: 1. Source maps Source maps are files that map your minified code back to the original source code. They make debugging easier and help investigate issues in production. The file names of source maps end with .map. To generate source maps using webpack, update the webpack.config.js file as follows: The devtool: 'source-map' or devtool: 'eval-source-map' line tells webpack to generate an external .map file which maps the minified code back to your original source code. The source map file URL is also added to the minified code in the bundle.js file. Now run npx webpack. The .map file will generate alongside your minified bundle. Serve the application using a local server, and open it in an Incognito browser window. This prevents browser extensions and cached files from interfering with your debugging process. With source maps generated, the following observations are made: The error is linked to the counter.js file, which is the original source code The source map, bundle.js.map is successfully fetched and is visible under the Developer resources tab In the Sources tab, the developer tools display the original source code and the problematic line The exact code and file causing the bug are easy to identify using source maps: With the clear error above, we are able to fix the error and access the correct property on countCache. Our guide on how to use Chrome DevTools should provide a great start. To open the Developer resources tab, click on the More icon, then More tools then Developer resources. This tab allows you to view the source map load status and even load source maps manually: The code snippet below fixes the bug on the console. Update your code, then run npx webpack to compile the changes. Once completed, serve the application and view the updated output in the table: totalElement.innerText = countCache.totalCount; Cliquer sur le bouton met actuellement à jour le décompte précédent, le décompte actuel et le total sur le tableau. Le décompte précédent est censé renvoyer la valeur précédente du décompte et le décompte total doit renvoyer la somme de toutes les valeurs du décompte. Pour le moment, le décompte précédent affiche le décompte actuel tandis que le décompte total est bloqué à un. Dans la section suivante, nous explorerons des techniques de débogage JavaScript supplémentaires, telles que l'utilisation de points d'arrêt et la lecture pas à pas du code, pour identifier et résoudre ce problème : 2. Points d'arrêt Les points d'arrêt vous permettent de suspendre l'exécution de votre code sur des lignes spécifiques, vous aidant ainsi à inspecter les variables, à évaluer les expressions et à comprendre le flux du code. En fonction de votre objectif, vous pouvez utiliser différents points d'arrêt. Par exemple : Ligne de code — Suspend l'exécution de votre code à une ligne exacte spécifiée Ligne de code conditionnelle — Suspend l'exécution uniquement lorsqu'une condition spécifiée est vraie Logpoint – Ne met pas en pause l'exécution du code, mais enregistre à la place un message personnalisé sur la console lorsque cette ligne de code est exécutée Dans notre exemple d'application, nous appliquerons un point d'arrêt à la fonction IncreaseCounter. Dans le panneau Sources, ouvrez le fichier counter.js et cliquez à gauche de la ligne six. Ceci définit un point d'arrêt de ligne de code après l'augmentation du nombre : Nous allons définir un autre point d'arrêt à la ligne cinq et le modifier. Pour modifier notre point d'arrêt, nous ferons un clic droit sur la section en surbrillance puis cliquerons sur Modifier le point d'arrêt : Nous allons définir le type de point d'arrêt sur Logpoint, puis saisir le message à enregistrer sur la console : En cliquant sur le bouton, notre application s'arrête au point d'arrêt de la ligne de code et imprime un journal de débogage sur la console à partir de l'ensemble Logpoint : De l'image, nous pouvons voir les sections suivantes : Le panneau des points d'arrêt — Aide à gérer et à activer vos points d'arrêt. Actuellement, nous avons ajouté deux points d'arrêt, sur les lignes cinq et six. Ces points d'arrêt peuvent être activés ou désactivés depuis le panneau Le panneau de portée — Crucial pour inspecter les états et les valeurs des variables au point d'arrêt actuel Contrôles de débogage — Cela vous permet de naviguer dans votre code étape par étape. Les commandes sont : reprendre, franchir, entrer, sortir et faire un pas Grâce à cela, nous pouvons déboguer davantage notre application. 3. Panneau de portée Le panneau de portée peut être efficace pour le débogage JavaScript, car il vous permet de voir les variables de la source d'origine : Nous pouvons voir les variables de portée suivantes : Local - Ce sont des variables définies dans la fonction en cours d'exécution Fermeture - Ces variables sont capturées à partir du bloc externe ou des étendues de script de la fonction en cours d'exécution Fermeture - Ce type de variable est obtenu à partir de portées générées, par exemple en utilisant des fichiers de module Global - Ce sont des variables disponibles dans toute l'application À partir du panneau de portée et du point d'arrêt du point de journalisation, nous pouvons voir que le décompte actuel est un tandis que le décompte avant l'augmentation est zéro. Nous devons donc stocker le décompte avant l'incrément comme le décompte précédent. 4. Parcourir le code (_s_tep into, step over, step out) Parcourir votre code implique de naviguer dans le programme de différentes manières pendant le débogage JavaScript : Entrez dans - Vous permet d'entrer dans un appel de fonction et d'examiner le code à l'intérieur de cette fonction Enjamber - Sauter l'appel de fonction et l'exécuter sans y plonger Sortez - Vous permet de revenir au contexte de l'appelant d'une fonction si vous y êtes entré Vous pouvez utiliser les contrôles de débogage pour parcourir votre code. Le contrôle Step vous permet d'exécuter votre code, une ligne à la fois. Cliquer sur Étape exécutera la ligne six et passera à la ligne sept. Notez comment la valeur de previousCount change dans la portée : Le contrôle Step over permet d'exécuter une fonction sans la parcourir ligne par ligne : La commande Entrer permet d'accéder à une fonction. Dans la fonction, vous pouvez parcourir le code ligne par ligne ou Sortir de la fonction comme indiqué ci-dessous. Sortir de la fonction terminera l'exécution des lignes restantes : Pour résoudre notre problème, nous mettrons à jour le code comme indiqué ci-dessous. Cela affiche désormais correctement le décompte précédent sur le tableau : export const countCache = { previousCount: 0, currentCount: 0, totalCount: 0 } export function updateCache(currentCount, previousCount) { countCache.currentCount = currentCount; countCache.previousCount = previousCount; c ountCache.totalCount = countCache.totalCount + countCache.currentCount; } 5. La pile d'appels La pile d'appels montre la séquence d'appels de fonction qui ont conduit au point actuel du code. Ajoutez un nouveau point d'arrêt dans le fichier counterCache.js comme indiqué, puis cliquez sur le bouton. Observez le panneau de la pile d'appels : Trois appels de fonction sont effectués lorsque l'application exécute la ligne six de counterCache.js. Pour observer le flux de toutes les fonctions dans la pile, vous pouvez redémarrer leur exécution en utilisant Redémarrer le cadre, comme indiqué ci-dessous : 6. Ignorer les scripts Lors du débogage, vous souhaiterez peut-être ignorer certains scripts pendant votre flux de travail. Cela permet d'éviter les complexités du code des bibliothèques ou des générateurs de code. Dans notre cas, nous voulons ignorer le script counter.js lors du débogage. Sur l'onglet Page, faites un clic droit sur le fichier à ignorer et ajoutez le script à la liste des ignorés : En exécutant l'application et en faisant une pause sur le point d'arrêt, nous pouvons voir que la fonction IncreaseCounter est désormais ignorée sur la pile d'appels. Vous pouvez masquer ou afficher les frames ignorés : Vous pouvez regrouper vos fichiers dans l'onglet Pages pour une navigation plus facile comme indiqué dans l'image ci-dessous : 7. Regardez les expressions Les expressions de surveillance vous permettent de suivre des variables ou des expressions spécifiques pendant l'exécution de votre code, vous aidant ainsi à surveiller les modifications en temps réel. Vous pouvez ajouter des expressions telles que countCache pour surveiller la valeur au fur et à mesure que vous parcourez le code : 8. Extraits de code de débogage Pour essayer de corriger le bug avec le décompte total, vous pouvez exécuter des extraits de code sur la console pour comprendre l'erreur logique. Lors du débogage du code que vous exécutez à plusieurs reprises sur la console, vous pouvez utiliser des Snippets. Dans l'onglet Extraits, ajoutez un exemple de script de débogage, enregistrez le script puis cliquez sur Entrée pour exécuter le script : Vous pouvez observer que l'expression avec le bug doit être réorganisée pour résoudre le problème : export const countCache = { previousCount: 0, currentCount: 0, totalCount: 0 } export function updateCache(currentCount, previousCount) { countCache.currentCount = currentCount; countCache.previousCount = previousCount; c ountCache.totalCount = countCache.totalCount + countCache.currentCount; } Vous pouvez explorer des ressources supplémentaires sur le débogage des applications Web, comme cet article sur le débogage des applications React avec React DevTools, qui offre des informations précieuses sur le débogage des applications basées sur React. De plus, ce guide sur le débogage de Node.js avec Chrome DevTools fournit des conseils pour déboguer du JavaScript côté serveur à l'aide d'observateurs et d'autres fonctionnalités avancées de DevTools. Ces ressources peuvent compléter les techniques abordées ici et élargir votre compréhension du débogage des applications Web. Conclusion Ce didacticiel a exploré le débogage des cartes sources de bus de code minifié et des Chrome DevTools. En générant des cartes sources, nous avons mappé le code minifié à sa source d'origine, ce qui facilite le débogage de notre application Web. Chrome DevTools a encore amélioré le processus de débogage JavaScript avec des méthodes telles que les points d'arrêt, la navigation pas à pas dans le code, les expressions de surveillance, etc. Grâce à ces outils, les développeurs peuvent déboguer et optimiser efficacement leurs applications, même lorsqu'ils ont affaire à des bases de code complexes et minifiées. Le code complet de ce projet peut être trouvé sur GitHub. Installez-vous avec le suivi des erreurs moderne de LogRocket en quelques minutes : Visitez https://logrocket.com/signup/ pour obtenir un identifiant d'application. Installez LogRocket via NPM ou une balise de script. LogRocket.init() doit être appelé côté client et non côté serveur. NPM : import { updateCache } from './counterCache.js'; let count = 0; export function incrementCounter() { count += 1; const previousCount = count; updateCache(count, previousCount); } Balise de script : import { incrementCounter } from './counter'; import { countCache } from './counterCache'; const button = document.createElement('button'); const previousElement = document.getElementById('previous'); const currentElement = document.getElementById('current'); const totalElement = document.getElementById('total'); button.innerText = 'Click me'; document.body.appendChild(button); button.addEventListener('click', () => { incrementCounter(); previousElement.innerText = countCache.previousCount; currentElement.innerText = countCache.currentCount; totalElement.innerText = countCache.total(); }); 3.(Facultatif) Installez des plugins pour des intégrations plus approfondies avec votre pile : Middleware Redux middleware ngrx Plugin Vuex Commencez maintenant.

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!