Chrome 操作指南——入门篇（十四）drawer

前言

chrome 中 devtools 大家应该很熟悉，里面有着很多的面板，像 elemnts，console 以及 network 等等。这些面板在我们的开发中占着举足轻重的作用。

但是在 chrome 中其实还有一个隐藏的 devtools，可能你不是很熟悉。它里面也有一些面板，可能你暂时用不上，但是有些时候，他却能提高你的工作效率。下面就让我们来一探究竟。

drawer

在devtools界面，按下 [esc] 键即可打开 drawer，在按则会隐藏。

默认情况下，只显示一个console面板，他与devtools中的console面板完全完全一致。好处是，这样你就可以，一边看console中 log 信息，一边调试 接口或者在elements调试样式。

drawer 中的面板

点击drawer 左侧的 ⋮ 图标，可打开所有面板列表，选择相应的选项，可以将其添加到drawer中。

当然，通过crtl + shift + p打开 command menu，输入drawer，选择相应的选项，也可以添加到drawer中。

下面是drawer中的所有选项，以供大家参考：

• Animations
  

• Changes
  

• Console
  

• Coverage
  

• Network conditions
  

• Performance monitor
  

• Quick source
  

• Remote devices
  

• Rendering
  

• Request blocking
  

• Search
  

• Sensors
  

• What’s new
  

Quick source

就像它的英文字面意思一样，当你在看console中的 log 信息时，想快速看看源代码或者断点时，可以打开它，其实也是蛮有用的。

changes

当你在elements中对 dom 样式就行修改时，所做的改动都会在changes面板中记录。

并且，可以点击最下面的撤回按钮，进行一键撤回。