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

时间 2019-11-05

标签不知道 chrome 调试工具技巧第六 command 菜单栏目 Chrome 繁體版

原文原文链接

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

前两篇的翻译连接我已经给到了做者本人，虽然他不理解中文，可是他仍是很开心哈哈,截图在最后
vue

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

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

有一些 Dev Tools 的功能被深深的隐藏在特别的面板/菜单中。甚至有一些还隐藏在他们（面板/菜单）下面。这也是为何 Command 菜单，是在 Dev Tools 中必不可少的一个工具。浏览器

若是你使用过 WebStorm 中的 Find Action (查找动做) 或者 Visual Studio Code 中的 Command Palette 那么 (Command 菜单) 也是相似的功能。能够这样调出它：异步

能够看到命令的输入以及一系列供你选择的命令。我在下图按照选择的类型分组排列了这些命令：编辑器

顺便说一句. 我我的认为上面这张图，充分说明了 DevTools 有多么强力！工具

让咱们一块儿来看看隐藏在这里的精华吧？布局

若是你想对某个特别的 DOM 节点进行截图，选中那个节点，打开 Command 菜单而且寻找节点截图的命令。post

更好用的是：一样能够用这种方式全屏截图 - 使用 Capture full size screenshot 。请注意，咱们说的是全屏，并非嵌入页面的一部分。我记得这但是得使用浏览器插件才能作到的！

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

（你是否重置过 DevTools 呢？把 样式面板 从 html预览 的底部移动到右边或者其余的周围位置？是的，这就是我所说的😉）

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

选择你须要的

你是否讨厌忽然的强光，而且没法忍受一直看着白光闪闪的屏幕？或者你一直都在黑暗的模式下工做，但忽然太阳出来了，照在你的 DevTools 上致使你什么都看不到？

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

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

惯例：若是你从这里学到了一些新东西

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

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

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

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