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

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

在Chrome中调试JSFiddle

在这里输入图像说明

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

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

除了其他的答案。

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

 console.log("debug information here"); 

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

这是另一个地方:)

Jsfiddle.net节点下。

在这里输入图像说明