Lorsque j'ouvre les outils de développement dans Google Chrome, je vois toutes sortes de fonctionnalités telles que Profils, Scénarios et Audits. mais les fonctionnalités de base comme la possibilité de définir un point d'arrêt à la fois dans les fichiers js et dans le code javascript html sont manquantes! J'ai essayé d'utiliser la console javascript qui est elle-même boguée (comme si une fois qu'elle rencontrait une erreur JS, elle ne pouvait pas en sortir à moins de rafraîchir toute la page lorsque l'ajax est impliqué). Quelqu'un peut-il aider?
Réponses
Trop de publicités?
Matt Ball
Points
165937
Vous parlez de code au sein d' <script> tags, ou dans la balise HTML attributs, comme ça?
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>
De toute façon, l' debugger mot-clé de ce genre de travail:
<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>
N. B. Chrome de ne pas mettre en pause à l' debuggers si les outils de dev ne sont pas ouverts.
Vous pouvez également définir la propriété des points d'arrêt dans les fichiers JS et <script> tags:
- Cliquez sur les Sources de l'onglet
- Cliquez sur le Spectacle Navigateur icône et sélectionnez le fichier
- Double-cliquez sur le numéro de ligne dans la marge de gauche. Une ligne correspondante est ajoutée aux points d'arrêt du panneau (4).
Utilisez l'onglet sources, vous pouvez y définir des points d'arrêt en JavaScript. Dans la liste déroulante située en dessous (avec les flèches haut et bas), vous pouvez sélectionner le fichier que vous souhaitez déboguer. Vous pouvez sortir d'une erreur en appuyant sur Reprendre sur le côté droit du même onglet.
Gruff Bunny
Points
4314
ken
Points
489
Un autre truc simple et intuitif pour déboguer en particulier le script dans html renvoyé par ajax, est de mettre provisoirement console.log ("test") dans le script.
Une fois que vous avez déclenché l'événement, ouvrez l'onglet Console dans les outils de développement. vous verrez le lien du fichier source affiché à droite de l'instruction d'impression "debug". il suffit de cliquer sur la source (quelque chose comme VM4xxx) et vous pouvez maintenant définir le point de rupture.
à votre santé
Aditya Singh
Points
41
Ma situation et ce que j'ai fait pour résoudre le problème:
J'ai un fichier javascript inclus dans une page HTML comme suit:
Nom de Page: test.html
<!DOCTYPE html>
<html>
<head>
<script src="scripts/common.js"></script>
<title>Test debugging JS in Chrome</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<script type="text/javascript">
document.write("something");
</script>
</div>
</body>
</html>
Maintenant dans le Débogueur Javascript dans le navigateur Chrome, je clique sur l'Onglet Scripts, et en déroulant la liste comme indiqué ci-dessus. Je peux voir clairement scripts/common.js cependant je pourrais PAS voir la page html en cours test.html dans le menu déroulant, donc je ne pouvais pas débogage du javascript intégré:
<script type="text/javascript">
document.write("something");
</script>
Qui a de quoi laisser perplexe. Cependant, quand j'ai enlevé le obsolètes type="text/javascript" à partir du script intégré:
<script>
document.write("something");
</script>
..et actualisé / rechargé la page, voila, il est apparu dans la liste déroulante, et tout allait bien à nouveau.
J'espère que cela est utile à tous ceux qui ont des problèmes de débogage javascript intégré dans une page html.
