debugger

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

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

如果瀏覽器支持 debugger，那碰到 debugger 就會暫停程序的執(zhí)行，提供調(diào)試功能，如單步調(diào)試、跳出當前函數(shù)、結(jié)束調(diào)試等。

1. 使用 debugger

debugger; // 設置斷點

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

console.log(1);

var str = '在這里暫停';

debugger; // 設置斷點

console.log(str);

console.log(1 + 1);

斷點設置好之后可以在開發(fā)者工具的 Sources 面板進行調(diào)試。

2. 其他設置斷點的方式

假設對其他網(wǎng)站的某個實現(xiàn)細節(jié)很感興趣，但又不能直接窺探出原理，也可以借助斷點來進行調(diào)試。

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

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

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

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

3. 小結(jié)

debugger 用于設置斷點，調(diào)試非常有用。

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