如何调试 jsfiddle 中的 js

我正在看这个 jsfiddle http://jsfiddle.net/carpasse/mcvfk/ 它工作得很好，这不是问题所在，我只是想知道如何通过 javascript 进行调试。我试图使用调试器命令，但是我不能在源代码选项卡中找到它？ 知道怎么调试吗？

来自小提琴的一些代码:

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'});
}]);
40809 次浏览
小开

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

小开

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.

小开

Here is another place :)

Under the Jsfiddle.net node.

enter image description here

小开

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.

小开

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'});
}]);
小开

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!.

小开

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. enter image description here

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

小开

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.


提交答案