如何在jsfiddle中debuggingjs

我正在看这jsfiddle： http : //jsfiddle.net/carpasse/mcVfK/它工作正常，这不是问题，我只是想知道如何通过JavaScript进行debugging。 我试图使用debugging器命令，我不能在源选项卡中find它？ 任何想法如何我可以debugging这个？

从小提琴的一些代码：

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

Answer 1

JavaScript是从Chrome的Sources选项卡的fiddle.jshell.net文件夹执行的。 您可以将断点添加到下面Chrome屏幕截图中显示的索引文件中。

Answer 2

使用debugger; 在代码中的声明。 浏览器在此语句处插入一个断点，您可以在浏览器的debugging器中继续。

这应该至less在铬和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'}); }]); 

Answer 3

值得一提的东西。 如果你曾经使用chrome开发工具。 按ctrl + shift + F ，您可以search源中的所有文件。

Answer 4

除了其他的答案。

通常将debugging信息写入控制台非常有用：

 console.log("debug information here"); 

输出在浏览器开发工具控制台中可用。 就像它是从通常的JavaScript代码logging。
这很简单有效。

Answer 5

这是另一个地方:)

在Jsfiddle.net节点下。