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面板中记录。

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