特别声明
本文是作者 Tomek Sułkowski https://twitter.com/sulco 发布在 https://medium.com/@tomsu 上的一个系列. 据作者透露一共有 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!(为新选择器选择目标位置)
如果要向现有选择器添加新样式, 很容易: 只需在 "元素" 面板的 "样式" 部分中找到该选择器, 然后开始编写 CSS. 但是如果还没有这样的选择器, 则需要按下 New Style Rule 按钮.
但是, 当你使用工作区时, 新样式规则的默认定位为 - "inspector-stylesheet:1" 如果这不是你想要规则显示的位置. 在这种情况下, 只需按住 New Style Rule 按钮, 你将看到列出所有 CSS 文件的选项. 只需选择目的地, 新规则就会保存在那里!
58. Workspace allows CSS injection!( Workspace 允许 CSS 注入!)
设置工作区后, 浏览器中所做的更改不仅会持久保存到文件系统中, 而且你的 CSS 更改保存在文件系统后, 立即被浏览器选中并显示在你的页面上. 不需要刷新.
敲黑板: 我们没有使用额外的工具 - 没有 webpack 的热更新模块或者其他东西 - 只有一个本地服务以及 DevTools' workspace 而已.
来源: https://juejin.im/post/5c2652d8f265da61587739ae