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

211

Lorsque j'ouvre les outils de développement dans Google Chrome, je vois toutes sortes de fonctionnalités comme les profils, les chronologies et les audits, mais les fonctionnalités de base comme 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 est elle-même boguée - par exemple, une fois qu'elle rencontre une erreur JS, je ne peux pas m'en sortir à moins de rafraîchir toute la page. Quelqu'un peut-il aider?

javascript debugging google-chrome as
la source
J'ai abandonné Chrome. J'ai essayé avec Firefox et j'ai atteint mon point d'arrêt en quelques secondes. Cela peut être possible avec Chrome, mais ce n'est certainement pas évident comment!
Oliver P

Réponses:

127

Utilisez l'onglet sources, vous pouvez y définir des points d'arrêt en JavaScript. Dans l'arborescence des répertoires 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.

Rian Schmits
la source
31
Pour une raison quelconque, je vois la liste des fichiers js inclus, mais je ne peux pas choisir la page d'exécution elle-même, elle ne s'affiche pas dans la liste. Des idées?
ulu
67
@ulu, j'ai eu le même problème. Assurez-vous que votre attribut type = "text / javascript" est défini sur votre élément <script>.
contactmatt
9
sauf qu'en HTML5 cet attribut n'est plus obligatoire. Je ne change pas le code source juste pour déboguer!
sashok_bg
10
Je ne vois même pas après avoir ajouté type = "text / javascript"
Nitin Kumar Mishra
3
si cela ne fonctionne pas, et que vous avez du code javascript en ligne comme: <script> your code </script>ajoutez un nom comme: <script> your code //# sourceURL=somename.js </script> Ceci est mieux expliqué dans une réponse ci
KM.
209

Parlez-vous de code dans les <script>balises ou dans les attributs des balises HTML, comme ceci?

<a href="#" onclick="alert('this is inline JS');return false;">Click</a>

Quoi qu'il en soit, le debuggermot clé comme celui-ci fonctionnera:

<a href="#" onclick="debugger; alert('this is inline JS');return false;">Click</a>

NB Chrome ne s'arrêtera pas à 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 et <script>balises JS :

  1. Cliquez sur les sources onglet
  2. Cliquez sur Afficher le navigateur icône et sélectionnez le fichier
  3. Double-cliquez sur le numéro d'une ligne dans la marge de gauche. Une ligne correspondante est ajoutée au panneau Points d'arrêt (4).

entrez la description de l'image ici

Matt Ball
la source
4
Il n'y a pas d'onglet Scripts. Je vois tous les autres onglets qui se trouvent sur cette image mais aucun onglet Scripts!.
as
5
Je veux dire pouvoir définir un point d'arrêt dans la balise script en html. J'ai également essayé d'utiliser le débogueur; mot-clé mais cela ne fonctionne pas. Chrome ne s'arrête pas là-dessus, mais il fonctionne dans Firefox. Je recherche une solution de point d'arrêt non basée sur le mot-clé du débogueur, ce qui n'est pas pratique de mettre beaucoup de place dans le code et de le supprimer.
as
2
Dans la liste déroulante sous l'onglet Scripts, je ne vois que les fichiers JS répertoriés, mais pas les fichiers HTML contenant la balise <script> que je veux déboguer. Firebug sur FF a une liste déroulante similaire, mais répertorie également les fichiers HTML qui contiennent des balises <script>. Est-ce un bug ou existe-t-il un autre moyen de définir un point d'arrêt dans le code JS en ligne?
Wolfram Arnold
8
L'onglet est appelé Sourcesau lieu de Scriptsmaintenant.
CoderDennis
1
Lorsque j'ai essayé de déboguer mon js html intégré, j'ai eu une page vierge dans ma zone de développement. J'ai dû rafraîchir tout en regardant le fichier source vierge pour le remplir.
HappyCoder86
73

Vous pouvez également donner un nom à votre script:

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

bien sûr, remplacez "somename" par un nom;) puis vous le verrez dans le débogueur chrome à "Sources> top> (pas de domaine)> somename.js" comme un script normal et vous pourrez le déboguer comme les autres scripts

buildhome.eu
la source
3
le moyen le plus simple et parfait pour y aller. mais notez pour les autres, n'oubliez pas de le retirer avant de le pousser en production.
Zameer Fouzan
2
Oh mon dieu, tu n'as aucune idée de combien cela m'a aidé. Oh mon dieu c'est génial. Je cherche quelque chose comme ça depuis des lustres.
GregRos
J'ai utilisé cette (fine) idée, mais je ne pouvais pas voir le nouveau fichier dans l'onglet sources, seulement le fichier html. Ensuite, j'ai exécuté le code et, à la fin, dans la console, à droite de tout message écrit à partir du script, vous pouvez voir un lien vers le code. La meilleure partie est que le lien affiche le nom de fichier que vous avez donné au script (par exemple, // # sourceURL = somename.js).
Manuel Rivera,
1
Je vous donnerais 1000 votes positifs si je pouvais;) Truc très utile
Giulio Quaresima
43

Actualisez la page contenant le script pendant que les outils de développement sont ouverts sur l'onglet scripts. Cela ajoutera une entrée (programme) dans la liste des fichiers qui montre le html de la page, y compris le script. De là, vous pouvez ajouter des points d'arrêt.

Gruff Bunny
la source
Ça n'a pas marché pour moi. Au lieu de cela, j'ai cliqué sur une icône d'erreur de script en bas à droite pour ouvrir le fichier programme dans l'onglet scripts.
sanbikinoraion
1
Merci! En utilisant Chrome 69, cela a fonctionné même si je n'étais pas dans l'onglet sources. L'ouverture des outils de développement pendant le chargement de la page semble être la clé.
Sam
Cela aurait été la réponse acceptée si telle était ma question. Je vous remercie.
plumpNation
Fonctionné dans Chrome 83. Dans mon env, le nom de fichier est basé sur l'URL de votre application. Par exemple, si l'URL est example.com/xxx/yyy, le nom de fichier sera "yyy".
Helix Quar
18

Une autre astuce simple et intuitive pour déboguer, en particulier le script à l'intérieur du code HTML renvoyé par ajax, consiste à placer temporairement console.log ("test") à l'intérieur du 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 de débogage "test". cliquez simplement sur la source (quelque chose comme VM4xxx) et vous pouvez maintenant définir le point d'arrêt.

PS: en plus, vous pouvez envisager de mettre une instruction "debugger" si vous utilisez du chrome, comme ce qui est suggéré par @Matt Ball

ken
la source
10

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 le débogueur Javascript dans Chrome, je clique sur l'onglet Scripts et je déroule la liste comme indiqué ci-dessus. Je peux clairement voir scripts / common.js mais je ne pouvais PAS voir la page html actuelle test.html dans la liste déroulante, donc je ne pouvais pas déboguer le javascript intégré:

<script type="text/javascript">
  document.write("something");
</script>

C'était déroutant. Cependant, lorsque j'ai supprimé le type = "text / javascript" obsolète du script intégré:

<script>
  document.write("something");
</script>

..et actualisé / rechargé la page, le tour est joué, elle est apparue dans la liste déroulante, et tout allait bien à nouveau.
J'espère que cela sera utile à tous ceux qui ont des problèmes de débogage du javascript intégré sur une page html.

Aditya Singh
la source
Bon travail! Testé dans Chrome 20.0.1132.57 sur Mac 10.7.4 Bogue soumis au projet Chromium.
Mars Robertson
Sachez que dans HTML 4 et XHTML, typeest un attribut obligatoire. En HTML5, c'est facultatif.
hotshot309
2
Cela n'a rien à voir avec le type. Le script est collecté par VM après exécution, sauf si l'inspecteur est déjà ouvert à ce stade. Lorsque vous avez rechargé la page, elle n'a pas collecté le script.
vsevik
Je suis mon cas, la disparition <div>m'a empêché de voir le code dans le débogueur
ceztko
5

Ajouter debugger;en plus à mon script a fonctionné pour moi.

JEKO
la source
4

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

entrez la description de l'image ici

Voici Chrome 71.

ocarlsen
la source
2

Si vous ne voyez pas l'onglet "Scripts", assurez-vous que vous lancez Chrome avec les bons arguments. J'ai rencontré ce problème lorsque j'ai lancé Chrome pour déboguer JavaScript côté serveur avec l'argument --remote-shell-port=9222. Je n'ai aucun problème si je lance Chrome sans argument.

Ange déchu
la source
Pourriez-vous élaborer, s'il vous plaît? J'ai ce problème exact - je ne vois pas du tout l'onglet des scripts. J'ai téléchargé la dernière version développeur de Chrome.
tom redfern
2

Je suis tombé sur ce problème, mais ma fonction en ligne était avec une vue angularJS. Par conséquent, sur la charge, je n'ai pas pu accéder au script en ligne pour ajouter le débogage, car seul le fichier index.html était disponible dans l'onglet sources du débogueur.

Cela signifiait que lorsque j'ouvrais la vue particulière avec ma ligne (je n'avais pas le choix), elle n'était pas accessible.

La seule façon dont j'ai pu l'atteindre é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

L'important ici en était la source: VM5658:6 cliquer dessus m'a permis de traverser l'inline et de maintenir le point d'arrêt là pour plus tard.

Moyen extrêmement compliqué de l'atteindre. Mais cela a fonctionné et pourrait s'avérer utile lorsque vous traitez avec des applications d'une seule page qui chargent dynamiquement vos vues.

Le VM[n]n'a pas de valeur significative et le non équivaut à l'ID de script. Ces informations peuvent être trouvées ici: Chrome "[VM]"

Pogrindis
la source
1

En utilisant Visual Studio (2012), j'ai eu le même problème et le passage à IIS Express a résolu le problème!

L' attribut de scriptla balise typen'en a pas tenu compte.

Pour une raison quelconque, Visual Studio Development Server ne fournit pas tout ce dont Chrome a besoin pour activer les points d'arrêt.

escape-llc
la source
1

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 a suggéré pour lescript balise.

Donc, sur votre code, vous ajoutez debuggerau-dessus de la ligne que vous souhaitez déboguer, puis vous pouvez ajouter des points d'arrêt. Si vous venez de définir les points d'arrêt sur le navigateur, cela ne s'arrêtera pas.

Si ce n'est pas le lieu d'ajouter une réponse Firefox étant donné que la question concerne Chrome. Ne pas :( moins la réponse, faites-moi juste savoir où je dois le publier et je déplacerai le message avec plaisir. :)

T04435
la source
0

Il s'agit d'une extension de la réponse de Rian Schmits ci-dessus. Dans mon cas, j'avais du code HTML intégré dans mon code JavaScript et je ne pouvais rien voir d'autre que le code HTML. Peut-être que le débogage de Chrome 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 tout 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.

Patricia
la source