開發者工具(F12)
其中常用的有Elements(元素面板)、Console(控制台面板)、Sources(源代碼面板)、Network(網絡面板)
找 JS 文件的幾種方法
1、找發起地址
2、設置事件觸發斷點 Event Listener Breakpoint
- 使用Sources面板上的Event Listener Breakpoints(事件偵聽器斷點)
- 當某事件（例如，click(單擊)）或事件類別（例如，任何mouse(鼠標)事件）被觸發時
- 會自動打開觸發對應事件的JS文件
3、監測DOM樹變化的斷點
- 在HTML元素上右鍵單擊，然后選擇Break on，節點左側的藍色圓點，表示在該節點上設置了DOM斷點
- 當設置的斷點被觸發時，自動打開對應的 JS 文件
- subtree modifications(子樹修改)
- 當當前選定節點的子節點被刪除、添加或子節點的內容發生更改時觸發
- 當子節點屬性改變時，或當前選擇的節點發生任何改變，都不會觸發該類型的斷點
- attributes modifications(屬性修改)
- 當在當前選定的節點上添加或刪除屬性時,或當屬性值改變時觸發
- node removal(節點刪除)
- 當當前選定的節點被刪除時觸發
4、抓包
- 在抓包工具里分析為出需要的值在哪個具體的JS文件
- 然后直接到Sources打開對應的JS文件，搜索到對應的值進行斷點
設置斷點
- 在特定的代碼行上手動添加一個斷點
- 使用斷點來暫停JS代碼，審查變量的值和在特定時刻所調用的堆棧
常用調試按鈕
- 1（Resume）：恢復執行，直到下一個斷點。如果沒有遇到斷點,則恢復正常執行
- 2（Step Over）：執行下一行中發生的任何操作,並跳轉到下一行
- 3（Step Into）：如果下一行包含一個函數調用，Step Into將跳轉到該函數並在該函數的第一行暫停
- 4（Step Out）：執行當前函數的剩余部分,然后在函數調用后的下一個語句處暫停
- 5（Deactivate Breakpoints）：暫時禁用所有斷點。用於恢復完整的執行，而不實際刪除已有的斷點。再次單擊可以重新激活斷點
作用域
當腳本中斷的時候，Scope(作用域)窗格將顯示當前時刻所有當前定義的屬性
調用堆棧
靠近邊欄頂部的是Call Stack(調用堆棧)窗格
當代碼在斷點處暫停時，Call Stack(調用堆棧)窗格顯示執行路徑，按時間逆序，將代碼帶到該斷點
這有助於理解現在執行到哪里，它是如何到達這里的，是調試的一個重要因素
