Chrome javascriptデバッガブレークポイントは何もしませんか?


82

Chromeのデバッグツールがわからないようです。

私はクロムバージョン21.0.1180.60メートルを持っています。

私が取ったステップ:

  1. ctrl-shift-iを押してコンソールを起動しました。
  2. [ソース]をクリックして、デバッグする関連するjavascriptファイルを選択します。
  3. 左側の行の横にあるガターに青いタグを付けて、コードを停止する場所にブレークポイントを設定します。
  4. javascriptコードを開始するWebページ(phpでレンダリングされたページ)のボタンをクリックしました。
  5. コードは停止せずに正常に実行されました。

また、ウォッチ式も機能しないことに気づきました。私が見たい変数が未定義であると私に言い続けます。

さらにテストを行ったところ、ブレークポイントが失敗する原因となっているのは私のコードであることがわかりました。"$("#frmVerification ")。submit(function(){"行で失敗したようです。そのfunction()内のブレークポイントにステップインしません。

以下は次のとおりです。

//function to check name and comment field 
var test = "this is a test";
var test2 = "this is another test";

function validateLogin(){
    //if(userEmail.attr("value") && userPass.attr("value"))
        return true;
    //else
        //return false;
}

//onclick on different buttons, do different things.
function ajaxRequest(){

}
$(document).ready(function(){
  //When form submitted
    $("#frmVerification").submit(function(){
        var username = $("#username");
        var token = $("#token");
        var action = $("#action");
        var requester = $("#requester");
        if(validateLogin()){
            $.ajax({
            type: "post",
            url: "verification.php",
            data: "username="+username.html()+"&token="+token.val()+"&action="+action.val()+"&requester="+requester.val(),
            success: function(data) {
                try{
                    var jsonObj = $.parseJSON(data); //convert data into json object, throws exception if data is not json compatible
                    if(jsonObj.length > 0){//if there is any error output all data
                        var htmUl = $('<ul></ul>');
                        $.each(jsonObj, function(){
                            htmUl.append('<li>' + this + '</li>');
                        });
                        $("#errOut").html(htmUl);
                    }else{
                        alert("Your account is now activated, thank you. If you have already logged in, press OK to go to the home page. If not, you must log in first.");
                        window.location.replace("home.php");
                    }
                }
                catch(e){//if error output error to errOut]
                    $("#errOut").html("PHP module returned non JSON object: <p>"+data+"</p>");
                }
            }
        });
    }
    else alert("Please fill UserName & Password!");
        return false;
    });
});

ステップ2の「ソース」は「リソース」である必要がありますか?
2012

私のChromeのパネルには、要素、リソース、ネットワーク、ソース、タイムライン、プロファイル、監査、コンソールの順に表示されます。ただし、リソースでは、ブレークポイントを追加できません。ソースのみがそうします。
チェイサー2012

単純なJavaScriptを使用した単純なページを試して、ブレークポイントが機能しているかどうかを確認できます。これにより、Chrome 21.0.1180.60の問題であるかどうかを確認できます
徳清

私も多くのオンラインの指示を見ました、そして「スクリプト」パネルがあるはずです...しかし私はそれを持っていませんか?
チェイサー2012

はい。私のchrome(20.0.1132.43)には、要素、リソース、ネットワーク、スクリプト、タイムライン、プロファイル、監査、コンソールがあります。そのため、Chrome 21では、「スクリプト」が「ソース」に変更されたようです
徳清

回答:


162

ブレークポイントがヒットしない理由はわかりませんが、コードにステップインする確実な方法の1つは、次のように入力することです。

debugger;

コードを停止し、Chrome開発者ツールウィンドウを開いた状態で再度実行する場所。


注意すべき小さな点が1つだけあります。完了したら必ずクリーンアップし、デバッガー行を削除してください。YUIコンプレッサーを介してJavaScriptファイルを実行したことがある場合、debugger;行が存在するとエラーが発生します。


1
jquery関数内にデバッガーを配置しましたが、それでもステップインしません。私がアップロードしたコードを見てください。これはJQueryのせいですか?
チェイサー2012

1
@ chrolli-デバッガーが表示されません。コード内ですが、それにもかかわらず、jQueryで確実に機能するはずです。デバッガーの代わりに、コードが呼び出されていることを確認するためだけにアラートをスローします
Adam Rackis 2012

1
@AdamRackisはそのデバッガーに感謝します。ヒント。本当に便利!:)
gsaslis 2012年

1
それは私にとってもうまくいきました、そして行を削除した後、Chromeブレークポイント機能は通常に戻りました。
Jeroen Rondeel 2014年

1
デバッガーが機能するには、「キャッシュの無効化」を「ネットワーク」タブで設定する必要があります。そうしないと、キャッシュされたコードを実行します。これを選択し、CtrlF5でリロードします。
CYoung

20

これは遅い答えですが、私は同じ問題を抱えていましたが、答えは異なっていました。

私の場合、コードにsourceURL参照がありました。

//@ sourceURL=/Scripts/test.js

このJavascriptファイルが縮小されてブラウザによって読み込まれると、通常、縮小されていないバージョンがどこにあるかがChrome DevToolsに通知されます。

ただし、縮小されていないバージョンをデバッグしていて、この行が存在する場合、Chrome DevToolsは「通常の」パスではなくそのsourceURLパスにマップされます。

たとえば、ウェブサーバーでローカルに作業している場合、Chrome Dev Toolsの[ソース]タブで、特定のJSファイルへのパスは次のようになります。 http://localhost/Scripts/test.js

test.jsの下部にこれがある場合

//@ sourceURL=/Scripts/test.js

その場合、ブレークポイントはファイルパスがの場合にのみ機能し/Scripts/test.js、の完全修飾URLではありませんhttp://localhost/Scripts/test.js

Chrome 38では、上記の例をそのままにして、[ソース]タブを見ると、すべてのファイルが実行されているhttp://localhost/ため、test.jsをクリックするとChromeが読み込まれます。http://localhost/Scripts/test.js

このファイルには必要なすべてのブレークポイントを設定でき、Chromeはそれらのいずれにもヒットしません。test.jsの関数を呼び出す前にJSにブレークポイントを設定し、その関数にステップインすると、Chromeがパスが/Scripts/test.js。の新しいタブを開くことがわかります。このファイルにブレークポイントを設定すると、プログラムフローが停止します。

私は処分したときは@ sourceURLJSファイルの行、すべてが再び正常に動作します(つまり、あなたが期待する方法)。


11

おそらくこのバグ https://code.google.com/p/chromium/issues/detail?id=278361

これは、Linux上のChrome 31.0.1650.57(公式ビルド235101)で再現されています。

修正するためにブラウザを再起動しています。


2
OSX Capitanのバージョン50.0.2661.94(64ビット)の問題
Mexx 2016

Chrome 51を搭載したWin10で私に起こったばかりです。ドッキングされていない開発ツールウィンドウを使用していて、ウィンドウを
強制

10

同様の問題が発生しました。を使用しないと機能しないブレークポイントdebugger;。「デフォルトに戻してリロードする」というブレークポイントの問題を修正しました。Chromeデベロッパーツール、設定、デフォルトに戻す、リロードにあります。


1
それは私のために働いた。追伸:「デバッガ」を使用する必要はありませんでした。バージョン58.0.3029.110程度で探している人は、3つの頂点ドット、設定(F1)をクリックすると、下部にある[デフォルトに戻して再読み込み]ボタンが表示されます。
www-0av-Com 2017

5

スクリプトに「デバッガー」が含まれていることを確認してください。その中のステートメントはChromeによってブラックボックス化されていません。[ソース]タブに移動して、ブラックボックス化をチェックしてオフにすることができます。

編集:スクリーンショットを追加しました。

ブラックボックスをオフにする方法。


その機能はどこにありますか?スクリーンショット?
oldwizard 2017年

反対票を投じたとき、「ブラックボックス化の停止」機能のスクリーンショットはありませんでした。代わりに「ブラックボックス化の停止」機能のグーグルを開始する必要があったため、答えは役に立ちませんでした。答えは改善されました。反対票を削除します。
oldwizard 2017年

これが私が探していたものです。答えてくれてありがとう。
KishanPatel19年

4

私はこれに何度か会いましたが、最初はローカルホストでうまく機能しましたが、突然、ブレークポイントが機能しなくなりました。127.0.0.1に切り替えてから、再び機能します。希望が役立ちます。


2

chromeとfirefoxの両方で同様の問題が発生しましたが、問題の解決策ではない可能性があります。それが他の人を助けるかもしれないことを願ってここで共有しています。私は以前に他の無関係なプロジェクトでこの状況に遭遇したことがありますが、今日再び発生するまでその理由を理解できませんでした。

シナリオ:

同じソースからの2つのブートストラップモーダルと1セットのjavascriptファイル(blueimpの素晴らしいjqueryファイルアップロード)を使用する1つのページがあります。

  • BS Modal 1は(php経由で)ページの読み込み時にレンダリングされ、常にページに存在します。これは、新しい関連レコードを追加するために使用されます。(CakePHP .... SalesForceyタイプのものを考えてください)

  • BS Modal 2は、既存の関連レコードの編集に使用され、そのhtmlコンテンツはajax呼び出しから取得され、jQueryを介してDOMに追加されます。

  • 標準のhtml<script>タグを介して含まれる両方のモーダルをサポートするJavascript 。

ブレークポイントはModal1でのみトリガーされることに気付きました。コードが実際に評価および実行されていることは明らかですが、動的に追加されたModal2でコードが実行されている場合は機能しません。警告ボックスがポップアップし、コードタイプのものが実行され、出力はコードで指定されたロジックに従います。

時間に追われているので、これ以上詳しく調べることはしていませんが、それを公開してコミュニティに還元したいと思っていました。

PS:私はいつもSOを使用していますが、これは私の最初の投稿なので、気楽に行ってください:-)


2

マッピングを設定したときと同じURLで同じホストを使用していることを確認してください。たとえばhttp://127.0.0.1/my-app、ワークスペースを設定してマップしたときにいた場合、を介してページを表示すると、ブレークポイントは機能しませんhttp://localhost/my-app。また、ここまで読んでくれてありがとう。ここでクロムの問題に対する私の答えを参照してください。


2

Chromeウィンドウでjavascriptコンソール(またはソース)を開いていることを確認してください。それ以外の場合は、ブレークポイントに到達しません。右上隅のオプションボタン->ツール-> javascriptコンソールでjavascriptコンソールを開くことができます。


2

Chromeのブレークポイントが何も起動しないという問題がありました。コードで「デバッガー」を使用しようとすると、VMバージョンのコードのコードをステップスルーすることしかできませんでした。私の問題は、リソースを誤ってマッピングしていたことでした。再マッピングすると問題が解決しました。


2

私の解決策は、[アプリケーション]タブから[ローカルストレージ]、[セッションストレージ]、および[Cookie]をクリアすることでした。その後、Chromeはソースで定義されたブレークポイントでスクリプトの実行を一時停止します。

  1. GoogleChromeの[アプリケーション]タブをクリックします
  2. 各フォルダの下のURLを右クリック> [クリア]

スクリーンショット:[アプリケーション]タブ


1
コンソールを上にドラッグして入力します。localStorage.clear()&Enter、次にsessionStorage.clear()&Enter。
Paddymac

2

debuggerステートメントを取り除いていたミニファイアがありました¯_(ツ)_ /¯


1

正しいソースファイルにブレークポイントを設定していることを確認してください。一部のツールはコードの複数のコピーを作成し、異なるソースファイルを試してみます。

解決策:Ctrl+Pまたはのようなショートカットを使用してファイルを開く代わりにCtrl+R、ファイルナビゲータからファイルを開きます。[ソース]タブの左上にアイコンがあります。これを使用して、正しいソースファイルを開くことができます。


0

したがって、Adam Rackisの回答に加えて、ブレークポイントより上のjavascriptファイルにエラーがある場合は、フラグを立てるか、に入れても、到達できませんdebugger;

次に例を示します。

if (nonExistentVar === "something") {
  console.log("this won't happen as the above errors out");
}
debugger;
console.log("this won't print either")

1
@dckuehnはあなたがそれを言う場合にのみ。エラー時に一時停止するのは、開発ツールのオプションです。時々、それは実用的ではありません。たとえば、サードパーティのWebサイトで実行されるライブラリコードに取り組んでいます。ライブラリで作業しているときにこれをオンにすると、ライブラリに関連しているかどうかに関係なく、サイトでエラーが発生するたびに実行が一時停止します。あなたがコントロールしていて、それがあなたのサイトであるなら、それは素晴らしいオプションです。一部のタイプの開発では、邪魔になる可能性があります。
JT。

0

Chromeで経験したように、ページの読み込み時にデバッガーを実行するには、ブラウザーコンソールを開く必要があります。

これを実行したいjavascriptファイルのどこかに置きます

debugger

ブラウザコンソールを開き、ページをリロードします。

デバッガーは以下のサンプル画像のように実行されます

ここに画像の説明を入力してください


すでに投稿されている回答の1つに含まれていない、回答に追加した新しい情報は何ですか?
Takendarkk 2017年

0

どのように機能するかはわかりませんが、F1キーを押して設定を行い、右下の[デフォルトに戻して再読み込み]を押すとうまくいきました。


0

かなり遅い答えですが、上記のどれも私のケースを助けず、何か違うものでした

javascriptファイルを参照しているときにtype = "text / javascript"が、私が作業していたレガシーアプリケーションにありませんでした

<script  src="ab.js" ></script>

1つ以下が機能し、ブレークポイントが期待どおりにヒットしていました

 <script  src="ab.js" type="text/javascript"></script>

0

いまいましいブレークポイントが必要です!非常に奇妙な動作-ソースの通常は赤いスポットが灰色になりました。これらとdebugger;ブレークポイントはまだヒットしているように見えますが、実行不可能なHTMLのどこかに表示されます。

コードをハッキングして数時間後、ブレークポイントは最終的に正しくヒットしましたが、多かれ少なかれ「HelloWorld」に相当するものが残っていました。ハハハ。

そのため、サーバー側のデータがページに出力されていました(私の場合は@razorステートメント)が、同様の場合でも同じです。

サーバー出力に誤って形成された0A / 0D文字(古いキャリッジリターン)がいくつかあり、Chromeが独自の行番号と混同していました。

サーバーをクリーンアップするとHTMLが挿入され、ブレークポイントが取得されました。

ここで、このコードのどれだけをCTRL-Zで戻すことができるかを見てみましょう...


0

この質問が私のいくつかの検索に応えて出てきたという理由だけで、さらに別のランダムな答えを追加します。publicメソッドとprivateメソッドを持つjQueryオブジェクトがあります。パターンは次のとおりです。

myObject = (function($){
  function publicFunction() {}
  function privateFunction() {}
  return {
    theOnlyMethod: publicFunction
  }
})(jQuery);

プライベート関数内の行にブレークポイントを設定すると、Chromeはそれをデバッグせず、行はreturnステートメントに移動します!したがって、デバッグするには、プライベート関数を公開する必要があります。これは今朝私にとって新しいものです(2020年8月20日、バージョン84.0.4147.125(公式ビルド)(64ビット))。3年間これに遭遇しなかったとは信じられません。


0

これはChromeのバグである可能性があります。残念ながら、Chromeは定期的にデバッグを中断します。多くの場合、何らかのメモリリークが発生し、リリース数回ごとに破損または変更されることがよくあります。

フォーマットされたソースを使用したデバッグは、現在非常に信頼性が低くなっています。

デッドコードを破ろうとしている可能性もあります。

それがブラウザではないことを確認するには、Firefoxでデバッグすることも試みるべきです。


-1

10Kラインファイルでも同じ問題が発生しました。ブレークポイントは無視され、
ハードコードされた_debuggerステートメントは機能しましたが、切り替えることができず、ループに配置すると煩わしい場合があります。私の解決策は少しハックですが、それは機能しますが、ファイルの先頭に以下を追加することです。

let myDebuggerFlag = false;
let myDebugger = function () {
    if (myDebuggerFlag) {
        debugger;
    }
}

次に、myDebugger();を追加します。通常ブレークポイントを使用するインライン。

デバッグをオンにするには、myDebuggerFlag = trueと入力するだけです。コンソールライン上。(もちろん、最初にmyDebuggerからステップアウトする必要があります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.