chrome devtools工具詳解

2022-06-09 22:54:13 字數 3465 閱讀 4680

chrome 無法抓取跳轉請求的解決辦法

昨天在抓取 post 的登入請求時發現,在發出 post 請求之後,頁面會進行跳轉,這樣就無法在 chrome 的開發人員工具中的 network 面板中檢視到請求的具體資訊。

點選登入按鈕後,直接從 登入頁面 跳轉到了 我的csdn。

解決辦法:

進行如下設定即可,這樣就可以檢視到 post 請求的資訊啦

在chrome devtools的network面板filter的取反操作

參考:簡單來說,在你輸入"-"之後對其高階用法應該已經一目了然

可以使用doname/response code/method等高階條件過濾。

除此之外 「-」還可以用來反向過濾。比如在filter裡面輸入「.html」,結果集就會使所有的html請求

此時我在filter的最前面加上"-",對的,你沒猜錯。結果和".html"的結果取反。

注:network面板可以記錄頁面上的網路請求的詳情資訊,從發起網頁頁面請求request後分析http請求後得到的各個請求資源資訊(包括狀態、資源型別、大小、所用時間、request和response等),可以根據這個進行網路效能優化。

controls控制network的外觀和功能。

filters控制requests table具體顯示哪些內容。

overview顯示獲取到資源的時間軸資訊。

requests table按資源獲取的前後順序顯示所有獲取到的資源資訊,點選資源名可以檢視該資源的詳細資訊。

summary顯示總的請求數、資料傳輸量、載入時間資訊。

其中requests table顯示如下資訊列:

timeline顯示所有網路請求的視覺化瀑布流(時間狀態軸),點選時間軸,可以檢視該請求的詳細資訊,點選列頭則可以根據指定的字段可以排序。

controls窗格包括的功能有網路日誌錄製、日誌清理、捕獲螢幕、過濾器,檢視切換、保留日誌開關、cache開關、網路連線開關、網速閥值。

單擊則可以檢視該幀**獲時的網路請求資訊,並且在overview上會有一條黃色豎線以標記該幀**獲的具體時間點。

domcontentloadedload這兩個事件會高亮顯示。

domcontentloaded事件會在頁面上dom完全載入並解析完畢之後觸發,不會等待css、、子框架載入完成。

load事件會在頁面上所有dom、css、js、完全載入完畢之後觸發。

domcontentloaded事件在overview上用一條藍色豎線標記,並且在summary藍色文字顯示確切的時間。

load事件同樣會在overviewrequests table上用一條紅色豎線標記,在summary也會以紅色文字顯示確切的時間。

通過點選某個資源的name可以檢視該資源的詳細資訊,根據選擇的資源型別顯示的資訊也不太一樣,可能包括如下tab資訊:

針對上面4個tab進行詳細講解一下各個功能:

檢視資源http頭資訊

headers標籤裡面可以看到httprequest urlhttp methodstatus coderemote address等基本資訊和詳細的response headers

request headers以及query string parameters或者form data等資訊。

檢視資源預覽資訊

preview標籤裡面可根據選擇的資源型別(json、、文字、js、css)顯示相應的預覽資訊。下圖顯示的是當選擇的資源是json格式時的預覽資訊。

檢視資源http的response資訊

response標籤裡面可根據選擇的資源型別(json、、文字、js、css)顯示相應資源的response響應內容。下圖顯示的是當選擇的資源是css格式時的響應內容。

檢視資源cookies資訊

如果選擇的資源在request和response過程中存在cookies資訊,則cookies標籤會自動顯示出來,在裡面可以檢視所有的cookies資訊。

分析資源在請求的生命週期內各部分時間花費資訊

timing標籤中可以顯示資源在整個請求生命週期過程中各部分時間花費資訊,可能會涉及到如下過程的時間花費情況:

ttfb這個部分的時間花費如果超過200ms,則應該考慮對網路進行效能優化了,可以參見網路效能優化方案及裡面的相關參考文件。

通過按住shift並且把游標移到資源名稱上,可以檢視該資源是由哪個物件或程序發起的(請求源)和對該資源的請求過程中引發了哪些資源(依賴資源)。

在該資源的上方第乙個標記為綠色的資源就是該資源的發起者(請求源),有可能會有第二個標記為綠色的資源是該資源的發起者的發起者,以此類推。

在該資源的下方標記為紅色的資源是該資源的依賴資源。

使用Chrome DevTools除錯Nodejs

node inspect index.js當然你也可以在 開始的時候斷點 node inspect debug brk index.js不過使用命令列的斷點功能還是比較艱難的,本人一般不使用。接著你就可以開啟乙個長長的以chrome devtools 開頭的url.不過你現在不需要這樣幹了,有更好的...

Chrome DevTools除錯微信X5核心頁面

準備工作 chrome瀏覽器,安卓手機,資料線,梯子 若出現無法開啟debugx5!debug5頁面僅在使用了x5核心時有效,由於當前沒有使用x5核心,無法開啟 debug5 嘗試進入 debug tbs安裝或開啟 5核心 則點選進入 debug tbs安裝或開啟 5核心 進入後出現如下介面 點選 ...

飯工和碗工

飯工和碗工 飯工和碗工 一看這兩個名詞,你一定費解。聽過鉗工電工清潔工搬運工,或是張工王工,那聽過這個稱謂呀。甭急,這是我的發明,你聽我慢慢道來。我兒子兒媳都在天津工作,住的地方到工作單位較遠。早晨六點半出發,晚上七點後回家。若遇見堵車,回到家就八點多了。他們倆既辛苦又繁忙。我和老伴住在陝西老家,身...