chrome-調試技巧個人總結
https://blog.csdn.net/badbaby52906/article/details/128973527
1、調試hover樣式
1、第一種方法就是利用debugger（推薦）
在控制檯輸入下面一段代碼（時間自己決定）並執行，返回頁面，鼠標放在需要調試的dom上，把hover樣式顯示出來，等待 debugger，然後就能安心調試hover樣式了。
setTimeout(()=>{
debugger
},1800)
改進版本：
1）先在控制檯輸入以下代碼。注意不要回車，控制檯的光標會一直在。
debugger
2）然後將鼠標放在需要hover的dom上，使其出現hover樣式，這個時候回車，就能調試了。
2、利用控制檯“元素”選項調試
先定位到要調試的元素，然後咔咔一頓操作，見下圖。不推薦。
2、控制檯的$操作符
$0【獲取調試選中dom】
先在元素面板中選中dom，右邊就會顯示$0。然後在控制檯執行$0，結果就是剛纔選中的dom。
操作 一 ：
操作 二:
$1【返回上一次$0的執行結果】
執行兩次$0選中不同元素，再打印$1，結果是第一次的$0的結果。
$_ 【返回上一次控制檯執行的結果】
先執行2+3返回5，然後執行$_ 結果是5（也就是上一次執行的結果）
$i 【爲控制檯下載包】
完整的使用$i操作需要先在 chrome 安裝 Console Importer插件。
以常用的lodash爲例：
$i是使用cdn，不用擔心內存。。。
更多的$操作符
更多的操作符可以看一下別人的文章：
【譯】你不知道的Chrome調試工具技巧 第一天：console中的 '$' - 掘金
3、斷點（包含條件斷點）調試以及相應面板介紹
先準備兩個函數，在bar函數中使用debugger，代碼如下。
function foo() {
let result = 0
for (let i = 0; i < 10; i++) {
result += i
}
result = bar(result)
return result
}
function bar(result) {
debugger
result += '%%'
return result
}
foo()
執行後，來到源代碼面板，在合適的位置，比如下面的12行，點擊鼠標右鍵，有個“添加條件斷點”，點擊這個選項，輸入條件，比如“i==4”。CTRL+R重新執行，會發現斷點在設置的條件斷點出停下，並且此時的 i 等於4，這個時候想做什麼就能做什麼了。
最後再介紹下右邊的操作區域。
第一部分是調試操作鍵，具體說明如下：
| 序號 | 按鈕名 | 說明 | 作用 |
|---|---|---|---|
| 1 | 繼續執行腳本 | 遇到斷點或錯誤會停下來 | 常用於跳到下一個斷點 |
| 2 | 跳到下一個函數調用 | 連續兩個函數調用，正常情況下不會進入函數體，直接拿結果。（但是函數體中有斷點或錯誤進入函數體並跳到對應位置） | 廣義的下一步，請無腦用。（多數情況下用這個就行，不用單步調試） |
| 3 | 進入下一個函數調用 | 顧名思義 | 進入函數體，想幹嘛就幹嘛 |
| 4 | 跳出當前函數 | 顧名思義 | 跳出函數體後，想幹嘛就幹嘛 |
| 5 | 單步調試 | 不管什麼情況，遇到函數調用就會進入函數體 | 狹義的下一步，很少用 |
| 6 | 停用斷點 | 顧名思義 | 停用斷點，可以用 |
| 7 | 在遇到異常時停止 | 開啓後，有異常就會在異常處停下。 | 很好用，建議開啓 |
第二部分是監視區域，可以監視dom的一些屬性和一些表達式的值，（很好用）。
第三部分是斷點操作區域，可以關閉和打開斷點。
第四部分是作用域。顯示當前塊級作用域的變量、函數作用域的變量、全局作用域的變量（很好用）
第五部分是函數調用堆棧。注意選中函數後右鍵會有個“重啓幀”，點擊重啓幀後能重新執行該函數。
操作如下：
4、查找頁面中所有監聽的事件回調
選中dom後，元素面板的事件監聽器會把該dom的事件顯示出來，點開後能定位到代碼位置。
只想顯示當前dom的事件，可以把“祖先”選框取消勾選。
5、查找網絡請求的代碼位置
網絡面板的“啓動器”能找到網絡請求的位置，能方便的定位到代碼。
網絡面板的信息很有用。
6、給dom打上斷點
當一個dom發生變化（樣式、子節點），我們又不知道是那一段代碼引起的變化時，我們就可以在dom上打斷點，定位到引起變化的代碼。
選中dom，然後點擊鼠標右鍵，選中“發生中斷條件”，的“屬性修改”（根據情況選擇什麼情況打上斷點），然後執行引起變化的操作，最後就會定位到引起變化的代碼了。
