Débogage JavaScript

Écrire du JavaScript sans outils de débogage serait pénible.

Débogage JavaScript

Il est difficile d'écrire des programmes JavaScript sans outils de débogage.

Votre code peut contenir des erreurs de syntaxe et des erreurs de logique. Ces erreurs sont difficiles à trouver sans outils de débogage.

Habituellement, s'il y a une erreur dans JavaScript, il n'y aura pas de message d'invite, vous ne pourrez donc pas trouver l'emplacement de l'erreur de code.

Astuce : Généralement, des erreurs se produiront lorsque vous écrivez un nouveau code JavaScript.

Outils de débogage JavaScript

La recherche d'erreurs dans le code d'un programme est appelée débogage de code.

Le débogage est difficile, mais heureusement, de nombreux navigateurs disposent d'outils de débogage intégrés.

Les outils de débogage intégrés peuvent être démarrés ou désactivés, et des messages d'erreur graves seront envoyés à l'utilisateur.

Avec les outils de débogage, nous pouvons définir des points d'arrêt (où le code cesse de s'exécuter) et examiner les variables pendant l'exécution du code.

Pour activer les outils de débogage dans le navigateur, appuyez généralement sur la touche F12 et sélectionnez "Console" dans le menu de débogage.

Méthode console.log()

Si le navigateur prend en charge le débogage, vous pouvez utiliser la console. La méthode log() imprime les valeurs JavaScript sur la fenêtre de débogage :

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>

Exécutez le programme et essayez-le

Définir des points d'arrêt

Dans la fenêtre de débogage, vous pouvez définir des points d'arrêt sur le code JavaScript.

A chaque point d'arrêt, l'exécution du code JavaScript s'arrêtera afin que nous puissions vérifier la valeur des variables JavaScript.

Après vérification, vous pouvez réexécuter le code (comme le bouton de lecture). Le mot-clé debugger est utilisé pour arrêter l'exécution de JavaScript et appeler la fonction de débogage.

Ce mot-clé a le même effet que la définition d'un point d'arrêt dans l'outil de débogage.

L'instruction du débogueur ne fonctionnera pas si aucun débogage n'est disponible. Activez le débogueur et le code cesse de s'exécuter avant la troisième ligne.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<head>
</head>
<body>
<p id="demo"></p>
<p>开启调试工具，在代码执行到第三行前会停止执行。</p>
<script>
var x = 15 * 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

Exécutez le programme et essayez-le

Outils de débogage des principaux navigateurs

Habituellement, pour activer les outils de débogage dans le navigateur, appuyez sur la touche F12 et sélectionnez-la dans le menu de débogage "Console" .

Les étapes pour chaque navigateur sont les suivantes :

Navigateur Chrome

Ouvrez le navigateur .
Sélectionnez l'outil dans le menu.
Sélectionnez Outils de développement dans Outils.
Enfin, sélectionnez Console.

Navigateur Firefox

Ouvrez votre navigateur.
Visitez la page :
http://www.getfirebug.com.
Suivez les instructions :
Installez Firebug.

Navigateur Internet Explorer.

Ouvrez votre navigateur.
Sélectionnez l'outil dans le menu.
Sélectionnez Outils de développement dans Outils.
Enfin, sélectionnez Console.

Opéra

Ouvrez votre navigateur.
L'outil de débogage intégré d'Opera est Dragonfly. Pour des instructions détaillées, veuillez visiter la page :
http://www.opera.com/dragonfly/.

Safari

Ouvrez votre navigateur.
Cliquez avec le bouton droit de la souris et sélectionnez Inspecter l'élément.
Sélectionnez « Console » dans la fenêtre contextuelle en bas.

Formation continue

nouveau fichier

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <h1>我的第一个 Web 页面</h1> <p> 浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式，在调试窗口中点击 "Console" 菜单。 </p> <script> a = 5; b = 6; c = a + b; console.log(c); </script> </body> </html>

soumettre Réinitialiser le code

Opération automatique

Débogage JavaScript

ÉlémentaireTutoriel de site Web d'imitation d'entreprise Imperial CMS

ÉlémentaireLes débutants sans aucune base dans WordPress créent des blogs personnels et des sites Web d'entreprise

ÉlémentaireVidéo d'instructions sur la création de sites Web à base zéro Ultimate CMS

ÉlémentaireProjet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]

IntermédiaireVue3.0 de 0 pour créer une pratique de projet de système de gestion backend universel

ÉlémentaireCours frontal base zéro [Vue apprentissage avancé et application pratique]

ÉlémentaireTutoriel WEB front-end [HTML5+CSS3+JS]

ÉlémentaireIntroduction rapide à apipost

IntermédiaireTutoriel pratique Vue3+TypeScript au niveau de l'entreprise

ÉlémentaireParlons brièvement de la création d'une entreprise en PHP

IntermédiaireProjet de commerce électronique VUE (combat réel de projet double front-end et back-end)

ÉlémentaireApplication pratique Apipost [api, interface, tests automatisés, mock]