debugger

debugger 語句調用任何可用的調試功能，例如設置斷點。 如果沒有調試功能可用，則此語句不起作用。(MDN)

debugger 通常用于調試，主要是為了設置一個斷點。

如果瀏覽器支持 debugger，那碰到 debugger 就會暫停程序的執行，提供調試功能，如單步調試、跳出當前函數、結束調試等。

1. 使用 debugger

debugger; // 設置斷點

在需要設置斷點的地方寫上 debugger 即可。

console.log(1);

var str = '在這里暫停';

debugger; // 設置斷點

console.log(str);

console.log(1 + 1);

斷點設置好之后可以在開發者工具的 Sources 面板進行調試。

2. 其他設置斷點的方式

假設對其他網站的某個實現細節很感興趣，但又不能直接窺探出原理，也可以借助斷點來進行調試。

這種情況下需要在 開發者工具 的 Sources 面板找到對應的源碼，打上斷點。

在源碼的對應行號出點擊，即可設置上斷點，如果是已經執行過的代碼，則需要刷新才會在斷點處暫停程序。

很多情況下，都會利用事件來定位源碼位置。

一個節點上的事件，可以通過 Elements 面板的 Event Listeners 來查看定位。

3. 小結

debugger 用于設置斷點，調試非常有用。

如果沒有特殊需求，一定要確保線上 debugger 不會被執行！一定要確保線上 debugger 不會被執行！一定要確保線上 debugger 不會被執行！
這一點非常關鍵，帶上線了直接影響用戶體驗，可能公司第二天就倒了。