使用Chrome Web Inspector在行中間添加斷點

Question

說我有一些像這樣的JavaScript代碼：

function breakpointInside() { console.log("How do I add a breakpoint here?"); }
breakpointInside();

假設我無法編輯源文件。 我想調試breakpointInside ，但我無法弄清楚如何在行的中間添加斷點。 在這個例子中，步入函數是微不足道的，但是假設它是一個更復雜的腳本，這是不實際的。

Answer 1

這是2個相關的解決方案

1）去混淆源

你不能在一行內放一個斷點，但是你可以（在較新版本的Chrome中）右鍵單擊腳本，選擇De-obfuscate Source ，並在去混淆版本上放置一個斷點（它將有一個語句）在每一行）。

2）漂亮的打印

（根據尼古拉斯的評論）

在基於Chromium的瀏覽器的更高版本中，此功能稱為“Pretty print” ，可在源代碼面板左下方的按鈕處顯示，如{}

Answer 2

Nicolas Boisteault的評論是最新版Chrome中使用的評論。

在2015年，您可以單擊左下方名為pretty print的{}按鈕。 - Nicolas Boisteault

Answer 3

您可以使用Chrome DevTools實時編輯源代碼：只需在Scripts面板中雙擊源代碼，然后在console.log之前添加換行符。 按Ctrl + Enter或Ctrl + S將更改提交到虛擬機。 然后在包含console.log的新行上設置斷點。