Comment définir des points d'arrêt dans le Javascript en ligne dans Google Chrome?

Quand je ouvrir les Outils de développement de Google Chrome, je vois toutes sortes de fonctionnalités comme les Profils, les Échéanciers et les Vérifications, mais des fonctionnalités de base comme la possibilité de définir des points d'arrêt dans les fichiers js et dans le code html et javascript est manquant! J'ai essayé d'utiliser la console javascript, qui lui-même est buggy - par exemple, une fois qu'il rencontre une erreur JS, je ne peux pas en sortir à moins que j'actualise la page entière. Quelqu'un peut-il aider?

J'ai donné avec google Chrome. Essayé avec Firefox et a mon point d'arrêt frappé dans un délai de quelques secondes. Il peut être possible avec Chrome, mais ce n'est certainement pas évident de savoir comment!

InformationsquelleAutor ace | 2011-03-01

115

Utiliser l'onglet sources, vous pouvez définir des points d'arrêt dans le code JavaScript n'. Dans l'arborescence de répertoire en dessous (avec les flèches haut et bas en elle), vous pouvez sélectionner le fichier que vous souhaitez déboguer. Vous pouvez obtenir une erreur en appuyant sur la reprendre sur le côté droit de l'onglet.
- Pour une raison que je voir la liste des fichiers js, mais je ne peut pas choisir l'exécution de la page elle-même, il n'est pas afficher dans la liste. Des idées?
- J'ai eu le même problème. Assurez-vous que votre type="text/javascript" attribut est défini sur votre <script> élément.
- sauf qu'en HTML5 cet attribut n'est plus obligatoire. Je ne suis pas modifier le code source juste pour déboguer !
- Je ne vois pas, même après l'ajout type="text/javascript"
InformationsquelleAutor Rian Schmits
196

Tu parles de code dans <script> balises, ou dans la balise HTML attributs, comme ça?
```
<a href="#" onclick="alert('this is inline JS');return false;">Click</a>
```
De toute façon, le 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 à 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:
1. Cliquez sur le Sources onglet
2. Cliquez sur le Montrer Navigator icône et sélectionnez le fichier
3. Double-cliquez sur le numéro de ligne dans la marge de gauche. Une ligne correspondante est ajoutée à la points d'arrêt panneau (4).
- Il n'y a pas d'onglet Scripts. Je vois tous les autres onglets qui sont dans cette image, mais pas de Scripts tab !.
- Je suis en utilisant google Chrome 9 sur Linux.
- Je veux dire être en mesure de définir un point d'arrêt à l'intérieur de sac balise html. J'ai aussi essayé d'utiliser le débogueur; mot-clé, mais il ne fonctionne pas. Chrome n'a pas de point d'arrêt sur cela, mais il fonctionne dans Firefox. Je suis à la recherche d'un point d'arrêt solution ne repose sur débogueur mot-clé qui n'est pas pratique pour mettre en beaucoup d'endroits dans le code, et puis d'avoir à supprimer.
- même si vous souhaitez définir un point d'arrêt dans un <script> balise dans le code HTML, vous devez le faire par le biais de la Scripts onglet. Je n'ai aucune idée de pourquoi votre version de google Chrome ne dispose pas de cet onglet.
- J'ai juste tiré, Chrome 9 en cours d'exécution sur Ubuntu et je vois le Scripts onglet. Vous voulez vous assurer que votre version de google Chrome est à jour ou réinstaller Chrome.
- J'ai mis à jour chrome, mais il ne fait aucune différence.
- Dans la liste déroulante sous l'onglet Scripts, je ne vois JS fichiers répertoriés, mais pas en HTML des fichiers qui contiennent le <script> tag que j'ai envie de débogage. Firebug sur FF a une baisse similaire-bas, mais aussi des listes de fichiers HTML qui contiennent des <script> balises. Est-ce un bug ou est-il un autre moyen de définir un point d'arrêt dans inline code JS?
- Je pense que Chrome a ajouté le support pour le débogueur mot-clé, c'est de travailler pour moi sur Chrome 15 sur Linux (je ne sais pas sur Chrome 9). Il fait partie de l'ECMA 262, alors qu'ils avaient de mieux à faire, et c'est valable pour tous les navigateurs.
- L'onglet est appelé Sources au lieu de Scripts maintenant.
- +1 pour debugger; commande
- merci! Mise à jour de la capture d'écran pour refléter l'état actuel de l'INTERFACE utilisateur.
- Quand j'ai essayé de déboguer mon code html intégré js, j'ai eu une page blanche dans mon dev zone. J'ai dû actualiser en regardant le vide fichier de source pour obtenir de les remplir.
- Commande de débogueur est tout ce que je voulais dans la vie. J'ai été parfaitement bien à l'aide d'alertes jusqu'à ce pour quelque raison que ce cessé de travailler.
InformationsquelleAutor Matt Ball
41

Vous pouvez également donner un nom à votre script:

<script> ... (your code here) //# sourceURL=somename.js </script>

bien sûr remplacer "abc" par certains nom 😉 et puis vous le verrez dans le chrome débogueur au "Sources > en haut > (pas de domaine) > somename.js" comme un script et vous serez en mesure de le corriger comme d'autres scripts
- Super réponse, cela fonctionne parfaitement merci!
- la plus simple et la meilleure façon d'aller. mais note pour les autres, n'oubliez pas de l'enlever avant de le pousser à la production.
- Merci beaucoup! Cette astuce est vraiment utile!
- Oh mon dieu, vous n'avez aucune idée de combien cela m'a aidé. Oh mon dieu c'est génial. J'ai été la recherche de quelque chose de ce genre pour les âges.
- J'ai utilisé ce (beau) idée, mais je ne pouvais pas voir le nouveau fichier dans l'onglet sources, seul le fichier html. Puis j'ai exécuté le code et, à la fin, dans la console, à droite de ce message écrit dans le script, vous pouvez voir un lien vers le code. La meilleure partie est que le lien affiche le nom du fichier que vous avez donné pour le script (c'est à dire, //# sourceURL=somename.js).
InformationsquelleAutor buildhome.eu
39

Actualiser la page contenant le script alors que les outils de développement sont ouverts sur l'onglet scripts. Cela va ajouter une (programme) à l'entrée dans la liste des fichiers qui montre le code html de la page, y compris le script. De là, vous pouvez ajouter des points d'arrêt.
- Cela n'a pas fonctionné pour moi. Au lieu de cela, j'ai cliqué sur une erreur de script icône en bas à droite pour ouvrir le fichier de programme dans l'onglet scripts.
- Merci! À l'aide de Chrome 69, ce qui a fonctionné, même si je n'étais pas dans l'onglet sources. Avoir les outils de développement ouverte, tandis que la page est chargée semble être la clé.
- Cela aurait été la accepté de répondre si c'était ma question. Je vous remercie.
InformationsquelleAutor Gruff Bunny
16

Un autre intuitif truc simple pour déboguer surtout script à l'intérieur du html renvoyé par ajax, est temporairement mis de la console.log("test") à l'intérieur du script.

Une fois que vous avez déclenché l'événement, ouvrez l'onglet de la console à l'intérieur des outils de développement.
vous verrez le fichier source du lien indiqué en haut à droite de la "tester" debug instruction print. cliquez simplement 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 mettre "débogueur" déclaration si vous utilisez google chrome, à l'instar de ce qui est suggéré par @Matt Balle
- Une autre astuce est d'ouvrir le fichier en tapant dernier texte du lien
InformationsquelleAutor ken
10

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 j'ai pu 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.
- Good job!!! Testé dans Chrome 20.0.1132.57 sur Mac 10.7.4 Soumis un bug de Chrome de projet.
- Sachez que dans le HTML 4 et XHTML, type est un attribut nécessaire. En HTML5, il est facultatif.
- Elle n'a rien à voir avec le type. Le script est recueilli par VM, après l'exécution, à moins que l'inspecteur est déjà ouvert sur ce point. Lorsque vous rechargé la page, il n'a pas de recueillir le script.
- Je suis mon cas, manquant <div> m'a empêché de voir le code dans le débogueur
InformationsquelleAutor Aditya Singh
4

Ajoutant debugger; sur le dessus à mon script a fonctionné pour moi.

InformationsquelleAutor JEKO
3

J'ai eu le même problème, comment déboguer un script JavaScript qui est à l'intérieur de <script> balises. Mais ensuite, je l'ai trouvé sous l'onglet Sources, appelées "(index)", avec la parenthèse. Cliquez sur le numéro de ligne pour définir des points d'arrêt.

C'est Chrome 71.

InformationsquelleAutor ocarlsen
2

Si vous ne pouvez pas voir les "Scripts" de l'onglet, assurez-vous que vous êtes le lancement de google Chrome avec les bons arguments. J'ai eu ce problème lorsque j'ai lancé Chrome pour le débogage JavaScript côté serveur avec l'argument --remote-shell-port=9222. Je n'ai pas de problème si je lance google Chrome avec aucun argument.
- Pouvez-vous développer s'il vous plaît? Je vais avoir exactement ce problème - ne peut pas voir l'onglet scripts à tous. J'ai téléchargé la dernière version développeur pour construire de chrome.
InformationsquelleAutor
2

Je suis tombé sur ce problème, cependant ma fonction en ligne a été dans un angularJS vue. Par conséquent, la charge, je ne pouvais pas accéder au script en ligne pour ajouter le débogage, car seule l'index.html était disponible dans l'onglet sources de la débogueur.

Cela signifie que lorsque j'ouvrais le point de vue particulier avec mon inline (pas eu le choix sur ce point), il n'était pas accessible.

La onlly façon dont j'ai été en mesure de frapper, c'était de mettre une fausse fonction ou d'appeler à l'intérieur de la ligne de JS fonction.

Ma solution inclus :
```
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);
    }
```
Ce que cela signifie quand je clique sur mon bouton, j'ai ensuite été invité dans le chrome consolse.
```
Uncaught TypeError: undefined is not a function 
```
La chose importante ici est la source de cette : VM5658:6 cliquant sur ce m'a permis d'étape par le biais de la ligne et de tenir le point de rupture, il y en pour plus tard..

Extrêmement compliquée façon de l'atteindre.. Mais cela a fonctionné et pourrait s'avérer utile pour le moment de traiter avec des Single page apps dynamiquement la charge de votre point de vue.

La VM[n] n'a pas de valeur significative, et la n sur correspond au script ID. Cette information peut être trouvée ici : Chrome "[VM]"

InformationsquelleAutor Pogrindis
1

À l'aide de Visual Studio (2012) j'ai eu le même problème et de passer à IIS Express résolu le problème!

La script de la balise type attribut n'a pas de facteur en elle.

Pour une raison quelconque, le Serveur de Développement Visual Studio n'a pas à fournir tout le Chrome a besoin d'activer les points d'arrêt.

InformationsquelleAutor escape-llc
0

C'est une extension de Rian Schmits réponse ci-dessus. Dans mon cas, j'ai eu le code HTML incorporé dans mon code JavaScript et je ne pouvais rien voir d'autre que le code HTML. Peut-être Chrome de Débogage a changé au fil des ans, mais le droit-en cliquant sur les Sources/Sources onglet s'est présentée à moi avec Ajouter un dossier à l'espace de travail. J'ai été en mesure d'ajouter l'ensemble de mon projet, ce qui m'a donné accès à tous mes JavaScripts. Vous pouvez trouver plus de détails dans ce lien. J'espère que cela aide quelqu'un.

InformationsquelleAutor Patricia
0

Je sais que le Q n'est pas à propos de Firefox mais je n'ai pas envie d'ajouter une copie de cette question, à juste répondre moi-même.

Pour Firefox, vous devez ajouter debugger; pour être en mesure de faire ce que @matt-ball suggéré pour la script tag.

De votre code, vous pouvez ajouter debugger au-dessus de la ligne que vous souhaitez déboguer et ensuite vous pouvez ajouter des points d'arrêt. Si vous venez de définir les points d'arrêt sur le navigateur, il ne s'arrêtera pas.

Si ce n'est pas l'endroit pour ajouter un Firefox de répondre que la question est à propos de google Chrome. Ne pas 🙁 moins la réponse, laissez-moi savoir où je devrais le poster et je vais heureusement déplacer le post. 🙂

InformationsquelleAutor T04435

Vous devez vous connecter pour publier un commentaire.