您的位置:首页 » 分类: 前端工具 & 前端资源 » 文章: Chrome DevTools – 配置和自定义DevTools

Chrome DevTools – 配置和自定义DevTools

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

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

TL;DR

  • 打开主菜单和设置菜单。
  • 自定义DevTools的外观。
  • 访问隐藏的功能。

打开主菜单

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

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

main menu

打开设置

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

打开命令菜单

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

command menu

对面板标签重新排序

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

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

before reorder

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

after reorder

自定义DevTools布局

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

要更改DevTools的布局,
打开主菜单并选择Undock into separate window(取消内嵌,单独窗口显示)(取消内嵌按钮)按钮,Dock to bottom(停靠到底部)(停靠到底部按钮)按钮,或Dock to right(停靠到右侧)(停靠到右侧按钮)按钮。

使用深色(dark)主题

要使用深色的DevTools主题,打开DevTools的设置,转到Preferences(首选项)页面,找到Appearance(外观)部分,然后从Theme(主题)下拉菜单中选择Dark

深色(dark)主题

打开和关闭抽屉式选项卡

Esc键可打开和关闭 DevTools 的 Drawer(抽屉式选项卡)。
下面的屏幕截图显示了 Elements(元素)面板中 Console (控制台选项卡)在底部打开的示例。

Elements panel with Drawer

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 Experiments

模拟打印媒体

要在打印预览模式下查看页面,打开DevTools主菜单,选择More Tools > Rendering Settings(更多工具>渲染设置), 然后勾选emulate media(模拟媒体)复选框并将下拉菜单设置为 print(打印)。

渲染设置

启用打印预览模式

显示HTML注释

要在Elements(元素)面板中显示或隐藏HTML注释,打开DevTools的Settings,转到Preferences(首选项)面板,找到Elements(元素)部分,然后切换Show HTML comments(显示HTML注释)复选框。

说明

翻译自:https://developers.google.com/web/tools/chrome-devtools/settings

正文完。下面还有一个推广让最好的人才遇见更好的机会!

互联网行业的年轻人,他们面对着怎样的职业瓶颈、困惑与未来选择?过去,这鲜有人关心。资深的职场人,也多半优先选择熟人去推荐机会。

100offer致力于改变现状,帮互联网行业最好的人才发现更好的机会。使用 100offer.com 或 100offer App ,可以一周内获得中国、美国等数千家优质企业的工作机会。

马上去遇见更好的机会
推广结束

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

版权声明

本文仅用于学习、研究和交流目的,欢迎非商业性质转载。
转载请注明文章的完整链接:http://www.css88.com/archives/6819
作者(译者): 及 网站出处:CSS88.com

发表评论

电子邮件地址不会被公开。 必填项已用*标注