提高前端生产力的小技巧：谷歌开发人员工具保存修改

在开发的时候，我们在浏览器的开发人员工具中对某一元素的样式进行了修改，往往还要返回到代码编辑区进行修改。定位，修改，检查，这些操作很麻烦。
有没有一种方法，可以提高我们的生产力，将浏览器中的修改保存到代码编辑区域呢？

下面就用不到1分钟的时间，演示将浏览器开发人员工具设置为自动保存到代码编辑器。

按f12弹出开发人员工具，选择sources选项卡，在左侧是引入的文件。右键弹出“添加文件到工作区”，选择项目的根目录，添加到工作区。

添加完以后，找到index.html的页面，右键，选择映射到网络资源：

然后，开发人员工具会自动的帮你匹配：

单击选择就好。

然后，再在浏览器的开发人员工具中修改，就会自动保存到编辑器中啦~

转载于:https://www.cnblogs.com/dujuncheng/p/6140432.html