不管是做爬蟲還是寫 Web App，Chrome 和 Firefox 的 DevTools 都是超常用的，但是經常發現別人的截圖有什么字段我找不到，別人的什么功能我的 Chrome 沒有，仔細一搜索才知道，原來是我不會用。。
Ctrl + Shift + I：打開 DevTools
Ctrl + Shift + J：打開控制台
搜索
-
Ctrl + F：在當前位置搜索關鍵字- 在網頁界面用這個快捷鍵，就是頁內搜索
- 在 Network 的 Response 頁面，就是在 Response 中搜索
-
Ctrl + Shift + F：全文搜索，在當前 Web App 的所有文件中搜索。- 爬蟲必備！！！要尋找一些特殊字符串的來源，用它搜索屢試不爽。
Command
在 DevTools 里按快捷鍵 Ctrl + Shift + P 就能打開 Command 輸入框，它和 vscode/sublime 的 Command 一樣，用好了特別方便。
Network
1. 屬性列
Chrome 可以右鍵屬性列名來增減屬性列，Firefox-Dev 也是一樣：
2. copy
在 Chrome 中右鍵某個請求，選中 copy，會給出幾個 options：
而 Firefox-Dev 的更強一點，可以復制消息頭（請求頭和響應頭）：
3. response 的 pretty print
Chrome 的 Response 頁面左下角，有{}按鈕，可以 beautify 響應。
而 Firefox-Dev 只在 Debugger 頁面提供該按鈕，Response 中不支持。
Firefox 響應的 preview 和 payload 是放在 Response 頁面下。而 Chrome 是分成了兩個標簽頁
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 右上角就會出現截圖按鈕了。
其他
1. Fake Geolocation（Chrome only）
在 Chrome 中進入 DevTools，點擊右上角的 options 按鈕，選擇 More tools -> Sensors，在 Geolocation 處選擇 Custom location，就可以修改地理位置了。
2. 自定義請求頭
For Chrome
和 上一小節一樣，先進 More tools，選擇 Network conditions，取消勾選 Select atuomatically，就可以修改請求頭了。
上面的演示中，使用 python-requests/2.21.0 做 user agent，知乎返回 404.
For Firefox
打開設備模擬，在 toolbar 的右上角勾選 show user agent，然后就可以在 toolbar 修改 user agent 了：
3. Request Blocking（Chrome only）
在 Network 的任意請求上右鍵，菜單中就有 Block request URL（阻塞該 URL）和 Block request domain（阻塞請求所在的整個域）
然后就可以在 More tools -> Request blocking 中看到你設置的阻塞條件。
