Workspace是個什么樣的東西呢？他能夠在開發者工具中調試修改js或者css同時自動保存文件，能夠避免開發人員在工具中調試好，再到編輯器中修改一次代碼的重復操作，能夠提高一定的效率。

之前這樣的功能需要在本地開啟一個sever端的服務。例如?autosave（?https://github.com/NV/chrome-devtools-autosave），每次需要開啟nodejs的sever端才能使用。

目前Chrome的正式版已經集成了這個功能，就方便了開發者許多，如何使用呢?

(如果你是使用Canary或者Chromiumde，Workspace已經不再是實驗選項，跳過1,2項)
1.在?chrome://flags/?中啟用 Developer Tools Experiments (開發者工具實驗)

2.在 Developer tools 設置 Experiments 選項下開啟File system folders in Sources Panel，再重啟Developer tools，就會多出Workspace選項。

3.Chrome為了確保安全，將目錄添加到File systems時會要求在目錄中存在.allow-devtools-edit文件，才允許開發者工具添加目錄編輯保存文件，所以需要在資源目錄中創建這個名字的空文件，方式有很多，例如：在資源目錄中執行命令

Windows?copy con .allow-devtools-edit?再?Ctrl + Z

Mac?touch .allow-devtools-edit

4.在Workspace中把你的資源目錄添加到File systems即可，如果CSS，JS鏈的是URL可以使用Mappings來設置路由（注意:結尾千萬不要加上\，他邏輯只判斷了是否以/結尾，否則就會變成path\/,略坑啊~~）

現在就可以在開發者工具中各種調試了，你就可以看到你的源文件也跟著改動啦~。

或者也可以在Sources中修改文件

缺陷
無論是 autosave 還是 workspace 比較遺憾都不能支持SCSS,LESS的編輯
總之Workspace還是能在調試階段幫助我們提升效率

總結

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

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