首页 > 代码库 > Chrome 开发工具 Workspace 使用
Chrome 开发工具 Workspace 使用
前端开发中我们经常要在浏览器中做一些细节调整,比如对 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 文件,这里就不再演示了。
转自 http://www.iinterest.net/2014/05/09/chrome-dev-tool-workspace
Chrome 开发工具 Workspace 使用
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。