前端開發中我們經常要在瀏覽器中做一些細節調整，比如對 CSS 的微調，最快的方式當然是直接在 Chrome 的開發者工具中調整，但問題在于在控制臺中調試好的數值我們還需要再在 CSS 源碼中再寫一次，效率就低了不少。而 Chrome 的 Workspace 工具就能幫助我們把調試工具中修改的內容自動保存到相應的文件中。 方法也挺簡單，下面以調試一個 CSS 文件為例：

打開需要調試的頁面，再開啟調試工具（F12、alt + command + i），切換到 Sources 選項卡，在 CSS 資源右鍵選擇『Add Folder to Workspace』

之后會讓你選擇保存路徑，選擇對應開發目錄即可，選擇后開發工具會詢問獲取目錄權限，點擊『允許』就 OK。

再次在 CSS 資源點擊右鍵，選擇『Map to File System Resource』

雙擊選擇文件，并點擊確定：

此時 Workspace 就設置好了，我們可以修改下 CSS 看看效果，我這里刪除了一行背景樣式：

然后在編輯器中就可以看到相應的 CSS 被注釋了：

最后，可以進入 Workspace 面板對剛剛的配置進行修改：

如此一來就調試非常方便了，相應的也可以調試 JS 文件，這里就不再演示了。

總結

以上是生活随笔為你收集整理的Chrome 开发工具 Workspace 使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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