Chrome 開發者建議你這樣調試 web 應用

本文來自 Chrome 團隊的 Jecelyn Yeen (阮貝琪) 在 FEDAY 分享，主題爲：探討網頁調試的現況、Chrome DevTools 的最新進展以及一些實用的 DevTools 小工具。

現代 Web 開發中，爲了滿足用戶的需求和期望，提高開發效率和質量，構建更現代、更安全、響應更快、功能更豐富的 Web 應用。

開發中經常使用一些流行的前端框架和庫，如 React、Angular、Vue.js 等，這些框架和庫提供了豐富的功能和組件，可以加速開發過程並提高用戶體驗。

現代 Web 開發中常見的工作流

但目前瀏覽器還是隻能識別 HTML、CSS 和 JavaScript，導致構建過程就需要如構建、壓縮和翻譯等；這樣開發時使用工具和語法，與瀏覽器可以理解的標準差別越來越大；就使得調試也變得異常複雜，如果還在使用 console.log 進行調試就顯得捉襟見肘。

下面就爲大家介紹一些現代 Web 中調試應用的一些 Tips💡:

1. 使用 Source Map 來進行調試

現代 Web 開發都需要構建工具，會有構建和打包流程，將代碼轉譯爲瀏覽器可以理解的 HTML、JavaScript 和 CSS。此外，爲了優化性能，常見做法是壓縮和合並這些文件，從而縮減文件的大小並提高它們對 Web 的使用效率。

但是，這種優化會增加調試的難度。如果代碼在壓縮後僅包含一行，如果變量名稱較短，則很難確定問題的根源。

這時源代碼映射就派上用場了 - 瀏覽器的 Dev Tools 會應用這些源映射，它們會將您編譯的代碼映射回原始代碼。開發者便可以快速確定經過縮減的代碼與原始代碼之間的關係，從而使調試過程更加順暢，有助於您直接在瀏覽器中更快地查明調試問題。

源代碼映射最重要的方面是 mappings 字段。它使用 VLQ base 64 編碼字符串將已編譯文件中的行和位置映射到相應的原始文件。您可以使用來源映射可視化工具（例如 source-map-visualization 和來源映射可視化）直觀呈現此映射。

關於 source map 更多的信息可以參考：https://web.dev/articles/source-maps

按已編寫 / 已部署分組代碼

源代碼面板中的按已編寫/已部署分組功能，可以快速篩選分類混亂的源碼文件

幫你分類出哪些是你自己編寫的代碼，哪些是瀏覽器運行的代碼

隱藏第三方代碼

在調試時忽略不重要的文件或文件夾, 可以快速定位到問題。

Chrome 和 Firefox 瀏覽器具備 x-google-ignorelist 的語法可自定義隱藏，目前 Angular、Nuxt 和 Vite 原生支持 ignorelist 的語法，可以自動隱藏三方庫的代碼文件。

webpack 和 rollup 可以使用 sourcemapIgnoreList 自定義隱藏代碼文件；如果使用的框架或者構建工具不支持隱藏第三方代碼，可以手動進行標記隱藏：

這裏的隱藏是不會調試進入這些隱藏的源碼文件中

前端臨時處理 CORS Error

Chrome 支持修改響應頭部的操作，將返回跨域問題的響應頭進行編輯，增加access-control-allow-origin:* 後，重新刷新頁面就可以正常請求。

規則也支持通配符，可以進行批量修改和應用到請求中。

Mock 請求

使用網絡面板更改 API 和模擬文件內容返回數據，重新請求就會生效。

mock 請求

錄製器 Recorder

在開發者工具中可以使用錄製器，進行錄製網頁操作還可以進行回訪和分享

可以應用到 bug 的復現和問題定位；具體使用方法可參考：

  1. 錄製和播放

  2. 可以刪除和編輯事件

  3. 爲錄製的文件代碼，可以導出分享，導入進行回放

渲染 Rendering

大家再調試 Tooltip、DropDownMenu 或者一些聯想輸入彈框的時候，是不是不能選中彈框的節點；一般只能修改觸發的規則改爲點擊觸發，然後調試完還要恢復爲原來的 hover 或者 active 觸發；但是瀏覽器是支持模擬 focused page，入口在更多工具 - 渲染 (Rendering)- 模擬所聚焦的網頁 (Emulate a focused page)

focused page

由於入口難找，Jecelyn 預告 Chrome 應該在下 1-2 個版本後，將入口放到 Force elemen state 面板中，會更方便調試。

代碼段 Snippets

可以在瀏覽器中定義些代碼片段，比如時間戳格式化、URL 的編解碼等常用工具函數，在任何頁面中運行可以 script 代碼

cmd/win + p, 輸入 !${函數名}來執行代碼段

以上是分享中提到的 Chrom 調試 Morden Web 的一些技巧和方法，大家平時是怎麼調試代碼的，過程中有什麼奇技淫巧，可以在評論區分享討論一下。

原視頻鏈接：https://www.bilibili.com/video/BV1mG411i7f2(點擊閱讀原文)

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/dqrW8NNLwbdMEoU1HZzDFQ

猜你喜歡