有没有办法隐藏Chrome devtools中的顶部菜单? [英] Is there a way to hide the top menus in Chrome devtools?

问题描述

我的意思是将菜单隐藏在红色框中，仅显示控制台.

I mean hiding the menus in the red box, and only show the console.

推荐答案

是的，可以通过devtools扩展和允许UI主题"来实现.实验(请参阅我的答案的正式方法"部分，网址为

Yes it is possible, with a devtools extension and the "Allow UI themes" experiment (see the "Official method" part of my answer at Custom.css has stopped working in 32.0.1700.76 m Google Chrome update). With this method, you will be able to define arbitrary stylesheets for the devtools.

/* Contents of Custom.css, use with https://stackoverflow.com/a/21210882 */
.tabbed-pane-header-tabs[aria-label="Panels"] .tabbed-pane-header-tab:not(#tab-console),
.tabbed-pane-header-tabs[aria-label="Panels"] ~ .tabbed-pane-header-tabs-drop-down-container,
.tabbed-pane-header-tabs[aria-label="Panels"] ~ .tabbed-pane-tab-slider {
  display: none;
}

要找到上述CSS选择器，我检查了devtools ，并确保选择器足够具体.每个选择器的第一部分是选择第一行(选择器的右部分还将与Elements/Sources面板中的选项卡匹配).我使用background:red(颜色各异)代替了display:none，以便更轻松地可视化提议的更改的影响.

To find the above CSS selectors, I inspected the devtools, and made sure that the selectors are specific enough. The first part of each selector is to select the top row (the right part of the selector would also match tabs within the Elements/Sources panel). Instead of display:none, I used background:red (with varying colors) to more easily visualize the impact of the proposed changes.

这篇关于有没有办法隐藏Chrome devtools中的顶部菜单?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！