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

Answer 1

JavaScriptはクロームの[ソース]タブのfiddle.jshell.netフォルダから実行されます。下のChromeのスクリーンショットに示されているインデックスファイルにブレークポイントを追加することができます。他の回答に加えて

Answer 2

。

は、非常に多くの場合、それが有用であるだけでコンソールにデバッグ情報を書き込む：ブラウザはツールのコンソールをdevに

console.log("debug information here"); 

出力が可能です。それは通常のjavascriptコードから記録されたようです。
これは非常に簡単で効果的です。

Answer 3

はここJsfiddle.netノードの下に別の場所:)

です。

Answer 4

言及する価値が何か。 Chrome開発ツールを使用している場合。 ctrl + シフト + Fを入力して、ソース内のすべてのファイルを検索することができます。

Answer 5

コード内に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'}); 
}]);