Chrome 與 Firefox-Dev 的 DevTools

時間 2019-11-13

標籤 chrome firefox dev devtools 欄目 Chrome 简体版

原文原文鏈接

無論是作爬蟲仍是寫 Web App，Chrome 和 Firefox 的 DevTools 都是超經常使用的，可是常常發現別人的截圖有什麼字段我找不到，別人的什麼功能個人 Chrome 沒有，仔細一搜索才知道，原來是我不會用。。javascript

Ctrl + Shift + I：打開 DevTools
Ctrl + Shift + J：打開控制檯css

搜索

Ctrl + F：在當前位置搜索關鍵字
- 在網頁界面用這個快捷鍵，就是頁內搜索
- 在 Network 的 Response 頁面，就是在 Response 中搜索
Ctrl + Shift + F：全文搜索，在當前 Web App 的全部文件中搜索。
- 爬蟲必備！！！要尋找一些特殊字符串的來源，用它搜索屢試不爽。

Command

在 DevTools 裏按快捷鍵 Ctrl + Shift + P 就能打開 Command 輸入框，它和 vscode/sublime 的 Command 同樣，用好了特別方便。java

Network

1. 屬性列

Chrome 能夠右鍵屬性列名來增減屬性列，Firefox-Dev 也是同樣：

node

2. copy

在 Chrome 中右鍵某個請求，選中 copy，會給出幾個 options：
python

而 Firefox-Dev 的更強一點，能夠複製消息頭（請求頭和響應頭）：
git

3. response 的 pretty print

Chrome 的 Response 頁面左下角，有{}按鈕，能夠 beautify 響應。
web

而 Firefox-Dev 只在 Debugger 頁面提供該按鈕，Response 中不支持。chrome

Firefox 響應的 preview 和 payload 是放在 Response 頁面下。而 Chrome 是分紅了兩個標籤頁

segmentfault

4. 導出 HAR

右鍵任意一個請求，選擇 save all as HAR，就能夠導出 HAR 文件。（Chrome 有 with content，導出的 HAR 文件會含有全部請求與響應的 body）瀏覽器

該文件可用於存儲當前監聽到的全部瀏覽器請求信息。在之後須要分析這些請求時，將 HAR 文件拖到 Network 頁面便可恢復全部請求。

5. Raw Headers（原始消息頭）

Chrome 只支持查看 HTTP/1.x 的 Raw Headers，對這種請求，會給出 view source 選項。

Chrome 不能查看 HTTP/2 的 Raw Headers。

而 Firefox 則支持查看 HTTP/2 的 Raw Headers。（是恢復後的，HTTP/2 的原始消息頭是二進制壓縮形式）

它還提供 Edit and Resend 請求的功能，這點要給個贊～

6. 審查 WebSocket（Chrome only）

在 NetWork 中點擊對應的 WebScoket 請求，在右側選擇 Frames 標籤，就能夠看到全部的消息了

7. 跨頁面加載時，保留網絡請求記錄

當頁面重載或者頁面跳轉時，默認狀況下，Network面板下的網絡請求記錄表也是刷新的。若是想保留以前頁面的網絡請求數據，能夠勾選Preserve log。

經常使用的一個應用場景：登陸/註冊時會調用登陸/註冊API，開發者想查看這個接口返回的狀況，可是登陸/註冊成功後通常會跳轉到新的頁面，致使了Network面板的請求記錄被刷新從而看不到登陸/註冊接口返回的狀況。此時勾選上Preserve log，不管跳轉到那個頁面，都能在Network網絡請求記錄表中查看到以前接口返回的狀況。

JavaScript 控制檯

能夠經過 $x(<xpath>, <DOM-element>)，用 xpath 查詢 DOM 元素。
經過控制檯左上方的選單，能夠切換 JS 的環境，它默認是當前頁面（top）。

Elements 頁面（Firefox-Dev 是 Inspector 頁面）

1. DOM 元素斷點（Chrome only）

在 Elements 頁面，右鍵一個元素，有一個 Break on 選項，能夠控制在特定事件發生時 Break.
- subtree modification: 子節點被修改
- attribute modification：當前節點的屬性被修改。（inline style 被修改也會觸發此事件）
- node removal：節點被移除

2. 檢索元素上註冊的事件（Chrome only）

在 Elements 頁面選中一個元素（或者直接右鍵檢查該元素），而後在右側窗口，選擇 Event Listeners 標籤，就能夠看到該元素上註冊的全部事件。

3. 顏色選擇器

選中任一元素，在右側選擇 Styles 選單，會顯示當前元素的 css 屬性。

其中全部的顏色小方塊都是能夠點擊的，點擊顏色方塊後

能夠將顏色屬性轉換成多個格式（Chrome only）
- 默認格式：#207981
- RGB格式：rgb(32, 121, 129)
- HSL格式：hsl(185, 60%, 32%)
提供 color picker，可用於在網頁任意位置取色。（Firefox-Dev 也有）
提供複製按鍵，直接將該顏色當前格式的表達複製到剪切板

元素審查

Ctrl + Shift + C 或者點擊 DevTools 最左上角的小箭頭按鈕，就能進入元素審查模式。

該模式下會自動審查鼠標所指的元素，Elements 頁面也會自動定位到該元素。

Sources 頁面（Firefox-Dev 是 Debuuger 頁面）

Sources 右側的 Debugger 支持各類斷點調試。

條件斷點
Sources 中，在任意 JS 代碼的行號上單擊鼠標左鍵，就能在該行設置一個普通斷點（在 Response 中可不行）。在行號上右鍵，能直接設置條件斷點。
XHR 斷點：在右側 Debugger 中，能夠添加 XHR 斷點。
- 若是條件留空，一旦有 XHR 發起，就會無條件進入調試。
- 條件是「Break When URL Contaions 」
Watch Expressions：表達式審查
- 雙擊選中 JS 代碼中的任意變量，而後右鍵它，能夠將該變量添加到 Watch 中，這樣就能夠隨時觀察它的值。
- 也能夠在右側 Watch 中手動輸入 JS 表達式。
DOM 元素斷點（Chrome only）：在 Elements 部分講過了。

Chrome 的斷點功能比 Firefox-Dev 的更豐富。

Screenshot

1. For Chrome

方法一：在 DevTools 界面，按快捷鍵 Ctrl + Shift + P 打開 Command 窗口，而後輸入 screenshot，在下拉欄裏選擇你須要的截圖命令就行。

方法二：
先進 dev tools，點擊左上角的設備圖標（toggle device toolbar），而後頁面頂部就會出現一個導航欄，在這裏好選擇設備或者自定義圖像尺寸，而後點擊該導航欄右側（不是 dev tools 右側）的 options 圖標，會有兩個選項：「截圖（capture screenshot）」和「截網頁全圖（capture full size screenshot）」，以下：

2. For Firefox

只截顯示出來的部分：和 Chrome 同樣點擊設備圖標，而後在頁面上面的 toolbar 就有截圖按鈕
截網頁全圖：在 DevTools 右邊的 options 中進入 Settings，勾選 take a screenshot of the entire page，DevTools 右上角就會出現截圖按鈕了。