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

Question

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)

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é, Dec 28 '13 at 21:57
Screenshot? Browser version? It's called "Show console" and "Hide console" in my Chromium browser (v31.0.1650.63). — Rob W, Dec 28 '13 at 21:59
apparently my chrome install is part of an a/b test? http://productforums.google.com/d/msg/chrome/zmgiVCv9X0A/HXmhMIYzc1YJ — celwell, Dec 28 '13 at 22:47
I'd be happy not to be part of it - you're right the drawer is very annoying and can't be customised. :/ — army, Jan 13 '14 at 12:21
I'm having this exact problem too. Does anyone know the best way to contact the chrome team about this sort of thing? — Ben Cull, Jan 16 '14 at 23:49
This thing making me angry and I cannot do anything about it — HP., Jan 17 '14 at 09:30
Darko just added an answer to this question. It worked for me. — celwell, Jan 18 '14 at 04:10
It doesn't remember the size you give it, and it also pops up when it detects an error (not just because of emulation). — blerik, Mar 17 '14 at 15:02
In version 32.0.1700.107, it starts off as "Show drawer.", then cycles between "Hide drawer." and "Show console.". (See inspector.js.) — deltab, Mar 31 '14 at 14:09
It seems that a combination of the answers below might be required as was the case for me. — qwertzman, Sep 01 '14 at 16:23

score 79 · Answer 1 · answered Dec 29 '13 at 21:24

79

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

answered Dec 29 '13 at 21:24

duXing

1,377
1
10
24

This is the solution that worked for me! Simple fixes are the best fixes – DirtyBirdNJ Oct 30 '15 at 19:07
23

That's not an answer, it keeps popping out everytime the page is refreshed. – Burjua Mar 18 '16 at 12:05
2

It's annoying press esc every time that you want to hide the console. Should be a way to have the console hide by default (with or without errors) – Yago Riveiro May 23 '16 at 10:01
If you get rid of it, how do you get it back? – Chris Dec 13 '16 at 09:39
Every version of Chrome seems to keep making minor changes. – Stephan Jan 12 '22 at 17:15

score 70 · Answer 2 · answered Aug 21 '14 at 14:52

70

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!

"Toggle emulation" button highlighted in red

answered Aug 21 '14 at 14:52

jiminy

1,612
3
18
21

9

Thanks, this was the solution for me! – kipusoep Sep 10 '14 at 15:24
3

This is the one that fixed my issue. – triptych Sep 16 '14 at 18:00
1

Thank you - saved me loads of annoyance. – Brighty Oct 16 '14 at 10:19

score 37 · Accepted Answer · answered Jan 17 '14 at 13:25

37

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!).

answered Jan 17 '14 at 13:25

Darko Romanov

2,776
2
31
38

1

I also had to uncheck 'Emulate Screen' – Kyle Suss Jan 27 '14 at 17:59
Under the emulation tab, enabled options are flagged with a blue check on the left side. – FbnFgc Mar 06 '14 at 14:33
5

There is no emulation tab. – The Muffin Man Nov 01 '16 at 21:03

score 23 · Answer 4 · answered Mar 05 '14 at 10:38

23

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

answered Mar 05 '14 at 10:38

nirz

237
3
8

1

Thanks, this was driving me nuts – Greg Apr 18 '14 at 18:10
4

This moved, now you just click the three dots in the upper right and Show/Hide console is a menu option. – Noumenon Sep 30 '15 at 01:13

score 20 · Answer 5 · answered Dec 09 '15 at 13:39

20

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:

answered Dec 09 '15 at 13:39

Celt

2,469
2
26
43

Hallelujah, out of ALL of the above, this worked for me. – Chris22 Mar 21 '16 at 04:16

Stephan · Answer 6 · 2016-04-05T20:11:57.420

9

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

edited Apr 05 '16 at 20:11

answered Aug 06 '15 at 03:23

Stephan

332
5
13

As of August 2015 (Chrome Version 46.0.2478.0 dev-m (64-bit) on Windows), this solved the issue for me, thanks! – Dr. Gianluigi Zane Zanettini Aug 15 '15 at 16:24
This is the most up to date answer – bheussler Sep 10 '15 at 19:19
1

I believe the reason the majority of people randomly getting this drawer open is because they are hitting the escape key. The Escape key will toggle this window when the developer console is open. – Stephan Sep 11 '15 at 20:16
2

That icon is no longer there. – Uyghur Lives Matter Mar 04 '16 at 16:39
For me it seems to want to pop back open every time I refresh the page, it's very irritating because I have the tools docked to the bottom and it blocks out almost the entire area. – Jake Anderson Jun 16 '16 at 21:46

score 6 · Answer 7 · answered Jan 21 '14 at 15:47

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.

score 2 · Answer 8 · answered Sep 19 '14 at 16:54

2

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

answered Sep 19 '14 at 16:54

Iman

17,932
6
80
90

score 1 · Answer 9 · answered Jan 24 '14 at 08:38

1

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

Deselect the options below

The spoof user agent

answered Jan 24 '14 at 08:38

André Snede

9,899
7
43
67

score 1 · Answer 10 · answered Oct 10 '20 at 19:52

1

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.

answered Oct 10 '20 at 19:52

user1497119

443
6
19

score 0 · Answer 11 · answered Oct 15 '14 at 09:04

0

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.

answered Oct 15 '14 at 09:04

Rico

86
3
12

score 0 · Answer 12 · answered Oct 22 '14 at 20:33

0

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

Hide console

answered Oct 22 '14 at 20:33

CAPS LOCK

1,960
3
26
41

score 0 · Answer 13 · answered Jun 11 '23 at 14:14

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.

score 0 · Answer 14 · answered Jul 28 '23 at 21:24

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.

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

14 Answers14

Linked