chrome UI参考

这篇博客介绍了如何自定义和使用Chrome DevTools的界面,包括主菜单的访问、设置的打开方式、命令菜单的使用、抽屉的操作,以及如何更改DevTools的面板标签顺序和位置。同时,还详细说明了如何启用和切换到黑暗主题以及参与实验功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

官方文档

概览

此参考向您显示如何:

  • 访问和使用Chrome DevTools UI的常见部分,例如主菜单。
  • 更改Chrome DevTools用户界面。

主菜单

点击更多 更多以打开主菜单。
DevTools主菜单按钮


设置

要打开设置,请执行以下任一操作:

  • F1在DevTools处于焦点时按下。
  • 打开主菜单,然后选择设置。
    DevTools设置

命令菜单

要打开DevTools命令菜单,请按 Cmd+ Shift+ P(Mac)或 Ctrl+ Shift+ P(Windows,Linux)。
命令菜单使用模糊搜索。例如,切换到黑暗主题的确切命令是Switch to dark theme,但是键入也会theme过滤掉其他命令。
您在打开命令菜单时看到的命令列表代表所有可用的命令。
命令菜单


抽屉

按Escape打开或关闭抽屉。
抽屉

点击更多以打开其他抽屉选项卡。
抽屉


更改DevTools UI

重新排列面板标签

单击并拖动面板选项卡以更改其排序。您的自定义选项卡顺序在DevTools会话中保持不变。
具有自定义面板标签排序的DevTools窗口。

更改DevTools的位置

要更改DevTools窗口的位置,请执行以下操作:

  • 打开主菜单。
  • 选择Undock到单独的窗口,停靠在左边,停靠在底部或停靠在右边。

您也可以从Command Menu中更改DevTools的位置。这些命令的名称与上面提到的选项相同。
DevTools窗口停靠在左侧


使用黑暗的主题

将DevTools设置为黑暗的主题:

  • 打开设置。
  • 单击首选项选项卡。
  • 在外观部分,将主题设置为黑暗。

您也可以通过Command Menu将DevTools设置为黑色主题。
DevTools的黑暗主题


实验

要启用DevTools实验:

  • 转到 chrome://flags/#enable-devtools-experiments 。
  • 点击启用。
  • 点击页面底部的立即重新启动。

打开DevTools接下来的时间,有一个所谓的新页实验 中设置。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值