javascript - How can I keep the "Console Drawer" hidden by default every time I open Chrome DevTools? - Stack

admin管理员组

文章数量:1134246

When I have DevTools open, there is a little button that toggles Hide Drawer. and Show Console.. Besides being inconsistently named, the 'drawer' is very annoying to me because it takes up so much of the little screen real estate allotted for devtools (i'm bottom docked). How can I keep this 'drawer' closed permanently? Or if I can't do that, can I at least keep the height of it as low as possible? (it returns to a default height every time I open it)

When I have DevTools open, there is a little button that toggles Hide Drawer. and Show Console.. Besides being inconsistently named, the 'drawer' is very annoying to me because it takes up so much of the little screen real estate allotted for devtools (i'm bottom docked). How can I keep this 'drawer' closed permanently? Or if I can't do that, can I at least keep the height of it as low as possible? (it returns to a default height every time I open it)

• javascript
• google-chrome
• console
• google-chrome-devtools

Share Improve this question Follow asked Dec 28, 2013 at 21:40 celwellcelwell 1,66233 gold badges1919 silver badges2727 bronze badges 12

• Are you using Canary? I think it is a bug in Canary. Stable Chrome has the drawer hidden every time you open the DevTools. – Fabrício Matté Commented Dec 28, 2013 at 21:57
• Screenshot? Browser version? It's called "Show console" and "Hide console" in my Chromium browser (v31.0.1650.63). – Rob W Commented Dec 28, 2013 at 21:59
• Version 32.0.1700.41 m Aura – celwell Commented Dec 28, 2013 at 22:44
• 6 I'd be happy not to be part of it - you're right the drawer is very annoying and can't be customised. :/ – army Commented Jan 13, 2014 at 12:21
• 1 This thing making me angry and I cannot do anything about it – HP. Commented Jan 17, 2014 at 9:30

 |  Show 7 more comments

14 Answers 14

Sorted by: Reset to default 80

At least you can press ESC to toggle the console area hide and show.

None of the previous answers worked for me. All of my emulation tab options are cleared/reset. I'm not sure if it's new but it turns out that there is a "Toggle emulation" button on the left side, next to the search icon. Mine was blue so I clicked on it to make it non-blue. Screenshot is below. Now, all is happy. That was so frustrating!

I solved same problem removing the flag from "Spoof user agent" option under the "Emulation" tab (I don't even know why it was flagged!).

Apparently there is a show / hide console button next to the setting button. info and screenshot here - https://developers.google.com/chrome-developer-tools/docs/console#opening_the_console

My problem was that the Console was enabled in the chrome menu, you can turn it off by clicking on the Console option in the dev tools settings:

THIS SOLUTION NO LONGER WORKS WITH NEW CHROME VERSIONS. THE ICON WAS REMOVED. The working solution was pasted above by Sigma. Pressing the ESC key will toggle the visibility of the panel.

I notice the majority of these answers are over a year old. I had a similiar issue and it's August 2015.

I was overlooking a simple icon: The >_ next to the gear.

You can see the video of the window being shown and hidden to confirm this is the same issue: http://www.youtube.com/watch?v=QOC863BxZNM&hd=1

When the "drawer" is open look into the "emulation" tab, then click on "reset." Close dev tool (F12) and then reopen it (F12). The "drawer" is hidden by default.

My Chrome Version: 32.0.1700.77

The response of Darko works, I propose another way to solve this problem.

I hope this helps someone.

click Restore Defaults and Reload in Dev tools Setting right bottom

my chrome version is 37

in my case reset in emulation does not worked although i had tried it recently and it was the root cause

In latest chrome there is a "Show What's New after each update" setting (preferences->appearance). Once you untick it, the console finally won't pop up anymore.

It is because Spoof User Agent is enabled in your Emulation-tab in the drawer.

Deselect the options below

I had the same problem, and also a frame around the page with pixels lenght of page (kind of rulers if you use PSD) with options for device width. I've solved clicking on restore default options. Hope can help someone.

I had to uncheck that box shown in circle in the newest chrome version (38.*).

If you ever right click one of the dev tool tabs and do "move to bottom" then you have just enabled the horrid "console drawer" which is the bottom set of tabs. To fix this open the dev tools (F12), then click the ellipsis (...), then click show console drawer. A second set of tabs opens. Right click all tabs there except for the console and select move to top.

• Chrome (114.0.5735.110): Simply click that x to close the drawer. (See screenshot below)
• Edge (114.0.1823.43): Click that collapse button. (See screenshot below)
• Last resort (incase none of the above works for you)
  1. Click F12 or whatever your shortcut is to toggle devtools.
  2. Close all tabs except Console on the drawer.
  3. Switch to Console panel at the top.
  4. Now when you re-open devtools, the drawer should be minimized by default.

本文标签：