Débogage JavaScript
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.
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.
Pour déboguer les programmes JavaScript, utiliser console.log() est un meilleur moyen que alert() La raison est la suivante : la fonction alert() bloque l'exécution des programmes JavaScript, provoquant ainsi des effets secondaires. ; console.log() n'imprime que les informations pertinentes dans la console, cela ne pose donc pas de problèmes similaires
Qu'est-ce que console.log() ?
À l'exception de certaines versions très anciennes des navigateurs, la plupart des navigateurs disposent aujourd'hui de fonctions de débogage intégrées ; même s'ils ne disposent pas de fonctions de débogage, elles peuvent être complétées par l'installation de plug-ins ; Par exemple, les anciennes versions de Firefox ne disposent pas d'outils de débogage intégrés. Dans ce cas, vous pouvez ajouter des fonctionnalités de débogage en installant le plug-in Firebug. Sur les navigateurs dotés de fonctionnalités de débogage, une variable membre nommée console sera enregistrée dans l'objet window, qui fait référence à la console dans l'outil de débogage. Les informations peuvent être imprimées dans la console en appelant la fonction log() de l'objet console. Par exemple, le code suivant imprimera « Sample log » dans la console :
Le code est le suivant : window.console.log("Sample log");
Le code ci-dessus peut ignorer l'objet window et l'abréger directement comme suit :
Le code est le suivant : console.log("Sample log");
console.log() peut accepter n'importe quelle chaîne, nombre et objet JavaScript. Semblable à la fonction alert(), console.log() peut également accepter le caractère de nouvelle ligne n et le caractère de tabulation t. Les informations de débogage imprimées par l'instruction console.log() peuvent être consultées dans la console de débogage du navigateur. Le comportement de console.log() peut varier selon les navigateurs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<script type="text/javascript">
//变量
var i = 'I am a string';
console.log('变量：',i);
//数组
var arr = [1,2,3,4,5];
console.log('数组：',arr);
//对象
var obj1 = {
key1 : 'value1',
key2 : 'value2',
key3 : 'value3'
};
var obj2 = {
key6 : 'value4',
key5 : 'value5',
key4 : 'value6'
};
var obj3 = {
key9 : 'value7',
key8 : 'value8',
key7 : 'value9'
};
console.log('对象：',obj1);
//对象数组
var objArr1 = [obj1,obj2,obj3];
var objArr2 = [[obj1],[obj2],[obj3]];
console.log('对象数组1：',objArr1);
console.log('对象数组1：',objArr2);
</script>
</head>
<body>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式， 在调试窗口中点击 "Console" 菜单。
</p>
</body>
</html>mot-clé debugger
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>
<script>
var x = 5 * 5 + 5;
debugger;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>Outils de débogage pour les principaux navigateurs
Habituellement, pour activer les outils de débogage dans un 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 Outils 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 Outils 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 qui apparaît en bas.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
