web-dev-qa-db-fra.com

outil de débogage dans les outils de développement chromés

J'ai créé un fichier javascript dans Plunker et je souhaite le déboguer. Lorsque j'ouvre le panneau "Sources", je ne vois pas le fichier js que j'ai créé. Je ne vois que beaucoup de fichiers js Plunker. S'il vous plaît des conseils. Merci 

google-chrome-devtoolsplunker
20
Dmitry

Vous disposez de deux options principales pour explorer le fichier source que vous avez créé.

1. Utilisez le mode fenêtre contextuelle du panneau d'aperçu

Par défaut, l'aperçu est exécuté dans un <iframe> dans l'application Web plunker. Vous pouvez demander à plunker d'afficher l'aperçu dans une fenêtre séparée en cliquant sur l'icône d'agrandissement bleue en haut à droite de la fenêtre d'aperçu. Si vous ouvrez des outils de développement pour la fenêtre contextuelle, vous ne verrez que les fichiers vos fichiers source .

2. Faites un clic droit sur l'aperçu et appuyez sur inspect element

Cette procédure vous permettra d'utiliser l'aperçu en direct intégré et vous donnera un raccourci pour accéder au DOM associé à votre code.

20
filearts

Une autre façon est de mettre cela dans votre fichier javascript

débogueur;

et laissez la console ouverte, ce qui forcera le débogueur à s’arrêter là, mais également à ouvrir le fichier. 

36
dwbartz

La photo vaut mille mots ... F12 puis sélectionnez les sources; plunkerPreviewTarget a le code source

 plunker debug chrome

5
tomcat

Un moyen plus rapide que j'ai trouvé est simplement de saisir l'uniqueidde votre code.

En mode normal'edit'mode l'URL ressemblera à quelque chose comme 

http://plnkr.co/edit/P0fqZG6G6khKKrtfBkDP?p=preview

Ajoutez simplement ceciid _ - P0fqZG6G6khKKrtfBkDP à l'URL 

http://run.plnkr.co/plunks/ devenant ainsi

http://run.plnkr.co/plunks/P0fqZG6G6khKKrtfBkDP/

Important: Assurez-vous d’ajouter le caractère de fin/

  • Open new URL in a new chrome window
  • Hit F12 in chrome, voila native angular JS debugging for your plnk

Remarque: Vous pouvez ensuite continuer à éditer dans plnkr, en enregistrant et en actualisant simplement cette URL lors du débogage, afin de maintenir votre session de débogage active. 

2
DanH

Cela peut changer, mais actuellement sur Chrome 47.0.2526.111 m sur Windows 10, 64 bits, voici comment trouver vos fichiers source Plunk:

  • Outils de développement ouverts (F12)
  • Sources ouvertes
  • Recherchez run.plnkr.co
  • Développez-le pour afficher un seul répertoire avec un nom crypté

À l'intérieur, vous trouverez vos fichiers afin que vous puissiez commencer le débogage

0
Nate