hoe de js in jsfiddle te debuggen

Ik kijk naar deze jsfiddle: http://jsfiddle.net/carpasse/mcVfK/
Het werkt prima, dat is niet het probleem, ik wil gewoon weten hoe ik via javascript kan debuggen. Ik heb geprobeerd het debugger-commando te gebruiken en ik kan het niet vinden op het tabblad bronnen?
enig idee hoe ik dit kan debuggen?

een stukje code van de viool:

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

Antwoord 1, autoriteit 100%

Het JavaScript wordt uitgevoerd vanuit de map fiddle.jshell.net van het tabblad Bronnen van Chrome. U kunt onderbrekingspunten toevoegen aan het indexbestand dat wordt weergegeven in de onderstaande Chrome-screenshot.

Debuggen van JSFiddle in Chrome

voer hier de afbeeldingsbeschrijving in


Antwoord 2, autoriteit 78%

Gebruik de debugger;-instructie in de code. De browser voegt een breekpunt in bij deze instructie en u kunt doorgaan in de debugger van de browser.

Dit zou in ieder geval in Chrome en Firefox moeten werken.
https://developer.mozilla.org/en/docs/Web /JavaScript/Referentie/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'});
}]);

Antwoord 3, autoriteit 11%

Iets dat het vermelden waard is. Als u ooit chrome dev-tools gebruikt. Druk op ctrl+shift+Fen je kunt door alle bestanden in de bron zoeken.


Antwoord 4, autoriteit 6%

In aanvulling op de andere antwoorden.

Heel vaak is het handig om debug-informatie in de console te schrijven:

console.log("debug information here");

De uitvoer is beschikbaar in de console voor ontwikkelaarstools van browsers. Alsof het is gelogd met de gebruikelijke javascript-code.
Dit is vrij eenvoudig en effectief.


Antwoord 5, autoriteit 6%

Een debugger-instructie toevoegen aan de code en de “Developer Tools” inschakelen in de bowser.
Wanneer u de code vervolgens in JSFiddle uitvoert, wordt de debugger geraakt!.


Antwoord 6

Hier is nog een plaats 🙂

Onder het knooppunt Jsfiddle.net.

voer hier de afbeeldingsbeschrijving in


Antwoord 7

Het JavaScript wordt uitgevoerd vanuit het bestand ?editor_console=truein de map result (fiddle.jshell.net)/fiddle.jshell.net/_displaymap van de Tabblad Bronnen van Chrome bij gebruik van de ontwikkelaarstool. U kunt vervolgens onderbrekingspunten aan uw code toevoegen en de pagina vernieuwen.
voer hier de afbeeldingsbeschrijving in

Meer informatie over het gebruik van Chrome Debugger is te vinden op Proberen te debuggen in Javascript in Chroom


Antwoord 8

Een van de bovenstaande antwoorden werkt, maar u hoeft alleen het trefwoord debugger toe te voegen op de regel waar u de breekpunten wilt hebben en de code uit te voeren die ze vervolgens op de dev-tool zal activeren. De code wordt dan zichtbaar op het brontabblad onder editor_console=true.

Other episodes