debugging - 如何在 jsfiddle 中调试 js

Question

我正在查看这个 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'});
}]);

score 54 · Accepted Answer

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

在 Chrome 中调试 JSFiddle

在此处输入图像描述

score 42 · Accepted Answer

使用debugger;代码中的语句。浏览器在此语句处插入断点，您可以在浏览器的调试器中继续。

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

score 6 · Accepted Answer

值得一提的事情。如果您曾经使用过 chrome 开发工具。按ctrl+ shift+ F，您可以搜索源中的所有文件。

score 3 · Accepted Answer

在代码中添加调试器语句并在 bowser 中启用“开发人员工具”。然后当你在 JSFiddle 中运行代码时，调试器就会被命中！

score 3 · Accepted Answer

除了其他答案。

通常只需将调试信息写入控制台就很有用：

console.log("debug information here");

输出在浏览器开发工具控制台中可用。就像它是从通常的 javascript 代码中记录的一样。
这是非常简单和有效的。

score 1 · Accepted Answer

上面的答案之一有效，但您需要在您想要断点的行添加关键字调试器并运行代码，然后在开发工具上触发它们。然后代码在 editor_console=true 下的源选项卡中可见。

score 0 · Accepted Answer

使用开发工具时，将从 Chrome 的 Sources 选项卡的文件夹文件夹中?editor_console=true的文件执行 JavaScript 。result (fiddle.jshell.net)/fiddle.jshell.net/_display然后，您可以在代码中添加断点并刷新页面。

有关使用 chrome 调试器的更多信息，请参阅Trying to debug Javascript in Chrome

score 0 · Accepted Answer

0

这是另一个地方:)

Jsfiddle.net节点下。

于 2016-04-17T13:15:52.970 回答

debugging - 如何在 jsfiddle 中调试 js

8 回答 8

Related

Reference