75

Since recent updates, Chrome DevTools now shows a useful device emulator:

enter image description here

Which is great, but I'm not emulating anything:

  • All the options in Device are unticked
  • All the options in Media are unticked
  • All the options in Network are unselected
  • All the options in Sensors are unticked

Clicking the 'reset' button also still shows the emulation bar.

How can I turn Chrome DevTools device emulator off when I am not using it?

Nolan Amy
  • 10,785
  • 5
  • 34
  • 45
mikemaccana
  • 110,530
  • 99
  • 389
  • 494
  • The answer in [http://stackoverflow.com/questions/26308572/google-chrome-developer-tools-disable-black-emulation-options-ruler](http://stackoverflow.com/questions/26308572/google-chrome-developer-tools-disable-black-emulation-options-ruler) is more clear. – letiantian Mar 31 '15 at 07:03
  • Thanks @letian I have marked this as a duplicate. – mikemaccana Mar 31 '15 at 12:30
  • 1
    They should have put it somewhere else, to make it more intuitive, because many people ,as I see, have problems finding it. – Islam Murtazaev Dec 03 '18 at 11:06

2 Answers2

154

Open Developer Tools and click the "phone" icon - upper left corner. This toggles the ruler on and off.

Toggle device toolbar screenshot

jxramos
  • 7,356
  • 6
  • 57
  • 105
Havel
  • 1,556
  • 1
  • 10
  • 2
  • 1
    what do I do if there is no phone icon? it's vanished! – Hippyjim Oct 24 '14 at 19:14
  • It says "toggle device toolbar" on my CHrome – Mawg says reinstate Monica Aug 06 '16 at 08:59
  • 2
    Thank you! I must have clicked that button by accident, because I've been wondering what those borders were for MONTHS. Shrinking the page content was the straw that broke my camel's back. – Paul Sep 26 '17 at 20:44
  • 1
    Just added a screenshot from Chrome in Windows. I was trying to press the select elements button and must have unknowingly clicked that button too thinking I hit some stray keyboard combo I was unaware of. – jxramos Jan 23 '18 at 20:26
  • 7
    The **UX crime** the Googlies are committing here is that a button on ONE screen controls the layout of ANOTHER screen. – Bob Stein Sep 01 '18 at 20:51
  • That feeling when you run into this issue and found you already upvoted this over 2 years ago. :-/ – CaptRespect Oct 17 '22 at 14:06
  • 1
    Such a UI fail. Been wondering about this for months. OK, I'm a casual user, I admit, so I waited to google this and find this SO. But why can't they put "Turn off device toolbar" by the control(s) for the device toolbar, @Google Chrome?! – mhd Apr 02 '23 at 14:21
20

You can also use the keyboard shortcut.

OS Shortcut
Windows Shift + Enter or Ctrl + Shift + M
Mac Cmd + Shift + M
shelleybutterfly
  • 3,216
  • 15
  • 32
jaredwilli
  • 11,762
  • 6
  • 42
  • 41
  • i don't know why i didn't think to just try Shift-Enter, a lot of apps do full-screen/windowed toggle that way. anyway, this is way better than having to click an obscure tiny button that doesn't even catch your eye. thank you for posting it! – shelleybutterfly Jun 06 '22 at 02:15