jak debugować js w jsfiddle

95

Patrzę na to jsfiddle: http://jsfiddle.net/carpasse/mcVfK/ Działa dobrze, to nie jest problem, po prostu chcę wiedzieć, jak debugować za pomocą javascript. Próbowałem użyć polecenia debuggera i nie mogę go znaleźć na karcie źródeł? masz pomysł, jak mogę to debugować?

jakiś kod ze skrzypiec:

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'});
}]);
Pindakaas
źródło
1
Wstaw słowo debugger;do kodu. Chrome i Firefox automatycznie otworzą debuger krok po kroku! (Skopiowałem tę wskazówkę z odpowiedzi @ user3335908, aby uczynić ją bardziej widoczną)
Will Sheppard

Odpowiedzi:

53

JavaScript jest wykonywany z folderu fiddle.jshell.net na karcie Źródła przeglądarki Chrome. Możesz dodać punkty przerwania do pliku indeksu pokazanego na poniższym zrzucie ekranu Chrome.

Debugowanie JSFiddle w Chrome

wprowadź opis obrazu tutaj

apandit
źródło
9
to nic dla mnie nie pokazuje. Otrzymuję pusty plik indeksu
Oliver Watkins
1
@OliverWatkins był również dla mnie pusty, naprawiłem to, klikając „Aktualizuj” na górze, a potem zauważyłem, że po ponownym uruchomieniu, na karcie Źródła w panelu narzędzi dla programistów, pod „jsfiddle.net”, a następnie pod moim nazwanym folderem istniał dodatkowy katalog z innym plikiem indeksu, który pokazywał kod. Mam nadzieję że to pomoże!
MilesMorales
Mam trzeci folder pod fiddle.jshell.net, który również ma (indeks). Jeśli to otworzę, pojawi się plik html z osadzonym w nim js. (w linii 48, kiedy to pisałem)
John MacIntyre
fiddle.jshell.netzawiera tylko _displayz (index)wewnątrz, czyli prawie pustą stroną HTML z rozszerzeniem <p>That page doesn't exist.</p>. Nie ma mojego kodu js
CygnusX1
35

Użyj debugger;instrukcji w kodzie. Przeglądarka wstawia punkt przerwania w tej instrukcji i możesz kontynuować w debugerze przeglądarki.

Powinno to działać przynajmniej w Chrome i 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'});
}]);
user3335908
źródło
To najlepsza odpowiedź!
vibs2006
6

Coś, o czym warto wspomnieć. Jeśli kiedykolwiek korzystasz z narzędzi programistycznych Chrome. Naciśnij ctrl+ shift+ F, aby przeszukać wszystkie pliki w źródle.

Oliver Orchard
źródło
2
To bardzo przydatne, na Macu jest to Cmd + Alt + F
John W. Clark
To byłaby znacznie lepsza odpowiedź, ale punkty przerwania ustawione w kodzie, który znajdziesz w ten sposób, nie będą honorowane.
Slbox
Dzięki tej wskazówce udało mi się znaleźć kod w pliku, który nie pojawia się w drzewie źródłowym ...
GarfieldKlon,
3

Oprócz innych odpowiedzi.

Bardzo często przydatne jest po prostu wpisanie informacji debugowania do konsoli:

console.log("debug information here");

Wynik jest dostępny w konsoli narzędzi deweloperskich przeglądarek. Jakby był zalogowany ze zwykłego kodu javascript.
Jest to dość proste i skuteczne.

Aleksandra Stepaniuka
źródło
3

Dodanie instrukcji debuggera w kodzie i włączenie „Narzędzi programistycznych” w bowser. Następnie, gdy uruchamiasz kod w JSFiddle, debugger zostanie trafiony !.

P.Muralikrishna
źródło
0

Oto inne miejsce :)

Pod Jsfiddle.netwęzłem.

wprowadź opis obrazu tutaj

Sampath
źródło
To wydaje się cointain kodu źródłowego, który jest wyświetlany na stronie, otoczony <pre>... </pre>. Nie jest to rzeczywisty kod do uruchomienia.
CygnusX1
Nie możesz debugować tego kodu. Jedną wskazówką, że nie możesz, jest brakujące wyróżnienie ...
GarfieldKlon,
0

JavaScript jest wykonywany z pliku ?editor_console=truew folderze result (fiddle.jshell.net)/fiddle.jshell.net/_displayfolderu na karcie Źródła przeglądarki Chrome podczas korzystania z narzędzia programistycznego. Następnie możesz dodać punkty przerwania do kodu i odświeżyć stronę. wprowadź opis obrazu tutaj

Więcej informacji na temat używania debugera Chrome można znaleźć w artykule Próba debugowania JavaScript w przeglądarce Chrome

user2010781
źródło