jsfiddle'da js'de nasıl hata ayıklanır

Şu jsfiddle'a bakıyorum: http://jsfiddle.net/carpasse/mcVfK/ İyi çalışıyor, sorun bu değil, sadece javascript ile nasıl hata ayıklayacağımı bilmek istiyorum. Hata ayıklayıcı komutunu kullanmayı denedim ve bunu kaynaklar sekmesinde bulamıyorum? bunu nasıl hata ayıklayabileceğime dair bir fikrin var mı?

kemantan bazı kodlar:

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'un Kaynaklar sekmesinin fiddle.jshell.net klasöründen yürütülür. Aşağıdaki Chrome ekran görüntüsünde gösterilen dizin dosyasına kesme noktaları ekleyebilirsiniz.

Koddaki debugger;ifadeyi kullanın . Tarayıcı bu ifadeye bir kesme noktası ekler ve tarayıcının hata ayıklayıcısına devam edebilirsiniz.

Bu en az chrome ve firefox'ta çalışmalıdır. 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'});
}]);

Söylemeye değer bir şey. Hiç chrome geliştirme araçları kullanıyorsanız. ctrl+ shift+ ' FYa basın ve kaynaktaki tüm dosyalar arasında arama yapabilirsiniz.

Diğer cevaplara ek olarak.

Çoğu zaman, hata ayıklama bilgilerini konsola yazmak yararlıdır:

console.log("debug information here");

Çıktı, tarayıcıların geliştirici araçları konsolunda mevcuttur. Her zamanki javascript kodundan kaydedildiği gibi.
Bu oldukça basit ve etkilidir.

Koda bir hata ayıklayıcı ifadesi eklemek ve tarayıcıda "Geliştirici Araçları" nı etkinleştirmek. Daha sonra kodu JSFiddle'da çalıştırdığınızda, hata ayıklayıcıya vurulacak !.

İşte başka bir yer :)

Jsfiddle.netDüğümün altında .

JavaScript, geliştirici aracı kullanılırken Chrome'un Kaynaklar sekmesinin ?editor_console=trueklasör result (fiddle.jshell.net)/fiddle.jshell.net/_displayklasöründeki dosyadan yürütülür . Kodunuza kesme noktaları ekleyebilir ve ardından sayfayı yenileyebilirsiniz.

Chrome hata ayıklayıcısını kullanma hakkında daha fazla bilgiyi Chrome'da Javascript'te hata ayıklamaya çalışma sayfasında bulabilirsiniz