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

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

打開開發者工具的快捷鍵

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

重新發送請求

有時在調試的使用僅想對某個介面重新請求，但又不想刷新頁面，就可以使用重放XHR功能，快速的保留參數重新請求。

修改參數重新發送請求

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

然後在控制臺中修改，如是 get 請求修改url，post 請求修改body，然後回車就能發送請求了，它會返回一個 Promise 對象。

VUE3 響應式數據格式化輸出

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

因為 vu3 內部做了自定義格式的實現，所以在設置中打開自定義格式設置工具就可以更直觀的查看響應式數據了。

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

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

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

快速選擇元素

瀏覽器自身提供了$,$$ 快速的選擇頁面中的元素，用起來有點像 jquery 中$。

`<div id="bar">bar</div>`
$ // ƒ $() { [native code] }  說明是瀏覽器自身提供的
$('#bar') // 獲取dom元素節點
$$('#bar') // 獲取dom元素對象

日誌點

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