как отлаживать js в jsfiddle

95

Я смотрю на этот 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'});
}]);
Пиндакаас
источник
2
Вставьте слово debugger;в код. Chrome и Firefox автоматически откроют пошаговый отладчик! (Я скопировал этот совет из ответа @ user3335908, чтобы сделать его более заметным)
Уилл Шеппард,

Ответы:

54

JavaScript выполняется из папки fiddle.jshell.net на вкладке «Источники» Chrome. Вы можете добавить точки останова в индексный файл, показанный на скриншоте Chrome ниже.

Отладка JSFiddle в Chrome

введите описание изображения здесь

апандит
источник
9
для меня это ничего не показывает. Я получаю пустой индексный файл
Оливер Уоткинс,
1
@OliverWatkins для меня тоже было пусто, я исправил это, щелкнув «Обновить» вверху, затем заметил, когда снова запустил, на вкладке «Источники» на панели инструментов разработчика, в разделе «jsfiddle.net», затем в моей названной папке , был дополнительный каталог с другим индексным файлом, в котором был показан код. Надеюсь это поможет!
MilesMorales,
У меня есть третья папка в fiddle.jshell.net, в которой также есть (index). Если я его открою, там будет html-файл со встроенными js. (в строке 48, когда я писал это)
Джон Макинтайр,
fiddle.jshell.netсодержит только _displaywith (index)inside, то есть почти пустую HTML-страницу с <p>That page doesn't exist.</p>. Моего js-кода там нет
CygnusX1
36

Используйте 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'});
}]);
пользователь3335908
источник
Это лучший ответ!
vibs2006
6

Стоит упомянуть. Если вы когда-нибудь использовали chrome dev tools. Нажмите ctrl+ shift+, Fи вы можете искать по всем файлам в источнике.

Оливер Орчард
источник
2
Это очень удобно, на Mac это Cmd + Alt + F
John W. Clark
Это был бы гораздо лучший ответ, но точки останова, установленные в коде, который вы найдете таким образом, не будут соблюдаться.
Slbox
Thx для этой подсказки я мог бы найти код в файле , который не отображается в исходном дереве ...
GarfieldKlon
3

В дополнение к другим ответам.

Очень часто бывает полезно просто записать отладочную информацию в консоль:

console.log("debug information here");

Вывод доступен в консоли инструментов разработчика браузеров. Как будто это было зарегистрировано с помощью обычного кода javascript.
Это довольно просто и эффективно.

Александр Степанюк
источник
3

Добавление оператора отладчика в код и включение «Инструменты разработчика» в баузере. Затем, когда вы запускаете код в JSFiddle, отладчик будет поражен !.

П. Мураликришна
источник
0

Вот еще одно место :)

Под Jsfiddle.netузлом.

введите описание изображения здесь

Сампатх
источник
Это , кажется, cointain исходного кода , который отображается на странице, окруженный <pre>... </pre>. Это не настоящий исполняемый код.
CygnusX1
Вы не можете отладить этот код. Один намек, на который вы не можете, - это отсутствие выделения ...
Гарфилд
0

JavaScript выполняется из файла ?editor_console=trueв папке result (fiddle.jshell.net)/fiddle.jshell.net/_displayпапки на вкладке «Источники» Chrome при использовании инструмента разработчика. Затем вы можете добавить точки останова в свой код и обновить страницу. введите описание изображения здесь

Дополнительную информацию об использовании отладчика Chrome можно найти в разделе Попытка отладки Javascript в Chrome.

user2010781
источник