Inspecting javascript on jsfiddle.net in Google Chrome

Question

Is it possible to set breakpoints using the google chrome inspector on javascript code entered into jsfiddle.net?

When I go to the script tab of the developer tools I see lots of scripts but I don't know where my script would be found or if it can be found in there at all. In the past I have just settled for some console.log action but I would love to set some breakpoints.

(If not possible I am interested in other ways of inspecting javascript in this scenario.)

score 127 · Answer 1 · answered Apr 13 '11 at 20:26

Debugger calls work fine on jsfiddle. Just enter this line where you want to start debugging:

debugger;

Debugger is great for starting debug mode in chrome, firebug and even IE dev tools, but you usually need to have the debugger started (ie "start debugging" in IE, open firebug/developer tools).

score 84 · Accepted Answer · edited Feb 08 '17 at 14:31

84

In the Developer Tools, under the Script tab if you select fiddle.jshell.net from the dropdown, around line 20-30 (depending on how much CSS you have) you will see a <script> tag that contains the code from the Javascript fiddle window. You can set your breakpoints here.

You can also evaluate code in the Console against this frame by changing the console context:

edited Feb 08 '17 at 14:31

Community

1
1

answered Apr 13 '11 at 20:25

mVChr

49,587
11
107
104

I have tried this, but the breakpoints aren't being run into whatever I do – Damon Aug 18 '11 at 17:47
9

There is a folder under fiddle.jsshellnet/_display/(program) from this file you should see your code starting line 20. http://screencast.com/t/IVbxUnrCr7LW – gmetzker May 23 '13 at 15:51

score 10 · Answer 3 · edited Feb 23 '17 at 13:37

10

Another trick is to show your fiddle without the editor using the following syntax:

<normal path to your fiddle>/show/light/

as an example: jsfiddle-link

edited Feb 23 '17 at 13:37

Ankit Badiya

451
1
4
17

answered Aug 28 '12 at 22:33

dbrin

15,525
4
56
83

score 7 · Answer 4 · answered Feb 12 '14 at 12:31

From the developer console go to tab sources, open the sources tree representation (on the left), open the fiddle.jsshell.net node, next click _display, next (index) and you should see your code.

Note that if you save your code this _display reference will be replaced by fiddle-reference/version/show. For example JsQfE/2/show (which doesn't exist as far as I know but does the job as an example).

enter image description here

Inspecting javascript on jsfiddle.net in Google Chrome

4 Answers4

Linked