阅读 8919

【译】你不知道的Chrome调试工具技巧 第六天:command 菜单

特别声明

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

前两篇的翻译链接我已经给到了作者本人,虽然他不理解中文,但是他还是很开心哈哈,截图在最后

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

正文

在马上就要迎来假期的这 24 天里,我将会发布一系列短篇的文章,关于如何更加有意思的使用开发工具,昨天我们完成了第 16 个,所以我们今天从这开始...

17. 开始使用 Command (命令) 菜单 (如果你还没有用过的话)

有一些 Dev Tools 的功能被深深的隐藏在特别的 面板/菜单 中。甚至有一些还隐藏在他们(面板/菜单)下面。这也是为什么 Command 菜单,是在 Dev Tools 中必不可少的一个工具。

如果你使用过 WebStorm 中的 Find Action (查找动作) 或者 Visual Studio Code 中的 Command Palette 那么 (Command 菜单) 也是类似的功能。可以这样调出它:

  • Chrome 的调试打开的情况下 按下 [ Ctrl]+[Shift]+[P] (or [⌘]+[Shift]+[P] on Mac)
  • 或者使用DevToolsdropdown 按钮的这个选项:

可以看到命令的输入以及一系列供你选择的命令。我在下图按照选择的类型分组排列了这些命令:

顺便说一句. 我个人认为上面这张图,充分说明了 DevTools 有多么强力!

让我们一起来看看隐藏在这里的精华吧 ?

18.截屏,大小通吃

如果你想对某个特别的 DOM 节点进行截图,选中那个节点,打开 Command 菜单并且寻找节点截图的命令。

更好用的是:同样可以用这种方式全屏截图 - 使用 Capture full size screenshot 。请注意,我们说的是 全屏 ,并不是嵌入页面的一部分。我记得这可是得使用浏览器插件才能做到的!

19.快速切换面板

DevTools 的部分使用双面板布局(例如:元素或者资源面板),DevTools 经常根据屏幕可用的部分,将它们横向或者纵向的排列,以方便阅读的方式展示。有时候你并不喜欢这样布局。

(你是否重置过 DevTools 呢?把 样式面板html预览 的底部移动到右边或者其他的周围位置?是的,这就是我所说的😉)

打开 Commands 菜单并且输入 layout ,你会看到 2 到 3 个可供选择的项(当前你已经激活的选项不会在这里显示):

  • 使用横向面板布局
  • 使用纵向面板布局
  • 使用自动面板布局

选择你需要的

20.快速切换主题

你是否讨厌突然的强光,并且无法忍受一直看着白光闪闪的屏幕?或者你一直都在黑暗的模式下工作,但突然太阳出来了,照在你的 DevTools 上导致你什么都看不到?

Commands菜单中寻找与 theme 相关的选项,以实现在明亮&暗黑两种主题之间的切换。

好的,今天就分享这么多啦~

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

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

其他系列

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

写在最后

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

关于这次翻译,作者的回复

关注下面的标签,发现更多相似文章
评论