我們是袋鼠云數堆疊 UED 團隊，致力于打造優秀的一站式資料中臺產品，我們始終保持工匠精神，探索前端道路，為社區積累并傳播經驗價值，
本文作者：正則
作為一名前端開發人員，平時開發中使用最多的就是 Chrome devtools，但可能很多同學像我一樣平時用的最多也就 Console、Elements 和 Network 面板了，除了我們常用的一些功能，它還提供了很多強大但我們不太常見的功能，這些功能可以大大提高我們的開發效率，下面我們就來了解一下，
使用Chrome的截圖工具
進行網頁截圖，一般情況我們都使用的是第三方工具，但其實 Chrome 已經為我們提供了截圖功能，使用Command+SHIFT+P（MAC）/CTRL+SHIFT+P（Window）打開命令選單，輸入框中輸入“capture”會自動聯想到截圖命令，
-
Capture area screenshot
自定義截圖區域，與常用的截圖工具類似
-
Capture full size screenshot
截取html完整渲染圖
-
Capture node screenshot
截取某個 DOM 節點的渲染圖，使用前需要先在 Elements 下選中節點，也可以選中節點后，點擊右鍵選中選單中的 Capture node screenshot
-
Capture screenshot
截取瀏覽器視窗內的區域
flex 除錯面板
對使用了 flex 布局的元素，點擊 display: flex 右側的按鈕，就會出現 flex 除錯面板，可以直觀的修改 flex 相關樣式，便于進行樣式除錯，
Console面板相關
$0、$1、$2、$3、$4
$0 是對當前在 Element 面板中選中的 html 節點的參考，$1是對上一次選擇節點的參考，以此類推直到$4，通過$的參考可以讀取 DOM 節點的一些屬性，
$ 和 $$
$ 等價于 document.querySelector()
$$ 等價于 document.querySelectorAll()
$_
$_為對上次輸出結果的參考
console.table
console.table 可以將陣列或物件以 table 方式展示，同時也可以展示物件屬性，console.table 接受兩個引數，第一個為要現實的資料，第二個引數為包含列名稱的陣列，
time 與 timeEnd
console.time 與 console.timeEnd，兩個方法配合計算并列印代碼執行時間，
在控制臺快速發送請求
在平時的介面除錯中，對于同一個介面，我們有時需要修改傳入引數并重新發送，對于有些請求可以重繪下頁面或者重新操作下即可重新發送，如果對于一個大型表單輸入引數發送請求并且進行了頁面跳轉后，還需要再次除錯，針對這樣的場景，再次去輸入表單去重新發送請求顯然效率是非常低的，那有什么捷徑呢？
在 Chrome 中我們可以進行以下操作：
- 打開 Network 面板，選中 Fetch/XHR；
- 選擇要重新發送的請求，單擊右鍵選擇 Copy，選中 Copy as fetch；
- 進入 Console 粘貼，修改輸入引數并重新發送，
在 Edge 瀏覽器中除了使用 Chrome 中的方法外，還可以使用 Network Console 進行重新請求，具體操作如下：
- 選擇要重新發送的請求，單擊右鍵選擇 Edit and Resend；
- 進入 Network Console 面板，修改引數后點擊 send 即可發送請求，
使用 Import HAR file / Export HAR file 復現網路請求
在 Network 面板上分別有 Import HAR file 和 Export HAR file 按鈕，點擊 Export HAR file 按鈕會匯出har檔案，檔案中保存了瀏覽器與服務器互動的一些資料，我們可以在任意瀏覽器頁面中點擊 Import HAR file 匯入 har 檔案復現當時的請求，
使用場景：當在客戶環境我們不方便直接訪問，假如由于網路問題或傳參問題等問題導致介面報錯問題時，我們可以通過匯出 har 檔案，在我們本地復現當時的網路請求狀況，
條件斷點
當清晰知道要除錯的范圍，且只除錯某指定條件分支下使用，當滿足條件時，斷點才會生效，
使用方法：在行號處點擊 Add Conditional Breakpoint...，即可添加代碼行條件斷點，
事件斷點
如果對代碼不熟悉或者在較長的代碼邏輯中，只是知道點擊觸發業務邏輯時，可以考慮事件監聽斷點，
DOM斷點
當 DOM 節點發生變化時添加斷點，會定位到修改 DOM 的那行代碼，
說明：
- subtree modifications 當前 DOM 子節點有任何變化時觸發斷點
- attribute modifications 當前 DOM 本身屬性有任何變化時觸發斷點
- node removeal 當前 DOM 節點被移除時觸發斷點
使用 Snippets 撰寫代碼片段
在平時開發中，常常會有些 JS 代碼需要在瀏覽器中除錯，直接在 console 下寫會比較麻煩，這時可以使用 Chrome 提供的 Snippets 功能，
使用方法：
- 在 Sources 下選擇 Snippets，點擊 “New Snippet” 按鈕，創建一個新的代碼片段；
- 在代碼區域輸入代碼；
- 按下“Command+Enter”或者點擊右下方按鈕即可執行代碼，
此外也可以使用 Snippets 存盤一些常用的代碼片段，如防抖、節流、正則運算式等代碼，這樣每次打開 Devtools 都能獲取到這些代碼，而不用去百度，
Snippets 和 Console 對比
| Snippets | Console |
|---|---|
| 跨標簽頁可用 | 當前標簽頁可用 |
| 永久保存，除非手動洗掉 | 頁面多載后清除 |
總結
Chrome DevTools提供了更多強大的功能供我們使用，它們可以大大的提高我們的開發效率，以上只是Chrome DevTools里一小部分使用技巧，更多的使用技巧歡迎大家在評論區補充分享，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/539370.html
標籤：Html/Css