Is there a way to hide the top menus in Chrome devtools?

Question

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

Answer 1

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;
}

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.