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.

	通常，你在编写一个新的 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 méthode console.log() pour imprimer les valeurs JavaScript dans la fenêtre de débogage :

Instance

<!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écuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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 sera arrêtée afin que nous puissions inspecter La valeur d'une variable JavaScript.

Après vérification, vous pouvez réexécuter le code (comme le bouton de lecture).

mot-clé debugger

debugger le mot-clé 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.

Instance

<!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écuter l'instance »

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

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 "Console" dans le menu de débogage.

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 le 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 le 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 le 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.

Débogage JavaScript