1. Command

我们直接可以直接看到的 DevTools 的功能,其实只是有限的一部分,怎么去探索更多的功能呢?

Command 菜单可以帮助我们快速找到那些被隐藏起来的功能,这也是它本身必不可少的原因。

如果你使用过 WebStorm 中的 Find Action (查找动作) 或者 Visual Studio Code 中的 Command Palette 的话,那么在 DevTools 中的 Command 菜单也与之类似:

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

下图中,整理了可供选择的命令列表,归为几个部分:

menu

上面这张图同时也证明了 DevTools 有多么强力!

1.1. 截屏的新姿势

当你只想对一个特别的 DOM 节点进行截图时,你可能需要使用其他工具弄半天,但现在你直接选中那个节点,打开 Command 菜单并且使用 节点截图 的就可以了。

不只是这样,你同样可以用这种方式 全屏截图 - 通过 Capture full size screenshot 命令。请注意,这里说的是全屏,并不是嵌入页面的一部分。一般来说这可是得使用浏览器插件才能做到的事情!

screenshot

注:节点截图有时会失效,全屏截图暂时没有遇到问题,建议大家使用后者。

1.2. 快速切换面板

DevTools 使用双面板布局,形式一般是:元素面板 + 资源面板 ,它根据屏幕可用的部分,经常将不同面板横向或者纵向的排列,以适合阅读的方式展示出来。但有时候我们并不喜欢默认的布局。

你是否想过要重置 DevTools 呢?将 样式面板 从 html预览 的底部移动到右边或者周围其他的位置呢?是的,这就是下面要介绍的 😉

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

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

panel

1.3. 快速切换主题

经常在电脑前一坐就是一天,所以我不能忍受一直看着白闪闪的屏幕。而且突然出现的强光也让人讨厌:我们一直都在黑暗的空间中工作,突然太阳出来了,照在你的 DevTools 上,导致你什么都看不到!

这个时候 主题 就派上了用场了:在 Commands 菜单中寻找与 theme 相关的选项,实现 明亮 & 暗黑 两种主题之间的切换:

theme


results matching ""

    No results matching ""