【译】你不知道的 Chrome 调试工具技巧第二十天：Workspace的黑魔法

特别声明

本文是作者 Tomek Sułkowski 发布在 medium 上的一个系列。据作者透露一共有 24 篇，一直更新到 12 月 24 日
版权归原作者所有。

作者在 Twitter 上推荐我们的中文翻译啦,截图在最后

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。
为了不影响大家阅读，授权的记录在这里

正文

在马上就要迎来假期的这 24 天里，我将会发布一系列短篇的文章，关于如何更加有意思的使用开发工具，昨天我们谈到了在DevTools Drawer里面的几个面板，今天看看 Workspace ：

55. Edit your source files from Chrome（在 Chrome 中修改你的文件）

代码执行的位置是最容易编辑代码的位置 - 也就是在浏览器中。如果你直接把项目的文件夹直接拖到 Source 面板，DevTools 会将你做出的修改同步到系统的文件中。

对于快速修复代码这非常方便！（我真的认识一个喜欢以这种方式做大部分编码的开发者）

等等，它可以变得更好...

56.Workspace allows an instant styles sync(工作区支持即时同步样式)

正如我们刚才所说，一旦设置好了 DevTools workspace，就可以在 Sources 面板中编辑 HTML 和 JavaScript（或者甚至是 TypeScript ，如果你有 sourcemaps ）文件，按 ctrl + s 后它将被保存在文件系统中。

但是在样式方面它提供了更好的支持。即使你在 “元素” 面板的 “样式” 部分中编辑样式规则，它也会立即同步。立刻！

这是什么黑魔法？

57.Select a target location for new selector (为新选择器选择目标位置)

要向现有选择器添加新样式，很容易：只需在 “元素” 面板的 “样式” 部分中找到该选择器，然后开始编写 CSS。但是如果还没有这样的选择器，则需要按下New Style Rule 按钮。

但是，当你使用工作区时，新样式规则的默认定位为 - “inspector-stylesheet：1” 如果你不想要这个默认位置。只需按住 New Style Rule 按钮，你将看到列出所有 CSS 文件的选项。只需选择目的地，新规则就会保存在那里！

58. Workspace allows css injection!（ Workspace 允许 CSS 注入！）

设置工作区后，浏览器中所做的更改不仅会持久保存到文件系统中，而且你的 CSS 更改保存在文件系统后，立即被浏览器选中并显示在你的页面上。不需要刷新。

敲黑板：我们没有使用额外的工具-没有 webpack 的热更新模块或者其他东西 - 只有一个本地服务以及 DevTools' workspace 而已。

今天的分享就到这里~

惯例：如果你从这里学到了一些新东西

→ 你可以点个赞再走嘛~
→ 关注我：Twitter：Tomek Sułkowski

其他系列

其他此系列的文章，马上就会翻译出来，到时会贴出对应的链接在此处。

【译】你不知道的 Chrome 调试工具技巧第一天：console 中的'$'
【译】你不知道的 Chrome 调试工具技巧第二天：copying & saving
【译】你不知道的 Chrome 调试工具技巧第三天：console methods
【译】你不知道的 Chrome 调试工具技巧第四天：the Elements panel（元素面板）
【译】你不知道的 Chrome 调试工具技巧第五天：console 的 log 中,让人疑惑的案例
【译】你不知道的 Chrome 调试工具技巧第六天：command 菜单
【译】你不知道的 Chrome 调试工具技巧第七天：异步 consle 的趣味小窍门
【译】你不知道的 Chrome 调试工具技巧第八天：Color picker（颜色选择器）
【译】你不知道的 Chrome 调试工具技巧第九天：给 console 计时
【译】你不知道的 Chrome 调试工具技巧第十天：custom formatters（自定义格式转换器）
【译】你不知道的 Chrome 调试工具技巧第十一天：style editors continued（样式编辑器后续）
【译】你不知道的 Chrome 调试工具技巧第十二天：忍者日志打印！(the ninja logs)
【译】你不知道的 Chrome 调试工具技巧第十三天：对象 & 方法
【译】你不知道的 Chrome 调试工具技巧第十四天：其他快捷键~
【译】你不知道的 Chrome 调试工具技巧第十五天：Twitter day~
【译】你不知道的 Chrome 调试工具技巧第十六天：断点
【译】你不知道的 Chrome 调试工具技巧第十七天：再会 console
【译】你不知道的 Chrome 调试工具技巧第十八天：Drawer 里的秘密
【译】你不知道的 Chrome 调试工具技巧第十九天：深入 Drawer
【译】你不知道的 Chrome 调试工具技巧第二十天：Workspace的黑魔法
【译】你不知道的 Chrome 调试工具技巧第二十一天：Snippets(代码块)
【译】你不知道的 Chrome 调试工具技巧第二十二天：network
【译】你不知道的 Chrome 调试工具技巧第二十三天：Drawer tips 后续
【译】你不知道的 Chrome 调试工具技巧第二十四天：最后一天，元旦牛逼

写在最后

如果你对我的翻译表示肯定，也可以关注我一波哦~ 顺便我的开源项目，求一波 star→ 看这里, 美丽的博客系统

作者在 Twitter 上推荐我们的中文翻译啦