Comment définir des points d'arrêt dans Javascript en ligne dans Google Chrome?
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 des fonctionnalités de base telles que la possibilité de définir des points d'arrêt à la fois dans les fichiers js et dans le code html et javascript sont manquantes! J'ai essayé d'utiliser la console javascript, qui elle-même est boguée. Par exemple, une fois qu'elle rencontre une erreur JS, je ne peux pas en sortir à moins d'actualiser la page. Quelqu'un peut aider?
Utilisez l'onglet sources, vous pouvez y définir des points d'arrêt en JavaScript. Dans l'arborescence de répertoires située en dessous (avec les flèches haut et bas), vous pouvez sélectionner le fichier que vous souhaitez déboguer. Vous pouvez éviter une erreur en appuyant sur la touche de reprise située dans la partie droite du même onglet.
Parlez-vous de code dans les balises <script>, ou dans les attributs de balises HTML, comme ceci?
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>
Dans les deux cas, le mot clé debugger comme ceci fonctionnera:
<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>
N.B. Chrome ne fera pas de pause à debuggers si les outils de développement ne sont pas ouverts.
Vous pouvez également définir des points d'arrêt de propriété dans les fichiers JS et les balises <script>:
- Cliquez sur l'onglet Sources .
- Cliquez sur l'icône Afficher le navigateur et sélectionnez le fichier.
- Double-cliquez sur le numéro de ligne dans la marge de gauche. Une ligne correspondante est ajoutée au panneau Points d'arrêt (4).
Vous pouvez également donner un nom à votre script:
<script> ... (your code here) //# sourceURL=somename.js </script>
ofcourse remplace "somename" par un nom;) et vous le verrez ensuite dans le débogueur chrome à "Sources> top> (no domain)> somename.js" en tant que script normal et vous pourrez pour le déboguer comme d'autres scripts
Actualisez la page contenant le script pendant que les outils de développement sont ouverts dans l'onglet Scripts. Cela va ajouter une entrée (programme) dans la liste des fichiers qui affiche le code HTML de la page, y compris le script. De là, vous pouvez ajouter des points d'arrêt.
Une autre astuce simple et intuitive pour déboguer, en particulier les scripts au sein du code HTML renvoyés par ajax, consiste à placer temporairement console.log ("test") dans le script.
Une fois l'événement déclenché, ouvrez l'onglet de la console dans les outils de développement. vous verrez le lien du fichier source affiché à droite de l'instruction de test de débogage "test". il suffit de cliquer sur la source (quelque chose comme VM4xxx) et vous pouvez maintenant définir le point de rupture.
P.S.: En outre, vous pouvez envisager de placer une instruction "débogueur" si vous utilisez du chrome, comme ce qui est suggéré par @Matt Ball
Ma situation et ce que j'ai fait pour y remédier:
J'ai un fichier javascript inclus sur une page HTML comme suit:
Nom de la 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, en entrant dans le débogueur Javascript dans Chrome, je clique sur l'onglet Scripts, et déroule la liste comme indiqué ci-dessus. Je peux clairement voir scripts/common.js mais je pourrais PAS voir la page html actuelle test.html dans le menu déroulant, donc Je ne pouvais pas déboguer le javascript intégré:
<script type="text/javascript">
document.write("something");
</script>
C'était troublant. Cependant, lorsque j'ai supprimé le code obsolète type = "text/javascript" du script intégré:
<script>
document.write("something");
</script>
..et rafraîchi/rechargé la page, voila, il est apparu dans la liste déroulante, et tout allait bien à nouveau.
J'espère que cela sera utile à quiconque rencontre des problèmes de débogage de JavaScript intégré sur une page HTML.
Ajouter debugger; en haut de mon script a fonctionné pour moi.
J'avais aussi le même problème, comment déboguer JavaScript qui est à l'intérieur des balises <script>. Mais ensuite, je l'ai trouvé sous l'onglet Sources, appelé "(index)", avec des parenthèses. Cliquez sur le numéro de ligne pour définir des points d'arrêt.
C'est Chrome 71.
Si vous ne pouvez pas voir l'onglet "Scripts", assurez-vous de lancer Chrome avec les bons arguments. J'ai eu ce problème lorsque j'ai lancé Chrome pour le débogage de JavaScript côté serveur avec l'argument --remote-Shell-port=9222. Je n'ai pas de problème si je lance Chrome sans argument.
Je suis tombé sur ce problème, mais ma fonction inline était dans une vue angularJS. Par conséquent, lors du chargement, je ne pouvais pas accéder au script en ligne pour ajouter le débogage, car seul l'index.html était disponible dans l'onglet sources du débogueur.
Cela signifiait que lorsque j'ouvrais la vue particulière avec mon inline (je n'avais pas le choix), elle n'était pas accessible.
La seule façon dont j'ai pu le frapper était de mettre une fonction erronée ou d'appeler à l'intérieur de la fonction JS en ligne.
Ma solution comprenait:
function doMyInline(data) {
//Throw my undefined error here.
$("select.Sel").debug();
//This is the real onclick i was passing to
angular.element(document.getElementById(data.id)).scope().doblablabla(data.id);
}
Cela signifie que lorsque j'ai cliqué sur mon bouton, on m'a ensuite invité dans la console chrome.
Uncaught TypeError: undefined is not a function
La chose importante ici était la source de ceci: VM5658:6 cliquer dessus me permettait de parcourir l'inline et de conserver le point d'arrêt pour plus tard.
Une manière extrêmement compliquée de l'atteindre .. Mais cela a fonctionné et pourrait s'avérer utile pour traiter avec des applications à une seule page qui chargent dynamiquement vos vues.
Le VM[n] n'a pas de valeur significative et le n on équivaut à l'ID de script. Cette information peut être trouvée ici: Chrome "[VM]"
Utilisation de Visual Studio (2012) J'ai eu le même problème et le passage à IIS Express a résolu le problème!
L'attribut script de la balise type n'a pas été pris en compte.
Pour une raison quelconque, le serveur de développement Visual Studio ne fournit pas tout ce dont Chrome doit activer les points d'arrêt.
Je sais que le Q ne concerne pas Firefox mais je ne voulais pas ajouter une copie de cette question pour y répondre moi-même.
Pour Firefox, vous devez ajouter debugger; pour pouvoir faire ce que @ matt-ball suggéré pour la balise script.
Ainsi, dans votre code, vous ajoutez debugger au-dessus de la ligne à déboguer, puis vous pouvez ajouter des points d'arrêt. Si vous définissez simplement les points d'arrêt dans le navigateur, cela ne s'arrêtera pas.
Si ce n'est pas le cas, ajoutez une réponse à Firefox étant donné que la question concerne Chrome. Don't :( moins la réponse, laissez-moi simplement savoir où je devrais la poster et je changerai volontiers de post. :)
Ceci est une extension de réponse de Rian Schmits ci-dessus. Dans mon cas, j'avais du code HTML incorporé dans mon code JavaScript et je ne pouvais rien voir d'autre que le code HTML. Peut-être que Chrome Le débogage a changé au fil des ans, mais un clic droit sur l'onglet Sources/Sources m'a présenté Ajouter un dossier à l'espace de travail . J'ai pu ajouter l'intégralité de mon projet, ce qui m'a permis d'accéder à tous mes scripts Java. Vous pouvez trouver plus de détails dans ce lien . J'espère que cela aide quelqu'un.