通過 Workspace，你可以把本地服務器的資源映射為硬盤上的文件，實現調試 JS 和 CSS 的同時自動保存文件，比如 Elements 面板中的樣式變更會自動保存到文件中。

以調試本地服務器上的?Minty 主題為例：

打開 DevTools 開發者工具中的 Sources 面板，在面板左側右鍵選擇「Add folder to workspace」，選擇添加的文件夾：

添加文件夾到 workspace

添加好后，右鍵一個文件，選擇「Map to file system resource...」，在彈出的文本框中選擇在 Workspace 中對應的文件：

添加映射文件 選擇對應的本地文件

比如我映射了?style.min.css?文件，那么現在你編輯元素面板中的樣式，Chrome 就會實時保存本地的文件變更。

具體的文件映射規則可以到 Devtools > Settings > Workspace 中設置：

設置 Workspace

PS: 如果你映射的是文件夾，像 all.js?v=4.1 之類帶參數的請求是無法映射的。(Issue 277885)

參考資料：
Workspaces - Persistent authoring in the DevTools

總結

以上是生活随笔為你收集整理的通过 Chrome Workspace 调试本地项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。