Derniers tutoriels de développement web
 

JavaScript debugging


Il est facile de se perdre l'écriture de code JavaScript sans un débogueur.


JavaScript Debugging

Il est difficile d'écrire du code JavaScript sans un débogueur.

Votre code peut contenir des erreurs de syntaxe ou des erreurs logiques, qui sont difficiles à diagnostiquer.

Souvent, lorsque le code JavaScript contient des erreurs, rien ne se passera. Il n'y a aucun message d'erreur, et vous obtiendrez aucune indication où chercher des erreurs.

Normalement, les erreurs vont se produire, à chaque fois que vous essayez d'écrire un nouveau code JavaScript.


JavaScript Debugger

Recherche d'erreurs dans le code de programmation est appelé code de débogage.

Debugging est pas facile. Mais heureusement, tous les navigateurs modernes ont un débogueur intégré.

débogueurs intégrés peuvent être activés et désactivés, ce qui oblige les erreurs à signaler à l'utilisateur.

Avec un débogueur, vous pouvez également définir des points d'arrêt (lieux où l'exécution de code peut être arrêté), et examiner les variables tandis que le code est exécuté.

Normalement, sinon suivre les étapes en bas de cette page, vous activez le débogage dans votre navigateur avec la touche F12, puis sélectionnez "Console" dans le menu du débogueur.


Le console.log() Méthode

Si votre navigateur prend en charge le débogage, vous pouvez utiliser console.log() pour afficher les valeurs JavaScript dans la fenêtre du débogueur:

Exemple

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>
Essayez - le vous - même »

Réglage Breakpoints

Dans la fenêtre du débogueur, vous pouvez définir des points d'arrêt dans le code JavaScript.

A chaque point d'arrêt, JavaScript arrêtera l'exécution, et que vous examinez les valeurs JavaScript.

Après avoir examiné les valeurs, vous pouvez reprendre l'exécution de code (généralement avec un bouton de lecture).


Le débogueur de mots-clés

Le mot - clé débogueur arrête l'exécution de JavaScript, et des appels ( le cas échéant) la fonction de débogage.

Cela a la même fonction que la fixation d'un point d'arrêt dans le débogueur.

Si aucun débogage est disponible, la déclaration du débogueur n'a pas d'effet.

Avec le débogueur activé, ce code va arrêter l'exécution avant d'exécuter la troisième ligne.

Exemple

var x = 15 * 5;
debugger;
document.getElementbyId("demo").innerHTML = x;
Essayez - le vous - même »

Debugging Tools principaux navigateurs

Normalement, vous activez le débogage dans votre navigateur avec F12 et sélectionnez "Console" dans le menu du débogueur.

Sinon, suivez ces étapes:

Chrome

  • Ouvrez le navigateur.
  • Dans le menu, sélectionnez Outils.
  • De outils, choisissez les outils de développement.
  • Enfin, sélectionnez Console.

Firefox Firebug

  • Ouvrez le navigateur.
  • Accédez à la page Web:
    http://www.getfirebug.com
  • Suivez les instructions pour:
    installer Firebug

Internet Explorer

  • Ouvrez le navigateur.
  • Dans le menu, sélectionnez Outils.
  • De outils, choisissez les outils de développement.
  • Enfin, sélectionnez Console.

Opera

  • Ouvrez le navigateur.
  • Aller à la page Web:
    http://dev.opera.com
  • Suivez les instructions pour:
    ajouter un bouton de la console développeur à votre barre d'outils.

Safari Firebug

  • Ouvrez le navigateur.
  • Aller à la page Web:
    http://extensions.apple.com
  • Suivez les instructions pour:
    installer Firebug Lite.

Safari Develop Menu

  • Allez à Safari, Préférences, Avancé dans le menu principal.
  • Cochez la case "Activer Afficher le menu dans la barre de menu Développement".
  • Lorsque la nouvelle option «Développement» apparaît dans le menu:
    Choisissez "Afficher la console d'erreur".

Savais-tu?

Le débogage est le processus de test, de trouver, et de réduire les bugs (erreurs) dans les programmes informatiques.
Le bogue informatique d'abord connu était un vrai bug (un insecte) coincé dans l'électronique.