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

栏目: CSS · 发布时间: 5年前

内容简介:本文是作者Tomek Sułkowski 发布在medium 上的一个系列。据作者透露一共有 24 篇,一直更新到 12 月 24 日版权归原作者所有。译者在翻译前已经和作者沟通得到了翻译整个系列的授权。

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

版权归原作者所有。

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

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。

为了不影响大家阅读,授权的记录在这里

正文

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

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

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

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

【译】你不知道的 Chrome 调试 <a href='https://www.codercto.com/tool.html'>工具</a> 技巧 第二十天:Workspace的黑魔法

等等,它会变得更好...

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

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

但是在样式方面它会变得更好。 因为现在,即使您在“元素”面板的“样式”部分中编辑样式规则,它也会立即同步。 立刻!

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

这是什么黑魔法?

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

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

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

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

58.Workspace allows css injection!(为新选择器选择目标位置)

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

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

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

58. Workspace allows css injection!( Workspace 允许 CSS 注入!)

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

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

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

今天的分享就到这里~

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

→ 你可以点个赞再走嘛~

→ 关注我: Twitter:Tomek Sułkowski

其他系列

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


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

算法设计与分析基础

算法设计与分析基础

Anany levitin / 潘彦 / 清华大学出版社 / 2007-1-1 / 49.00元

作者基于丰富的教学经验,开发了一套对算法进行分类的新方法。这套方法站在通用问题求解策略的高度,能对现有的大多数算法都能进行准确分类,从而使本书的读者能够沿着一条清晰的、一致的、连贯的思路来探索算法设计与分析这一迷人领域。本书作为第2版,相对第1版增加了新的习题,还增加了“迭代改进”一章,使得原来的分类方法更加完善。 本书十分适合作为算法设计和分析的基础教材,也适合任何有兴趣探究算法奥秘的读者......一起来看看 《算法设计与分析基础》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具