Chrome 开发工具 Workspace 使用
2017-07-05 14:54
267 查看
前端开发中我们经常要在浏览器中做一些细节调整,比如对 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 文件,这里就不再演示了。
打开需要调试的页面,再开启调试工具(F12、alt + command + i),切换到 Sources 选项卡,在 CSS 资源右键选择『Add Folder to Workspace』
之后会让你选择保存路径,选择对应开发目录即可,选择后开发工具会询问获取目录权限,点击『允许』就 OK。
再次在 CSS 资源点击右键,选择『Map to File System Resource』
双击选择文件,并点击确定:
此时 Workspace 就设置好了,我们可以修改下 CSS 看看效果,我这里删除了一行背景样式:
然后在编辑器中就可以看到相应的 CSS 被注释了:
最后,可以进入 Workspace 面板对刚刚的配置进行修改:
如此一来就调试非常方便了,相应的也可以调试 JS 文件,这里就不再演示了。
相关文章推荐
- Chrome调试css(chrome开发工具workspace使用)
- Chrome 开发工具 Workspace 使用(转)
- Chrome 开发工具 Workspace 使用
- chrome 开发工具使用教程
- 使用 Chrome 开发工具调试异步 JavaScript(Debugging Asynchronous JavaScript with Chrome DevTools)
- Chrome开发人员工具使用技巧
- 开发人员调试工具Chrome Workspace
- 使用chrome的F12开发人员工具进行网页前端性能测试
- Chrome开发工具使用详解
- 使用Chrome开发工具调试Canvas
- 使用 Chrome 开发者工具实现网站快速开发的12个小技巧
- 关于Chrome的一些实用开发工具的使用
- 使用Chrome开发工具调试Canvas
- chrome开发人员工具使用链接整理
- Chrome开发工具窗口使用记录
- 译:使用Chrome开发工具调试Canvas
- 前端开发 调试工具 Chrome Workspace
- Chrome开发工具的使用
- 【APP接口开发】chrome浏览器DHC工具安装使用(亲测有效)
- 作为Web开发人员 我为什么喜欢 Chrome(或chrome 开发工具使用)