20

I created a javascript file in Plunker and I want to debug it. When I open 'Sources' panel, I don't see js file that I created. I only see plenty of Plunker js files. Please advice. Thanks

Dmitry
  • 4,143
  • 10
  • 46
  • 57

5 Answers5

38

Another way is to put this in your javascript file

debugger;

and leave the console open, which will force the debugger to not only stop there but to also open the file.

dwbartz
  • 886
  • 10
  • 13
20

You have two main options to drill down to the source file that you created.

1. Use the pop-up window mode of the preview panel

By default, the previewer runs inside an <iframe> inside the plunker webapp. You can ask plunker to show the previewer in a separate window by clicking the blue expand icon in the top right of the preview window. If you open dev tools for the pop-up window, you will only see your source files.

2. Right click the preview and hit inspect element

Doing it this way will let you use the embedded, live preview and will give you a shortcut to drill down to the DOM associated with your code.

Geoff Goodman
  • 1,224
  • 9
  • 14
5

The picture is worth thousand words... F12 and then select sources; plunkerPreviewTarget has the source code

plunker debug chrome

tomcat
  • 1,798
  • 2
  • 11
  • 14
2

A quicker way I found is to simply grab the unique id of your plnk.

In normal 'edit' mode URL will be something like

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

Simply append this id - P0fqZG6G6khKKrtfBkDP to the URL

http://run.plnkr.co/plunks/ therefore becoming

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

Important: Make double sure you add the trailing /

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

Note: You can then continue editing in plnkr, saving, and simply refreshing this URL when debugging, to maintain your active debugging session.

DanH
  • 492
  • 1
  • 7
  • 14
0

This may change, but currently on Chrome 47.0.2526.111 m on Windows 10, 64 bit, this is how you can find your plunk source files:

  • Open developer tools (F12)
  • Open sources
  • Look for run.plnkr.co
  • Expand this to show a single directory with a cryptic name

Inside, you will find your files so you can start debugging

Nate
  • 2,449
  • 3
  • 21
  • 29