瀏覽器開發者工具DevTools中提升效率的小技巧

会飞的一棵树發表於2024-04-28

DevTools 非常強大除了常用的檢視元素，進行斷點除錯或許還有些你不知道的小技巧，小功能。如可以快速的重新傳送請求，快速選擇元素，在控制檯中使用npm庫等，讓你能夠更加高效的進行開發。不定時更新~

開啟開發者工具的快捷鍵

使用快捷鍵能快速開啟 DevTools，但不同的快捷鍵可以開啟不同的 tab :

系統	元素	控制檯	網路
Windows 或 Linux	Ctrl + Shift + C	Ctrl + Shift + J	Ctrl + Shift + I
Mac	Cmd + Option + C	Cmd + Option + J	Cmd + Option + I

重新傳送請求

有時在除錯的使用僅想對某個介面重新請求，但又不想重新整理頁面，就可以使用重放XHR功能，快速的保留引數重新請求。

修改引數重新傳送請求

若是不想使用 postman等工具，且要快速的修改請求引數，可以在將請求複製出來，然後直接修改後傳送：

然後在控制檯中修改，如是 get 請求修改url，post 請求修改body，然後回車就能傳送請求了，它會返回一個 Promise 物件。

VUE3 響應式資料格式化輸出

因為 vue3 中響應式系統藉助了 Proxy API，所以直接輸出時它是個 Proxy 物件，檢視起來還是不太直觀的，如：

因為 vu3 內部做了自定義格式的實現，所以在設定中開啟自定義格式設定工具就可以更直觀的檢視響應式資料了。

vue3 原始碼中自定義格式化的實現：

檢視請求的資源是否使用了壓縮，用的是什麼壓縮演算法

其實就是檢視響應的 Content Encoding ，在網路請求中滑鼠右鍵 ==> Response Headers ==> Content Encoding。如下：可以看到資源請求使用了brotli或gzip壓縮演算法。

快速選擇元素

瀏覽器自身提供了$,$$ 快速的選擇頁面中的元素，用起來有點像 jquery 中$。$() 是document.querySelector()的簡寫，
$$() 是document.querySelectorAll()的簡寫。

`<div id="bar">bar</div>`
`<div class="foo">foo1</div>`
`<div class="foo">foo2</div>`
$ // ƒ $() { [native code] }  說明是瀏覽器自身提供的
$('#bar') // 返回文件中與指定選擇器或選擇器組匹配的第一個Element物件。
$$('#bar') // 返回與指定的選擇器組匹配的文件中的元素列表 (使用深度優先的先序遍歷文件的節點)。返回的物件是 NodeList 。

日誌點

線上上環境可以透過使用日誌點，線上上上環境進行console.log，當然大部時候直接斷點除錯可能會更快。😂

控制檯使用npm包

藉助 console importer (https://chromewebstore.google.com/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie) 外掛可以直接在控制檯中使用npm上或cdn上的包。

安裝外掛後可以使用$i('包名或cdn資源')匯入三方包，如使用day.js: