如何在 Chrome 或 Safari 中的縮小的 JS 函數上設置斷點？

Question

我想在 Chrome 或 Safari JavaScript 調試器的“Cart.add”函數中設置斷點。 問題是，這個函數是在一個大的縮小的 JS 文件中定義的，它本身並不存在於一行中。

一些文檔說基於 WebKit 的調試器支持調試控制台中的“break”或“debug”命令，但這些在較新版本的調試器中似乎不起作用。

在 JS 文件的那一行設置斷點也不起作用，因為該行有很多函數。

有什么建議么？

Answer 1

在 Chrome 中，當您打開“ Scripts選項卡時，您可以通過單擊底部的{ }按鈕（“漂亮打印”）來美化所選文件。 之后，您可以找到您的行並設置斷點。 頁面刷新后，代碼將保持美化，並帶有斷點。

Answer 2

debugger語句可能就是您要查找的內容。

評估DebuggerStatement產生式可能允許實現在調試器下運行時導致斷點。 如果調試器不存在或不活動，則此語句沒有可觀察到的效果。

生產DebuggerStatement : debugger ; 評估如下：

1. 如果實現定義的調試工具可用並啟用，則

   一種。 執行實現定義的調試操作。

   灣讓 result 是一個實現定義的 Completion 值。

2. 別的

   一種。 令結果為（正常，空，空）。

3. 返回結果。

break語句用於退出循環和switch語句，與調試無關。

真正的解決方案是首先不要打擾您的代碼:)

Answer 3

1) 錯誤消息應為您提供指向 Sources 選項卡中源代碼的鏈接。 單擊該鏈接以獲取轉譯后的代碼。

2) 單擊 Sources 選項卡中源代碼底部的“{ }”圖標，對轉譯后的代碼進行格式化以便於調試。

3）在失敗的行上貼一個斷點。

4) 再次重現問題。 這一次，它應該在錯誤發生之前的斷點處中斷。

5) 檢查局部變量和調用堆棧以確定究竟出了什么問題。

Answer 4

對於 chrome 用戶，您需要在實驗功能中啟用自動漂亮打印。

設置斷點現在應該可以工作了。

Answer 5

如果你已經保存了網頁，那么使用 jsbeautifier.org 來美化你的 js 文件，它會格式化你的整個腳本。 然后用美化后的版本替換你的js內容。 從這里您可以輕松調試您的 JS