js調(diào)試技巧

• 代碼格式化
  可以將被壓縮的代碼自動(dòng)展開(kāi)
• 實(shí)時(shí)代碼編輯
  可以在運(yùn)行時(shí)動(dòng)態(tài)改變 JS 代碼，并且不需要刷新頁(yè)面就可以看到效果，一般用這個(gè)實(shí)時(shí)的在代碼里插 console.log
• DOM 事件/XHR 斷點(diǎn)
  可以針對(duì) DOM 結(jié)構(gòu)改變/屬性改變/鍵盤鼠標(biāo)事件 等下斷點(diǎn)，直接斷到事件的第一個(gè) listener 函數(shù)上。還可以對(duì) XHR 請(qǐng)求下斷點(diǎn)，斷到發(fā)起請(qǐng)求的那一行代碼上
• 調(diào)用棧分析
  這個(gè)非常常用，Scripts 面板下右上角的那一部分
• 自動(dòng)異常斷點(diǎn)
  當(dāng)代碼執(zhí)行出錯(cuò)時(shí)，可以自動(dòng)斷到出錯(cuò)的代碼行上，直接分析出錯(cuò)時(shí)的運(yùn)行時(shí)環(huán)境
• 分析 HTTP 請(qǐng)求
  Network 面板下列出了所有的 HTTP 請(qǐng)求，可以很方便的查看請(qǐng)求內(nèi)容、HTTP 頭、請(qǐng)求時(shí)間等信息

• console.group/console.groupEnd 可以將 log 信息分組展示，看起來(lái)更舒服
• console.warn/console.error 可以輸出 warning 和 error log
• element 面板右側(cè)實(shí)時(shí)編輯的 css 樣式，可以在 resource 面板里保存起來(lái)
• 關(guān)于樣式還有個(gè)技巧，Elements 面板右上角的 styles 欄，右側(cè)有三個(gè)圖標(biāo)，功能依次是：根據(jù)當(dāng)前元素創(chuàng)建一個(gè) css 樣式、模擬 :hover/:active 等偽類、顏色值類型選擇。實(shí)用
• resource 面板可以刪除和修改 cookie/localstorage
• scripts 面板下的 ctrl+o 可以快速跳轉(zhuǎn)腳本文件，ctrl+shift+o 快速跳轉(zhuǎn)函數(shù)
• 右下角的齒輪圖標(biāo)里有個(gè)選項(xiàng)是開(kāi)發(fā)者工具和網(wǎng)頁(yè)左右分屏（Dock to the right，默認(rèn)是上下分屏），寬屏必備
• 接上，還有個(gè)選項(xiàng)是禁用 Cookit，必點(diǎn)
• 接上，在選項(xiàng)面板里還可以手工編輯 user agent 和模擬觸摸事件

1. debugger;

我以前也說(shuō)過(guò)，你可以在JavaScript代碼中加入一句debugger;來(lái)手工造成一個(gè)斷點(diǎn)效果。

需要帶有條件的斷點(diǎn)嗎？你只需要用if語(yǔ)句包圍它：
代碼如下:
if (somethingHappens) {

  debugger;

}

YSlow是一個(gè)非常棒的工具。谷歌瀏覽器的開(kāi)發(fā)者工具里也有一個(gè)非常類似的工具，叫Audits。

它可快速的審計(jì)你的網(wǎng)站，給你提出非常實(shí)際有效的優(yōu)化你的網(wǎng)站的建議和方法。