Chrome javascript 調試器斷點什么都不做？

Question

我似乎無法弄清楚 Chrome 調試工具。

我有 chrome 版本 21.0.1180.60 m。

我采取的步驟：

1. 我按下 ctrl-shift-i 調出控制台。
2. 單擊 Sources，然后單擊 select 我要調試的相關 javascript 文件。
3. 我通過在左側行旁邊的排水溝上放置一個藍色標記來設置我希望代碼停止的斷點。
4. 我單擊了網頁上的按鈕（這是一個 php 渲染頁面），該按鈕啟動了 javascript 代碼。
5. 代碼沒有停止就成功運行。

我還注意到 Watch Expressions 也不起作用。 它一直告訴我，我想看的變量是未定義的。

進一步測試發現是我的代碼導致斷點失敗。 似乎它在“$("#frmVerification").submit(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;
    });
});

Answer 1

我不確定為什么您的斷點沒有命中，但是進入您的代碼的一種可靠方法是鍵入

debugger;

您希望代碼停止的位置，然后在 chrome 開發人員工具窗口打開的情況下再次運行。

---

只需注意一件小事，請務必在完成后清理並刪除調試器行。 如果您曾經通過 YUI 壓縮debugger;運行 JavaScript 文件，那么debugger;的存在debugger; 行會導致它出錯。

Answer 2

這是一個遲到的答案，但我遇到了同樣的問題，但答案不同。

就我而言，我的代碼中有一個 sourceURL 引用：

//@ sourceURL=/Scripts/test.js

當這個 Javascript 文件被瀏覽器縮小並加載時，它通常會告訴 Chrome Dev Tools 未縮小版本的位置。

但是，如果您正在調試未縮小版本並且此行存在，則 Chrome Dev Tools 會映射到該 sourceURL 路徑而不是“正常”路徑。

例如，如果您在本地 Web 服務器上工作，則在 Chrome Dev Tools 的 Sources 選項卡中，給定 JS 文件的路徑將為http://localhost/Scripts/test.js

如果 test.js 在底部有這個

//@ sourceURL=/Scripts/test.js

那么斷點只有在文件路徑是/Scripts/test.js時才有效，而不是http://localhost/Scripts/test.js的完全限定 URL

在 Chrome 38 中，繼續我上面的示例，如果您查看 Sources 選項卡，每個文件都會從http://localhost/ ，因此當您單擊 test.js 時，Chrome 會加載http://localhost/Scripts/test.js

你可以把所有你想要的斷點放在這個文件中，Chrome 永遠不會命中它們中的任何一個。 如果在調用 test.js 中的任何函數之前在 JS 中放置一個斷點，然后進入該函數，您將看到 Chrome 打開一個新選項卡，其路徑為/Scripts/test.js 。 在此文件中放置斷點將停止程序流程。

當我從 JS 文件中刪除@ sourceURL行時，一切又正常工作（即您期望的方式）。

Answer 3

我遇到了類似的問題。 除非我使用debugger;否則斷點不起作用debugger; . 我用“恢復默認值並重新加載”修復了我的斷點問題。 它位於 Chrome 開發者工具、設置、恢復默認值和重新加載中。

Answer 4

可能是這個錯誤https://code.google.com/p/chromium/issues/detail?id=278361

這是在 Linux 上用我的 Chrome 31.0.1650.57（官方版本 235101）重現的。

我正在重新啟動瀏覽器以修復它。

Answer 5

確保腳本帶有“調試器”； 其中的聲明沒有被 Chrome 黑盒化。 如果是這樣，您可以轉到“源”選項卡檢查並關閉黑盒。

編輯：添加了屏幕截圖。

Answer 6

我遇到過幾次，起初它在本地主機上運行良好，突然間，斷點不起作用，我切換到 127.0.0.1，然后它再次運行。 希望有所幫助。

Answer 7

我在 chrome 和 firefox 中都遇到了類似的問題，盡管它可能不是您問題的解決方案。 我在這里分享希望它可以幫助其他人。 我之前在其他不相關的項目中遇到過這種情況，但一直不明白為什么，直到今天再次出現。

設想：

我有一個頁面使用來自同一來源的兩個引導模式和一組 javascript 文件（blueimp 的很棒的 jquery 文件上傳）。

• BS Modal 1 在頁面加載時呈現（通過 php）並且始終出現在頁面上。 它用於添加新的相關記錄。 （CakePHP ......想想 SalesForcey 類型的東西）

• BS Modal 2 用於編輯現有的相關記錄，它的 html 內容從 ajax 調用中提取並通過 jQuery 附加到 DOM。

• Javascript 支持通過標准 html <script>標簽包含的兩種模式。

我注意到斷點僅在 Modal 1 上觸發。當代碼在動態添加的 Modal 2 上執行時，它們不起作用，即使很明顯代碼確實正在評估和運行。 彈出警告框，codey 類型的東西被執行，輸出遵循代碼中規定的邏輯。

由於時間緊迫，我沒有深入研究以進一步調查，但我想將其發布並回饋社區。

PS：我一直在使用 SO，但這是我的第一篇文章，所以請放輕松 :-)

Answer 8

確保您在 URL 中使用與設置映射時相同的主機。 例如，如果您在設置和映射工作區時位於http://127.0.0.1/my-app ，那么如果您通過http://localhost/my-app查看頁面，斷點將不起作用。 另外，感謝您閱讀到這里。 在此處查看我對 Chromium 問題的回答。

Answer 9

確保您已在 chrome 窗口中打開了 javascript 控制台（或源代碼）。 否則它永遠不會到達斷點。 您可以通過右上角的選項按鈕打開javascript控制台-->工具-->javascript控制台。

Answer 10

我遇到了一個問題，Chrome 的斷點沒有觸發任何東西。 當我嘗試在我的代碼中使用“調試器”時，我只能在我的代碼的 VM 版本中單步執行代碼。 我的問題是我錯誤地映射了資源。 重新映射解決了我的問題。

Answer 11

我的解決方案是從應用程序選項卡中清除本地存儲、會話存儲和 Cookie。 之后，Chrome 會在 Sources 中定義的斷點上暫停腳本執行。

1. 點擊谷歌瀏覽器的應用程序標簽
2. 右鍵單擊每個文件夾下的 URL > 清除

屏幕截圖：應用程序選項卡

Answer 12

我有一個壓縮debugger正在剝離debugger語句¯_(ツ)_/¯

Answer 13

確保將斷點放在正確的源文件中。 一些工具會創建多個代碼副本，我們會嘗試不同的源文件。

解決方案：不要使用Ctrl+P或Ctrl+R等快捷方式打開文件，而是從文件導航器打開它。 在源選項卡中，左上角有它的圖標。 使用它我們可以打開正確的源文件。

Answer 14

這可能是 Chrome 的錯誤。 不幸的是，Chrome 經常中斷調試。 它通常有某種內存泄漏，並且每隔幾個版本就會中斷或更改。

使用格式化源進行調試目前非常不可靠。

您也有可能試圖破解死代碼。

為了確定它不是瀏覽器，您還應該嘗試在 firefox 中調試它。

Answer 15

因此，除了 Adam Rackis 的回答之外，如果您在斷點上方的 javascript 文件中有錯誤，無論您是標記它還是放入debugger; ，您都不會到達它debugger; .

下面是一個例子：

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

Answer 16

正如我在使用 chrome 時所經歷的那樣，我們需要打開瀏覽器控制台才能在加載頁面時運行調試器。

把它放在你想運行的javascript文件中的某個地方

debugger

打開瀏覽器控制台並重新加載頁面。

調試器將像下面的示例圖像一樣運行

Answer 17

我不確定它是如何工作的，但是按 F1 進行設置並在右下角按“恢復默認值並重新加載”對我有用。

Answer 18

答案很晚，但以上都沒有幫助我的情況，並且有所不同

在引用 javascript 文件類型 =“text/javascript”時，我正在工作的舊應用程序中缺少

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

低於一個工作並且斷點按預期擊中

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

Answer 19

我需要我該死的斷點！ 非常奇怪的行為 - Sources 中通常的紅點變灰了； 這些和debugger; 斷點仍然會出現，但會顯示在某些不可執行的 HTML 中。

經過幾個小時的破解代碼，斷點終於被正確命中，但或多或​​少只剩下相當於“Hello World”的東西。 哈哈哈。

所以我在頁面中輸出了一些服務器端數據（在我的例子中是@razor 語句），但在任何類似的情況下都是一樣的。

服務器輸出中有一些格式不正確的 0A/0D 字符 - 舊的回車 - 導致 Chrome 與自己​​的行號混淆。

清理服務器注入的 HTML，我得到了斷點。

現在讓我們看看我可以 CTRL-Z 返回多少這段代碼......

Answer 20

我將添加另一個隨機答案，因為這個問題是針對我的幾次搜索而提出的。 我有具有公共和私有方法的 jQuery 對象。 圖案是：

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

如果我在私有函數內的一行上放置斷點，Chrome 將不會調試它，該行會向下移動到 return 語句！ 所以為了調試，我必須公開私有函數！ 今天早上這對我來說是新的（2020 年 8 月 20 日，版本 84.0.4147.125（官方版本）（64 位）），我不敢相信我已經 3 年沒有遇到過這個了。

Answer 21

我遇到了這個問題，我意識到在我的情況下它與使用緩存版本的開發工具有關。

添加調試器語句確實會導致它中斷，但它會將 cursor 指向錯誤的行（盡管工具提示變量值實際上是正確的）。

強制刷新按鈕上的選項“空緩存和硬重新加載”（在瀏覽器的左上角，見圖）對我有用，斷點開始按預期工作。

Answer 22

我正在努力調試一個 rouge Bootstrap Modal 彈出窗口，但我找到了“調試器”標簽來幫助我啟動調試器。 在我的情況下，BS 模態是由我似乎找不到的一段代碼觸發的，所以我想看看當模態為“show.bs.modal”時堆棧是什么，這是正確觸發的事件在模態顯示之前。 我打開了 Chrome 開發者控制台，直接在控制台中輸入了這段代碼來觸發調試器在這個事件中打開：

$('#myModal').on('show.bs.modal', (e) => {
    debugger;
});

現在就像我的 BS 模態顯示一樣，調試器啟動，我可以看到堆棧。 當然，堆棧沒有向我顯示導致事件觸發的原因，所以我必須更深入地挖掘，但對於其他人來說，這是調試某些 DOM object 而不直接修改代碼的好方法。

Answer 23

我在 10K 行文件中遇到了同樣的問題。 斷點被忽略，
硬編碼的 _debugger 語句可以工作，但它們不能被切換，並且在放入循環時會很煩人。 我的解決方案有點麻煩，但它的工作原理是將以下內容添加到文件頂部：

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

然后我添加一個 myDebugger(); 內聯我通常會使用斷點的地方。

要打開調試，我只需輸入 myDebuggerFlag = true; 在控制台線上。 （當然，您必須先退出 myDebugger。

Answer 24

在我重新啟動計算機之前沒有任何效果。

當沒有任何工作時：重新啟動