有没有办法隐藏 Chrome devtools 中的顶部菜单？答案

【问题标题】：Is there a way to hide the top menus in Chrome devtools?有没有办法隐藏 Chrome devtools 中的顶部菜单？
【发布时间】：2020-11-04 12:50:03
【问题描述】：

我的意思是把菜单隐藏在红框中，只显示控制台。

【问题讨论】：

不，没有这个选项，但你可以暂时隐藏在devtools-on-devtools中。

标签： google-chrome-devtools

【解决方案1】：

是的，可以通过 devtools 扩展和“允许 UI 主题”实验（请参阅我在 Custom.css has stopped working in 32.0.1700.76 m Google Chrome update 的回答中的“官方方法”部分）。使用此方法，您将能够为开发工具定义任意样式表。

/* 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 选择器，我inspected the devtools，并确保选择器足够具体。每个选择器的第一部分是选择顶行（选择器的右侧部分也将匹配元素/源面板中的选项卡）。我没有使用display:none，而是使用background:red（不同颜色）来更轻松地可视化提议的更改的影响。

【讨论】：