debugger

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

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

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

1. 使用 debugger

debugger; // 設(shè)置斷點(diǎn)

在需要設(shè)置斷點(diǎn)的地方寫上 debugger 即可。

console.log(1);

var str = '在這里暫停';

debugger; // 設(shè)置斷點(diǎn)

console.log(str);

console.log(1 + 1);

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

2. 其他設(shè)置斷點(diǎn)的方式

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

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

在源碼的對(duì)應(yīng)行號(hào)出點(diǎn)擊，即可設(shè)置上斷點(diǎn)，如果是已經(jīng)執(zhí)行過的代碼，則需要刷新才會(huì)在斷點(diǎn)處暫停程序。

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

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

3. 小結(jié)

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

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