web-dev-qa-db-ja.com

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

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

chromeバージョン21.0.1180.60 mがあります。

私がとったステップ：

  1. Ctrl-shift-iを押してコンソールを起動しました。
  2. [ソース]をクリックしてから、デバッグする関連するJavaScriptファイルを選択します。
  3. 左側の行の横にあるガターに青いタグを配置して、コードを停止したい場所にブレークポイントを設定します。
  4. JavaScriptコードを開始するWebページ（PHPでレンダリングされたページ）のボタンをクリックしました。
  5. コードは停止することなく正常に実行されました。

また、Watch Expressionsも機能しないことに気付きました。監視したい変数が未定義であると繰り返し表示されます。

さらなるテストの結果、ブレークポイントが失敗するのは私のコードであることがわかりました。 "$（"＃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;
    });
});
javascriptdebugginggoogle-chrome
71
chaser

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

debugger;

コードを停止する場所で、chrome開発者ツールウィンドウを開いて再度実行します。

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

137
Adam Rackis

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

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

//@ sourceURL=/Scripts/test.js

このJavascriptファイルがブラウザによって縮小およびロードされると、通常、Chrome Dev Toolsに縮小されていないバージョンの場所が通知されます。

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

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

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

//@ sourceURL=/Scripts/test.js

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

上の例にとどまるChrome 38では、[ソース]タブを見ると、すべてのファイルがhttp://localhost/から実行されるため、test.jsをクリックすると、Chrome http://localhost/Scripts/test.jsをロードします

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

JSファイルから@ sourceURL行を削除すると、すべてが正常に機能します（つまり、期待どおり）。

20
Stephen

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

これは、Linux上のChrome 31.0.1650.57（Official Build 235101）で再現されています。

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

9
gumkins

同様の問題が発生しました。 debugger;を使用しない限り機能しないブレークポイント。 「デフォルトの復元とリロード」に関するブレークポイントの問題を修正しました。 Chrome Developer Tools、Settings、Restore defaults and reloadにあります。

8
user2274860

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

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

How to turn off blackboxing.

4
John Alexander

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

3
dasons

chromeウィンドウでJavaScriptコンソール（またはソース）を開いていることを確認してください。そうしないと、ブレークポイントに到達することはありません。右上隅のオプションボタンでJavaScriptコンソールを開くことができます->ツール-> javascriptコンソール。

2
Thilak

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

シナリオ：

同じソースからの2つのbootstrapモーダルと1組のJavaScriptファイル（blueimpの素晴らしいjquery fileupload）を使用する1つのページがあります。

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

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

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

ブレークポイントはModal 1でのみトリガーされることに気付きました。動的に追加されたModal 2でコードが実行されている場合、コードが実際に評価および実行されていることは明らかですが、機能しません。警告ボックスが表示され、コードの種類が実行され、コードに記載されているロジックに従います。

私は時間に追われているので、さらに調査するために深く潜りませんでしたが、それをそこに置き、コミュニティに返したいと思いました。

PS：私は常にSOを使用しますが、これは私の最初の投稿なので、簡単にしてください:-)

2
Mikey4Dice

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

2
DaneEdw

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

2
David Gilbertson

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

  1. Google Chromeの[アプリケーション]タブをクリックします
  2. 各フォルダーの下のURLを右クリックして、「クリア」

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

1
Purple_Kitten

したがって、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")
0
JT.

どのように機能したのかはわかりませんが、設定のためにF1を押し、右下で「デフォルトの復元とリロード」を押すとうまくいきました。

0
Stubbs

10Kラインファイルでも同じ問題が発生しました。ブレークポイントは無視されていましたが、
ハードコーディングされた_debuggerステートメントは機能しましたが、切り替えられず、ループに配置されたときに迷惑になる可能性があります。私の解決策は少しハッキングですが、うまくいくのは、ファイルの先頭に次を追加することです：

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

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

デバッグをオンにするには、単にmyDebuggerFlag = trueと入力します。コンソールラインで。 （もちろん、最初にmyDebuggerから抜け出す必要があります。

0
Mark Fee

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

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

debugger

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

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

enter image description here

0
Samda

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

私が働いていたレガシーアプリケーションでjavascriptファイルtype = "text/javascript"を参照していなかった

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

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

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