在 Chrome 中修改你的文件
有时在代码执行的位置也是最容易编辑代码的位置（对于前端来说也就是浏览器）。如果你把项目的文件夹直接拖到 Source 面板，DevTools 会将你做出的修改同步到系统的文件中。
这对于快速修复代码非常方便！（我真的认识一个喜欢以这种方式做大部分编码的开发者）
等等，其实它可以更好…
Workspace 支持即时同步样式
正如我们刚才所说，一旦设置好了 DevTools workspace，就可以在 Sources 面板中编辑 HTML 和 JavaScript（或者甚至是 TypeScript，如果你有sourcemaps）文件，按 ctrl + s 后它将被保存 在文件系统中。
但是在样式方面它提供了更好的支持。 因为即使你只是在 “元素” 面板的 “样式” 部分中编辑样式规则，它也会立即同步。 请注意，是立刻！
为新选择器选择目标位置
如果要向现有选择器添加新样式，很容易：只需在 “元素” 面板的 “样式” 部分中找到该选择器，然后开始编写 CSS。 但如果还没有这样的选择器，则需要按下New Style Rule 按钮。
当你使用工作区时，新样式规则的默认定位为 - “inspector-stylesheet：1” 如果你不想规则在这个位置显示，只需按住 New Style Rule 按钮，就可以看到一个列出所有 CSS 文件的选项。选择目的地，新规则就会保存在那里！
Workspace 允许 CSS 注入
设置工作区后，浏览器中所做的更改不仅会持久的保存到文件系统中，而且，CSS 的更改保存在文件系统后，立即就被浏览器选中并显示在你的页面上。并不需要手动刷新。
**
敲黑板：我们 没有使用额外的工具 - 没有 webpack 的热更新模块或者其他东西 - 只有一个本地服务以及 DevTools' workspace 而已。
参考
【1】官方文档
【2】50 个 Chrome Developer Tools 必备技巧 | DevOpen.Club 出品【视频】
【3】Chrome调试技巧 | 前端九部 - 入门者手册2019
【4】你不知道的 Chrome 调试技巧（掘金小测）
若有收获，就点个赞吧
0 人点赞
