chrome開發者工具使用

天殤君發表於2019-03-30

F12開啟 在network頁面使用ctrl與r抓取內容 type型別為media為音訊,png,jpeg為檔案,xhr為動態連結 點選隨意一個抓取內容,可知曉請求的各種資訊,preview可顯示請求內容(經瀏覽器處理過的)或將js檔案內容進行縮排排布,易於閱讀,respond為返回體,返回體若為空,可能為音訊檔案 post請求的data在下面的from-data 在Name右擊可複製全部/部分內容,在新一頁開啟(js檔案中若有中文則會變為亂碼,儲存則不會),在source開啟,儲存respond 下端的search可對全部內容進行搜尋,搜尋只會定位到某一行,具體在這一行的何處需要自己尋找,推薦在新一頁開啟或儲存或進行搜尋 在source中開啟,點選左下角的{}可實現與preview一樣的功能,搜尋後點選左邊的行數會跳轉到已preview的對應一行 斷點除錯(在某一行停止載入網頁): 在source中開啟js檔案,點選要除錯的那一行的行數,重新整理頁面,點選頁面上的>(不會打)可跳轉到下一步,點選>左邊的按鍵會回到點選的那一行,即停止載入的那一行 使用斷點除錯的js檔案會在頁面上顯示不同值的內容,如r=i.s{r=..},點選不同的物件會顯示其對應的內容(使用的函式之類的,不太懂,點選函式可直接跳轉到對應函式) 介面右側的breakpoints是設定的斷點,點選可取消斷點,scope中的local則是點選的物件對應的值 如function c(a,b) Local:a: b:

相關文章