web-dev-qa-db-ja.com

Googleを使用した行ごとのJavascriptデバッグChrome

JavaScriptライブラリを使用せずに、Google Chromeの開発者ツールを使用して、JavaScriptコードを1行ずつステップ実行するにはどうすればよいですか？

たとえば、私は自分のサイトでjQueryを頻繁に使用していますが、jqueryライブラリ内のjavascript/jqueryではなく、作成したjQueryをデバッグしたいだけです。自分のjquery/javascriptをステップスルーするだけで、jqueryライブラリの数百万行をステップスルーする必要はありませんか？

だから私が次のものを持っている場合：

_function getTabFrame() {
    $.ajax({
        url: 'get_tab_frame.aspx?rand=' + Math.random(),
        type: 'GET',
        dataType: 'json',
        error: function(xhr, status, error) {
            //alert('Error: ' + status + '\nError Text: ' + error + '\nResponse Text: ' + xhr.responseText);
        },
        success: function(data) {
            $.each(data, function(index, item) {
                // do something here
            });
        }
    });
}
_

_$.ajax({_にブレークポイントを配置した場合、停止した場所でデバッグを開始し、F11を押すと、jQueryライブラリに直接移動します。私はそれを望んでいません。url: 'get_tab_frame.aspx?rand=' + Math.random(),である次の行に行きたいです。

代わりにF10を押してみましたが、関数の終了_}_に直接進みます。 F5は、各行を1つずつステップ実行せずに次のブレークポイントに移動します。

javascriptjquerydebugginggoogle-chromegoogle-chrome-devtools
43
oshirowanen

Windowsマシンで実行していると仮定します...

  1. ヒット F12キー
  2. 開発者ツールのScriptsまたはSourcesタブを選択します
  3. 最上位の小さなフォルダーアイコンをクリックします
  4. JavaScriptファイル（your）を選択します
  5. 左側の行番号をクリックしてブレークポイントを追加します（小さな青いマーカーを追加します）
  6. JavaScriptを実行する

その後、実行デバッグ中に、いくつかのステップ動作を実行できます...

  • F8続行：次のブレークポイントまで続行します
  • F10ステップオーバー：次の関数呼び出しのステップオーバー（wo n'tはライブラリに入りません）
  • F11ステップイン：次の関数呼び出しにステップイン（willライブラリに入ります）
  • Shift + F11ステップアウト：現在の関数からステップアウトする

更新

更新された投稿を読んだ後;コードをデバッグするには、一時的に jQuery Development Source Code を使用することをお勧めします。これは問題を直接解決しませんが、より簡単にデバッグできるようになります。あなたが達成しようとしていることのために、私はあなたがライブラリにステップインする必要があると信じています。

78
Richard

... javascriptライブラリに行かずに、Google Chrome開発ツールを使用してjavascriptコードを1行ずつステップスルーするにはどうすればよいですか？...

記録のために：現時点（2015年2月）では、Google ChromeとFirefoxの両方が、あなた（および私）がライブラリとスクリプトの中に入らないようにする必要があります。興味がある、それはブラックボクシングと呼ばれています：

enter image description here

ソースファイルをブラックボックス化すると、デバッガは、デバッグ中のコードをステップ実行するときにそのファイルにジャンプしません。

詳細：

25
Igor Parra