Chrome調試技巧
需求：隨便一個網頁，點擊任意一處，精確找出源碼中網絡請求的代碼位置。
可能網頁在不斷地刷新數據，而且很快，還有瀏覽器插件、廣告等影響。
1. 格式化js代碼
2. 開啓BlackBoxing
原因： 屏蔽掉頁面涉及到的不關心的js文件訪問網絡，如廣告庫，第三方js庫等
做法： 需開啓BlackBoxing功能
操作： F12 => F1 => Blackboxing ，選中複選框，如下圖：
還沒完，需要添加規則。可以寫正則表達式，不過也有簡單方式，即在Sources中打開的js文件，格式化js文件，之後在行號處右鍵，選擇Stop blackboxing，如下圖：
，這時你可以看到這樣的變化
3. 強大的Source面板
DOM節點變化監聽的斷點
網絡請求數據查看、斷點添加
4. 格式化Json數據
console中，輸入 copy(要格式化的json數據)，然後按回車，此時格式化後的Json數據已經複製到了剪貼板，你粘貼下試試，還有一份打印了出來。
5. Network，找出我的點擊請求
6. 快捷鍵
Ctrl + Shift + F ： 選中Sources -> Page 中的最頂端的文件夾，按該快捷鍵，可以在源文件中搜尋指定規則的字符串所屬文件
Ctrl + Shift： 配合上一個快捷鍵，可以在指定文件中搜索用處
Ctrl + P： 快速定位文件
Ctrl + Shift + O： 快速定位函數
Ctrl + G： 快速定位到文件某行
7. Snippets （JS編輯器，Sources下）
8. debugger
源文件中加入debugger則調試時運行到此停下
9. 調試按鈕
- 到下一個斷點或停止
- 下一步（不進入函數）
- 下一步（有函數則進入）
- 跳出函數
- 一步
- 斷點開關，灰色爲斷點起作用，藍色爲斷點不可用
- 遇到異常代碼是否中斷開關