how to debug the js in jsfiddle

Question

I am looking at this jsfiddle: http://jsfiddle.net/carpasse/mcVfK/ It works fine that is not the problem , I just want to know how to debug through the javascript. I tried to use the debugger command and I cant find it in the sources tab? any idea how I can debug this?

some code from the fiddle:

angular.module('app', ['appServices'])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
                when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
                when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
                when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
                otherwise({redirectTo: '/home'});
}]);

Insert the word `debugger;` into the code. Chrome and Firefox will automatically open a step-through debugger! (I've copied this tip from @user3335908's answer to make it more prominent) — Will Sheppard, Nov 29 '17 at 09:46

apandit · Answer 1 · 2015-04-07T12:32:20.850

54

The JavaScript is executed from the fiddle.jshell.net folder of the Sources tab of Chrome. You can add breakpoints to the index file shown in the Chrome screenshot below.

Debugging JSFiddle in Chrome

enter image description here

edited Apr 07 '15 at 12:32

answered Apr 07 '15 at 12:25

apandit

808
1
7
16

10

this shows nothing for me. I get an empty index file – Oliver Watkins Dec 09 '15 at 14:41
1

@OliverWatkins it was empty for me too, I fixed this by clicking "Update" on the top, then I noticed after I ran again, in Sources tab in the developers tool panel, under "jsfiddle.net", then under my named folder, there was an extra directory with another index file that showed the code. Hope this helps! – Angel Cloudwalker Mar 07 '16 at 19:09
I have a 3rd folder under fiddle.jshell.net which has (index) as well. If I open that, there's an html file with the js embedded in it. (on line 48 when I wrote this) – John MacIntyre Mar 11 '16 at 11:01
`fiddle.jshell.net` contains only `_display` with `(index)` inside, which is a nearly empty HTML page with `
That page doesn't exist.
`. My js code is not there – CygnusX1 Jun 27 '18 at 22:16
not working anymore it seems. The current structur looks different. the js files in fiddle.jshell.net does not contain the actual js – dermoritz May 07 '21 at 09:34

score 48 · Answer 2 · answered May 18 '17 at 08:56

Use the debugger; statement in the code. The browser inserts a breakpoint at this statement, and you can continue in browser's debugger.

This should work atleast in chrome and firefox. https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/debugger

angular.module('app', ['appServices'])
.config(['$routeProvider', function($routeProvider) {
    // *** Debugger invoked here
    debugger;
    $routeProvider.
            when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
            when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
            when('/detail/:itemId', {templateUrl: 'detail.html',   controller: DetailCtrl}).
            when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
            otherwise({redirectTo: '/home'});
}]);

This is the simplest and fastest solution to this. Simply the best answer! — John, Nov 12 '20 at 01:18

score 6 · Answer 3 · edited Nov 26 '16 at 23:54

6

Something worth mentioning. If you are ever using chrome dev tools. Press ctrl+shift+F and you can search through all the files in the source.

edited Nov 26 '16 at 23:54

Nissa

4,636
8
29
37

answered Nov 26 '16 at 23:47

Oliver Orchard

562
1
4
15

3

That is very handy, on Mac it is Cmd + Alt + F – John W. Clark Jan 27 '17 at 16:58
This would be a far better answer, but breakpoints set on the code you find this way will not be honored. – Slbox Mar 15 '18 at 16:59
Thx to this hint I could find the code in a file that is not appearing in the source tree... – GarfieldKlon Feb 08 '19 at 08:26

score 3 · Answer 4 · answered Jan 13 '16 at 16:11

In addition to the other answers.

Very often it is useful just write debug information into the console:

console.log("debug information here");

The output is available in browsers dev tools console. Like it was logged from the usual javascript code.
This is quite simple and effective.

score 3 · Answer 5 · answered Feb 18 '19 at 14:15

3

Adding a debugger statement in the code and enable the "Developer Tools" in the bowser. Then when you are running the code in JSFiddle, the debugger will be hit!.

answered Feb 18 '19 at 14:15

P.Muralikrishna

1,279
9
30

score 1 · Answer 6 · answered Jan 27 '22 at 14:25

One of the answers above works but just that you need to add the keyword debugger at the line you want the break points and run the code which will then fire them on the dev tool. The code then gets visible at the source tab under editor_console=true.

score 0 · Answer 7 · answered Apr 17 '16 at 13:15

0

Here is another place :)

Under the Jsfiddle.net node.

answered Apr 17 '16 at 13:15

Sampath

63,341
64
307
441

This seems to cointain the source code that is shown on the page, surrounded with `
```
` ... `
```
`. It is not an actual runnable code.
– CygnusX1 Jun 27 '18 at 22:19
You can't debug this code. One hint that you can't is the missing highlighting... – GarfieldKlon Feb 08 '19 at 08:28

score 0 · Answer 8 · answered Jul 22 '20 at 13:39

The JavaScript is executed from the file ?editor_console=true in the folder result (fiddle.jshell.net)/fiddle.jshell.net/_display folder of the Sources tab of Chrome when using the developper tool. You can add breakpoints to your code then and refresh the page.

More information on using chrome debugger can be found at Trying to debug Javascript in Chrome

how to debug the js in jsfiddle

8 Answers8

Linked