Les techniques de débogage du navigateur sont des capacités essentielles pour tout développeur Web. Le processus de développement peut être considérablement rationalisé et des heures de frustration peuvent être évitées grâce aux outils et procédures appropriés. Plusieurs outils de débogage sont intégrés aux navigateurs modernes, qui peuvent vous aider à identifier et à résoudre les problèmes liés à vos applications en ligne. Ce didacticiel approfondi passera en revue 15 méthodes de débogage efficaces que chaque navigateur devrait proposer, ainsi que des exemples de code pour vous montrer comment les utiliser.
Liste des techniques de débogage du navigateur
L'outil Inspect Element est la pierre angulaire du débogage du navigateur. Il vous permet d'afficher et de modifier du HTML et du CSS à la volée.
Comment l'utiliser
Cliquez avec le bouton droit sur n'importe quel élément de la page Web.
Sélectionnez « Inspecter » ou « Inspecter l'élément » dans le menu contextuel.
Le panneau des outils de développement s'ouvrira, affichant la structure HTML et les styles CSS associés.
Exemple
Disons que vous souhaitez changer la couleur d'un bouton de manière dynamique.
<button id="myButton" style="color: blue;">Click Me!</button>
Cliquez avec le bouton droit sur le bouton et sélectionnez « Inspecter ».
Dans le volet Styles, changez la couleur : bleu ; à colorier : rouge ;.
La couleur du bouton sera mise à jour immédiatement.
La console est votre meilleure amie pour enregistrer les informations, les erreurs et les avertissements.
Comment l'utiliser
Ouvrez les outils de développement (généralement F12 ou faites un clic droit et sélectionnez « Inspecter »).
Accédez à l'onglet « Console ».
Utilisez console.log(), console.error() et console.warn() dans votre code JavaScript.
Exemple
console.log("This is a log message.");
console.error("This is an error message.");
console.warn("This is a warning message.");
Les points d'arrêt vous permettent de suspendre l'exécution du code sur des lignes spécifiques pour inspecter les variables et la pile d'appels.
Comment l'utiliser
Ouvrez les outils de développement.
Accédez à l'onglet "Sources".
Cliquez sur le numéro de ligne où vous souhaitez définir le point d'arrêt.
Exemple
function calculateSum(a, b) {
let sum = a + b;
console.log(sum);
return sum;
}
calculateSum(5, 3);
Définissez un point d'arrêt sur let sum = a + b;.
Exécutez la fonction.
L'exécution s'arrêtera, vous permettant d'inspecter les variables.
Le panneau Réseau vous aide à surveiller les demandes et les réponses du réseau, y compris les codes d'état, les en-têtes et les charges utiles.
Comment l'utiliser
Ouvrez les outils de développement.
Accédez à l'onglet "Réseau".
Rechargez la page pour voir l'activité du réseau.
Exemple
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));
Ouvrez le panneau Réseau.
Exécutez la demande de récupération.
Inspectez les détails de la demande et de la réponse.
Les cartes sources relient votre code minifié à votre code source d'origine, ce qui facilite le débogage.
Comment l'utiliser
Assurez-vous que votre outil de build génère des cartes sources (par exemple, à l'aide de Webpack).
Ouvrez les outils de développement.
Naviguez vers l'onglet « Sources » pour afficher le code source d'origine.
Exemple (Configuration du Webpack)
module.exports = {
mode: 'development',
devtool: 'source-map',
// other configurations
};
Les remplacements locaux vous permettent d'apporter des modifications aux ressources réseau et de voir l'effet immédiatement sans modifier les fichiers source.
Comment l'utiliser
Ouvrez les outils de développement.
Accédez à l'onglet "Sources".
Cliquez avec le bouton droit sur un fichier et sélectionnez « Enregistrer pour les remplacements ».
Exemple
Remplacez un fichier CSS pour changer la couleur d'arrière-plan d'un div.
<div id="myDiv" style="background-color: white;">Hello World!</div>
Enregistrez le fichier pour les remplacements et modifiez la couleur d'arrière-plan : blanc ; à la couleur de fond : jaune ;.
Le panneau Performances vous aide à analyser les performances d'exécution, y compris l'exécution de JavaScript, le rendu de la mise en page, etc.
Comment l'utiliser
Ouvrez les outils de développement.
Accédez à l'onglet « Performances ».
Cliquez sur « Enregistrer » pour commencer à capturer les données de performances.
Exemple
Enregistrez les performances d'exécution d'une fonction.
function performHeavyTask() {
for (let i = 0; i < 1000000; i++) {
// Simulate a heavy task
}
console.log("Task completed");
}
performHeavyTask();
Analyser les données enregistrées pour identifier les goulots d'étranglement.
Le panneau Mémoire vous aide à détecter les fuites de mémoire et à analyser l'utilisation de la mémoire.
Comment l'utiliser
Ouvrez les outils de développement.
Accédez à l'onglet "Mémoire".
Prenez un instantané du tas pour analyser l'utilisation de la mémoire.
Exemple
Créez des objets et surveillez l'utilisation de la mémoire.
let arr = [];
function createObjects() {
for (let i = 0; i < 100000; i++) {
arr.push({ index: i });
}
}
createObjects();
Prenez un instantané du tas avant et après l'exécution de createObjects() pour comparer l'utilisation de la mémoire.
Le panneau Application fournit des informations sur le stockage local, le stockage de session, les cookies, etc.
Comment l'utiliser
Ouvrez les outils de développement.
Accédez à l'onglet « Application ».
Explorez les options de stockage sous « Stockage ».
Exemple
Stockez les données dans un stockage local et inspectez-les.
localStorage.setItem('key', 'value');
console.log(localStorage.getItem('key'));
Vérifiez la section « Stockage local » dans le panneau Application.
Lighthouse is an open-source tool for improving the quality of web pages. It provides audits for performance, accessibility, SEO, and more.
How to Use It
Open the developer tools.
Navigate to the "Lighthouse" tab.
Click "Generate report".
Example
Run a Lighthouse audit on a sample webpage and review the results for improvement suggestions.
Mobile device emulation helps you test how your web application behaves on different devices.
How to Use It
Open the developer tools.
Click the device toolbar button (a phone icon) to toggle device mode.
Select a device from the dropdown.
Example
Emulate a mobile device and inspect how a responsive layout adapts.
<div class="responsive-layout">Responsive Content</div>
Modern browsers provide tools to visualize and debug CSS Grid and Flexbox layouts.
How to Use It
Open the developer tools.
Navigate to the "Elements" tab.
Click on the "Grid" or "Flexbox" icon to visualize the layout.
Example
Debug a CSS Grid layout.
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.item {
background-color: lightblue;
padding: 20px;
}
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
Use the Grid debugging tool to visualize the layout.
The Accessibility Checker helps you identify and fix accessibility issues in your web application.
How to Use It
Open the developer tools.
Navigate to the "Accessibility" pane under the "Elements" tab.
Inspect elements for accessibility violations.
Example
Check the accessibility of a button element.
<button id="myButton">Click Me!</button>
The Accessibility pane will provide insights and suggestions.
The JavaScript Profiler helps you analyze the performance of your JavaScript code by collecting runtime performance data.
How to Use It
Open the developer tools.
Navigate to the "Profiler" tab.
Click "Start" to begin profiling.
Example
Profile the execution of a function to find performance bottlenecks.
function complexCalculation() {
for (let i = 0; i < 1000000; i++) {
// Simulate a complex calculation
}
console.log("Calculation completed");
}
complexCalculation();
Analyze the profiling results to optimize the function.
Debugging asynchronous code can be challenging, but modern browsers provide tools to handle it effectively.
How to Use It
Open the developer tools.
Set breakpoints in asynchronous code using the "async" checkbox in the "Sources" tab.
Use the "Call Stack" pane to trace asynchronous calls.
Example
Debug an asynchronous fetch request.
async function fetchData() {
try {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
console.log(data);
} catch (error) {
console.error("Error fetching data:", error);
}
}
fetchData();
Set a breakpoint inside the fetchData function and trace the asynchronous execution.
Conclusion
Mastering these 15 powerful debugging techniques can significantly enhance your productivity and efficiency as a
web developer. From basic tools like Inspect Element and Console Logging to advanced features like the JavaScript Profiler and Asynchronous Debugging, each technique offers unique insights and capabilities to help you build better web applications.
By leveraging these browser debugging techniques, you'll be well-equipped to tackle any challenges that come your way, ensuring your web applications are robust, efficient, and user-friendly. Happy debugging!
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!
Vérifier l'occupation du port sous Linux
Comment ouvrir le format TIF sous Windows
Quels sont les logiciels de dessin ?
Quelles sont les méthodes de stockage des données ?
Comment utiliser l'instruction insert dans MySQL
Temps de panne du service Windows 10
Collection de touches de raccourci informatique
Comment résoudre le problème de steam_api.dll manquant
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
