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

特别声明

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

做者在 Twitter 上推荐咱们的中文翻译啦,截图在最后
vue

译者在翻译前已经和做者沟通获得了翻译整个系列的受权。
为了避免影响你们阅读，受权的记录在这里
webpack

正文

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

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

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

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

等等，它能够变得更好...浏览器

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

其余系列

其余此系列的文章，立刻就会翻译出来，到时会贴出对应的连接在此处。

写在最后

若是你对个人翻译表示确定，也能够关注我一波哦~ 顺便个人开源项目，求一波 star→ 看这里, 美丽的博客系统

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