注:本文转自http://www.wumii.com/item/SHhonJbF但不完全相同,对文中说的不明白的地方进行了补充。
Workspace是个什么样的东西呢?他能够在开发者工具中调试修改js或者css同时自动保存文件,能够避免开发人员在工具中调试好,再到编辑器中修改一次代码的重复操作,能够提高一定的效率。
之前这样的功能需要在本地开启一个sever端的服务。例如 autosave(https://github.com/NV/chrome-devtools-autosave),每次需要开启nodejs的sever端才能使用。
目前Chrome的正式版已经集成了这个功能,就方便了开发者许多,如何使用呢?
(如果你是使用Canary或者Chromiumde,Workspace已经不再是实验选项,请跳过1,2项的设置)
1.(Canary或者Chromiumde用户请跳过此项)在 chrome://flags/ 中启用 Developer Tools Experiments (中文版中是"开发者工具实验") ,下图中是启用后的截图。
2.(Canary或者Chromiumde用户请跳过此项)在 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
注:直接新建一个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(点击加号)时自动为你加上\符号。
然后打开你的html,我的测试文件目录如下:
在chrome中打开test.html,然后需要在developer tools的sources中将你的文件映射一下,这一步是成功的关键!!
然后右键你要映射的文件---》map to file system resource...
这一步做完之后,点击你的css文件,将css调到source面板中,修改文件就可以直接影响页面了,同时本地的文件也会跟着变,不过记得要保存啊,未保存时本地文件是不会更新的。下图是未保存时的状态,此时只是页面跟着变了,本地文件还没变。
在css面板的更改也可以更新原文件:
缺陷
无论是 autosave 还是 workspace 比较遗憾都不能支持SCSS,LESS的编辑
总之Workspace还是能在调试阶段帮助我们提升效率