html5开发者工具栏,配置和自定义DevTools

配置和自定义DevTools

更改DevTools的外观并访问隐藏的功能。

TL;DR打开主菜单和设置菜单。

自定义DevTools的外观。

访问隐藏的功能。

打开主菜单

DevTools的主菜单是一个下拉菜单，用于配置DevTools的外观，访问附加工具，打开设置，等等。

要打开主菜单，单击DevTools窗口右上角的主菜单单按钮。

打开设置

要打开DevTools设置，当DevTools在获取焦点时按F1，或打开主菜单，然后选择Settings。

打开命令菜单

按Cmd + Shift + P(Mac)或Ctrl + Shift + P(Windows，Linux)打开命令菜单。

对面板标签重新排序

单击，按住并拖动面板选项卡以更改其排序。您的自定义选项卡顺序在DevTools会话中保持不变。

例如，默认情况下，Network(网络)选项卡通常是左侧的第四个。

您可以将其拖动到任何位置，例如拖到左边第一个。

自定义DevTools布局

您可以将DevTools停靠在页面的底部，页面的右侧，或者您可以在新窗口中打开它。

要更改DevTools的布局， 打开主菜单并选择Undock into separate window(取消内嵌，单独窗口显示)(

)按钮，Dock to bottom(停靠到底部)(

)按钮，或Dock to right(停靠到右侧)(

)按钮。

使用深色(dark)主题

要使用深色的DevTools主题，打开DevTools的设置，转到Preferences(首选项)页面，找到Appearance(外观)部分，然

后从Theme(主题)下拉菜单中选择Dark。

打开和关闭抽屉式选项卡

按Esc键可打开和关闭 DevTools 的 Drawer(抽屉式选项卡)。 下面的屏幕截图显示了 Elements(元素)面板

中 Console (控制台选项卡)在底部打开的示例。

在Drawer(抽屉式选项卡)中，你可以在 Console 控制台中执行命令，查看动画检查器(Animations)，配置网络条件

(network conditions)和渲染(rendering)设置，搜索(search)字符串和文件，并模拟移动传感器(sensors)。

当Drawer(抽屉式选项卡)打开时，单击在Console (控制台抽屉式选项卡)左侧的三点图标(

),然后选择其中一个

下拉菜单选项，以打开其他选项卡。

启用实验性功能

当DevTools Experiments启用时，一个名为Experiments的新页面将显示在DevTools设置中。在此页面中，您可以启用

和停用实验性功能。

要启用实验，请前往chrome://flags/#enable-devtools-experiments，然后单击Enable。单击页面底部的Relaunch

Now按钮。

当您打开DevTools的设置时,您现在应该会看到一个名为Experiments的新页面。

模拟打印媒体

要在打印预览模式下查看页面，打开DevTools主菜单，选择More Tools > Rendering Settings(更多工具>渲染设

置)， 然后勾选emulate media(模拟媒体)复选框并将下拉菜单设置为 print(打印)。

显示HTML注释

要在Elements(元素)面板中显示或隐藏HTML注释，打开DevTools的Settings，转到Preferences(首选项)面板，找到

Elements(元素)部分，然后切换Show HTML comments(显示HTML注释)复选框。