Chrome Debugger 那些你應該知道的功能

作前端開發應該都瞭解瀏覽器，這裏主要介紹Chrome全文參考chrome-developer-tools javascript-debugging。若是有Eclipse Debug的經驗應該很好理解。Chrome Debugger還能夠用於調試nodejs應用這個之後寫文章介紹

---

基礎調試

• 格式化壓縮的代碼Pretty print see

• 運行到指定行Continue to Here see

• 條件斷點

  首先設置一個斷點，而後右鍵該斷點選擇Edit breakpoint在彈出的輸入框中填寫具體的條件便可

• 在異常的行觸發斷點 see

• 動態修改內容 see

  在Sources界面內選擇某個js文件直接修改，而後使用Ctrl + S或者Cmd + S。這樣便可及時生效

• 異常棧查看 see

  在右下角有一個打叉的小圖標（以js出錯爲前提）。點擊能夠查看詳細的棧信息，如需查找對於的代碼請先點擊左邊的小三角形圖標在展開的棧中點擊靠右邊的js文件名。若是在代碼中像打印棧能夠經過console.log(e.stack)，打印當前代碼調用棧能夠經過console.trace()

• 斷言console.assert(var1 !== undefined, "no var1")

• Source Maps 用於關聯源碼位置 see

HTML相關調試

• DOM變化斷點 see

  切換到Elements界面，右鍵須要監控的元素選擇Break on...(就的版本可能不須要這個) --> Break on Subtree Modifications。這樣元素的內部發生變化時會觸發斷點

• XMLHttpRequest(日常是由JavaScript發起的請求)請求中斷

  在Sources界面的右邊找到XHR Breakpoint添加URL中包含的字符，這樣在發送請求時會觸發斷點

• 事件斷點（鼠標事件、鍵盤事件等）

  在Sources界面的右邊找到Event Listener Breakpoint勾選須要的事件，這樣在發生事件時會觸發斷點