É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.
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é :
<<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<h1>Web Debug App</h1>
<p>Check console for bug</p>
<table>
<thead>
<tr>
<th>Previous count</th>
<th>Current count</th>
<th>Total count</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<p>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:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173705233279872.png" alt="app error using minified code" loading="lazy" style="max-width:90%" style="max-width:90%"></p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173705233320770.png" alt="Bundled source file" loading="lazy" style="max-width:90%" style="max-width:90%"></p>
<p>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.</p>
<h2>
8 JavaScript debugging strategies for web apps
</h2>
<p>Let’s demonstrate eight methods to help make JavaScript debugging a bit easier:</p>
<h3>
1. Source maps
</h3>
<p>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.</p>
<p>To generate source maps using webpack, update the webpack.config.js file as follows:</p>
<p>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.</p>
<p>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.</p>
<p>With source maps generated, the following observations are made:</p>
<ol>
<li> The error is linked to the counter.js file, which is the original source code</li>
<li> The source map, bundle.js.map is successfully fetched and is visible under the <strong>Developer resources</strong> tab</li>
<li> In the <strong>Sources</strong> tab, the developer tools display the original source code and the problematic line</li>
</ol>
<p>The exact code and file causing the bug are easy to identify using source maps:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173705233514189.png" alt="app error from source maps" loading="lazy" style="max-width:90%" style="max-width:90%"></p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173705233621716.png" alt="mapped source code javascript debugging" loading="lazy" style="max-width:90%" style="max-width:90%"></p>
<p>With the clear error above, we are able to fix the error and access the correct property on countCache.</p>
<p>Our guide on how to use Chrome DevTools should provide a great start. To open the <strong>Developer resources</strong> tab, click on the <strong>More</strong> icon, then <strong>More tools</strong> then <strong>Developer resources</strong>. This tab allows you to view the source map load status and even load source maps manually:</p>
<p><img src="https://img.php.cn/upload/article/000/000/000/173705233875017.png" alt="accessing developer resources tab javascript debugging" loading="lazy" style="max-width:90%" style="max-width:90%"></p>
<p>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:<br>
</p>
<pre class="brush:php;toolbar:false">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 :
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 :
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 :
Grâce à cela, nous pouvons déboguer davantage notre application.
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 :
À 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.
Parcourir votre code implique de naviguer dans le programme de différentes manières pendant le débogage JavaScript :
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;
}
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 :
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 :
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 :
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.
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.
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 :
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
