爬蟲 -- JS調試

開發者工具(F12)

其中經常使用的有Elements(元素面板)、Console(控制檯面板)、Sources(源代碼面板)、Network(網絡面板)

找 JS 文件的幾種方法

一、找發起地址

二、設置事件觸發斷點 Event Listener Breakpoint

• 使用Sources面板上的Event Listener Breakpoints(事件偵聽器斷點)
• 當某事件（例如，click(單擊)）或事件類別（例如，任何mouse(鼠標)事件）被觸發時
• 會自動打開觸發對應事件的JS文件

三、監測DOM樹變化的斷點

• 在HTML元素上右鍵單擊，而後選擇Break on，節點左側的藍色圓點，表示在該節點上設置了DOM斷點
• 當設置的斷點被觸發時，自動打開對應的 JS 文件
• subtree modifications(子樹修改)
  • 噹噹前選定節點的子節點被刪除、添加或子節點的內容發生更改時觸發
  • 當子節點屬性改變時，或當前選擇的節點發生任何改變，都不會觸發該類型的斷點
• attributes modifications(屬性修改)
  • 當在當前選定的節點上添加或刪除屬性時,或當屬性值改變時觸發
• node removal(節點刪除)
  • 噹噹前選定的節點被刪除時觸發

四、抓包

• 在抓包工具裏分析爲出須要的值在哪一個具體的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(調用堆棧)窗格顯示執行路徑，按時間逆序，將代碼帶到該斷點

這有助於理解如今執行到哪裏，它是如何到達這裏的，是調試的一個重要因素