Chrome Workspace

叁歲伎倆 2021-11-10 05:44 331阅读 0赞

注：本文转自[http://www.wumii.com/item/SHhonJbF][http_www.wumii.com_item_SHhonJbF]但不完全相同，对文中说的不明白的地方进行了补充。

[Workspace][]是个什么样的东西呢？他能够在开发者工具中调试修改js或者css同时自动保存文件，能够避免开发人员在工具中调试好，再到编辑器中修改一次代码的重复操作，能够提高一定的效率。

之前这样的功能需要在本地开启一个sever端的服务。例如 autosave（[https://github.com/NV/chrome-devtools-autosave][https_github.com_NV_chrome-devtools-autosave]），每次需要开启nodejs的sever端才能使用。

目前Chrome的正式版已经集成了这个功能，就方便了开发者许多，如何使用呢?

(如果你是使用Canary或者Chromiumde，[Workspace][]已经不再是实验选项，请跳过1,2项的设置)

1.（Canary或者Chromiumde用户请跳过此项）在 chrome://flags/ 中启用 Developer Tools Experiments (中文版中是"开发者工具实验") ，下图中是启用后的截图。

![SouthEast][]

2.（Canary或者Chromiumde用户请跳过此项）在 Developer tools 设置 Experiments 选项下开启File system folders in Sources Panel，再重启Developer tools，就会多出[Workspace][]选项。

![SouthEast 1][]

![File-system-folders-in-Sources-Panel][]

3.Chrome为了确保安全，将目录添加到File systems时会要求在目录中存在.allow-devtools-edit文件，才允许开发者工具添加目录编辑保存文件，所以需要在资源目录中创建这个名字的空文件，方式有很多，例如：在资源目录中执行命令

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

![cmd][]

Mac touch .allow-devtools-edit

注：直接新建一个txt，然后将它重命名为.allow-devtools-edit是不行的，至少我在win8下是不行，操作系统会认为这个文件只有扩展名而无文件名，重命名不会成功。上面说的在cmd命令行的方式是可以的。

4.在Workspace中把你的资源目录添加到File systems即可，注意你要添加的目录中必须包含步骤3中提到的.allow-devtools-edit文件才可以，否则是添加不成功的。注意如果a目录中有.allow-devtools-edit这个文件，a中有子目录b,则如果想添加b目录，b目录中必须也存在.allow-devtools-edit文件才行，不会因为a中有这个文件就允许将添加b目录。

添加完目录后还没完，你还需要映射一下，左面的值是你源文件的路径，右面的值是你想将保存后的文件保存到的路径。当然二者可以是相同的，表示直接修改原文件。添加完一个映射后要点一下后面的加号（将鼠标移到那个位置时会出现）,再生成一条mapping的输入框,你输入的这条mapping才会被保存。注意映射文件的路径不要以/结尾,chrome会在你添加下一条mapping(点击加号)时自动为你加上\\符号。

![SouthEast 2][]

然后打开你的html，我的测试文件目录如下：

![SouthEast 3][]

![Image 1][]

**在chrome中打开test.html,然后需要在developer tools的sources中将你的文件映射一下，这一步是成功的关键！！**

**![SouthEast 4][]**

**![SouthEast 5][]**

**然后右键你要映射的文件---》map to file system resource...**

**![Image 1][]**

这一步做完之后，点击你的css文件，将css调到source面板中，修改文件就可以直接影响页面了，同时本地的文件也会跟着变，不过记得要保存啊,未保存时本地文件是不会更新的。下图是未保存时的状态，此时只是页面跟着变了，本地文件还没变。

![SouthEast 6][]

![Image 1][]

在css面板的更改也可以更新原文件：

![Image 1][]

![SouthEast 7][]

![Image 1][]

#### 缺陷 ####

无论是 autosave 还是 workspace 比较遗憾都不能支持SCSS,LESS的编辑  
总之Workspace还是能在调试阶段帮助我们提升效率

[http_www.wumii.com_item_SHhonJbF]: http://www.wumii.com/item/SHhonJbF
[Workspace]: http://www.csswang.com/tag/workspace
[https_github.com_NV_chrome-devtools-autosave]: https://github.com/NV/chrome-devtools-autosave
[SouthEast]: /images/20211109/d40c9eab2872435cb2f697e7bf9d9681.png
[SouthEast 1]: /images/20211109/b0fb270b9eb64d1983620e51603b3419.png
[File-system-folders-in-Sources-Panel]: http://www.csswang.com/wp-content/uploads/2013/05/380d_File-system-folders-in-Sources-Panel4.jpg
[cmd]: http://www.csswang.com/wp-content/uploads/2013/05/3a74_cmd3.jpg
[SouthEast 2]: /images/20211109/ad6f4f7cce8840328a357158c6dc55d4.png
[SouthEast 3]: /images/20211109/c82e005975d04003bc33500f0b7591f4.png
[Image 1]: 
[SouthEast 4]: /images/20211109/54588308b88540719dbee28fda48d70e.png
[SouthEast 5]: /images/20211109/c6521e04a7af49cbada64be53ae95a0d.png
[SouthEast 6]: /images/20211109/0c797ffc2091401e9de927ee5dc0412f.png
[SouthEast 7]: /images/20211109/3dfc5ffdb75c4d00835cd213b18f559a.png