32

I frequently use the overrides tab in Chrome Developer tools to emulate other device such IPhone and IPad, but after upgrading to last version (32.0.1700.76 m) everything in the overrides tab is gone and replaced by a checkbox saying "Show 'Emulation' view in console drawer".

Checking this checkbox does not enable a 'Emulation' view in the Console drawer. The "Show Console" button seems to be disabled.

The new Overides tab in the Settings Pane of Chrome Dev Tools Console Tab with no Emulation view

Mikael Engver
  • 4,634
  • 4
  • 46
  • 53
  • 2
    In the next official version of Chrome (33.0.1750.117 m), that has been pushed out recently, the "drawer" with Emulation tab now appears on the Console tab as well. Open it by pressing Esc on the Console-tab or click the "open drawer" button. – Mikael Engver Feb 26 '14 at 09:03
  • 1
    Feel free to star this issue: https://code.google.com/p/chromium/issues/detail?id=345477 – Andy Ray May 22 '14 at 18:45

7 Answers7

48

See here for more information.

Before starting open the dev tools console (on a Mac cmd-option-i)

  1. Open the Settings panel within the dev tools console (click gear icon on right side)
  2. Check "Show 'Emulation' view in console drawer (looks like you have already done this step) and close screen
  3. Switch to the sources tab of the dev tools console
  4. Press Esc to bring up a screen that slides in from the bottom
  5. Select the Emulation tab on that second screen

There is also a note in the link above stating:

Note: Emulation tools within DevTools were previously contained within an Overrides pane inside the Settings panel. The Emulation panel is the new Overrides pane.

SnapShot
  • 5,464
  • 5
  • 42
  • 40
  • That did not work in Chrome version (32.0.1700.76 m). I think it was a bug in that version. When upgrading to Chrome Canary (Version 34.0.1789.0 canary) it worked as it should. – Mikael Engver Jan 17 '14 at 10:08
  • 1
    Glad you have it working. My version of Chrome (on OSX) is 32.0.1700.77 - one up from yours and it is working on mine so maybe this issue was fixed in the .77 update. As another possible option instead of switching to Canary you could check to see if .77 is available and fixes this issue. – SnapShot Jan 17 '14 at 10:44
  • 2
    OMG. thanks so much for this answer. That Emulation tab being the default in the console drawer was VERY annoying. – Scott Jan 20 '14 at 19:20
  • Yes your solution works in Chrome (v32.0.1700.76 m) when you use the Sources tab. I was confused since the "Show drawer" button was disabled in the Console tab. In the later version (34, Canary) of Chrome the drawer can be opened from the Console tab as well. – Mikael Engver Jan 21 '14 at 08:43
  • 14
    what is wrong with those google people... why would you put it there without any freakin documentation?! – Alex Feb 05 '14 at 08:50
  • 1
    If the bar is stuck to the bottom of the screen, move the mouse to the right of the tabs, then click and hold to drag it up. Took me a moment to figure that out, believe it or not. – redburn Jul 30 '14 at 10:45
  • This is the more specific link: https://developers.google.com/web/tools/chrome-devtools/device-mode/device-input-and-sensors – Andrew Feb 09 '18 at 02:37
17

After installing Chrome (or the bleeding edge version Chrome Canary) you should be able to do proper mobile emulation within Chrome's Developer Tools. I usually activate them by Right Clicking > Inspect Element

For visual learners like myself, I just included a full screenshot.

Enabling Mobile Device Emulation in Google Canary via the "Drawer"

Eric Kigathi
  • 1,815
  • 21
  • 23
7

I'm running Google Chrome version 58.0.3029.110, where the Emulation is no longer available, but all of the features are still available:

Device & Screen

Press Ctl + shift + m or click on Toggle device toolbar, you'll find these in the upper middle of your browser tab. (You'll find more options in the More option section.)

Current location of the former device as well as former screen tab

User Agent & Sensors

User Agent is now renamed as Network Conditions and can be found in the Customise and control DevTools > More tools > Network conditions. Sensors can also be found in the same location (ie. Customise and control DevTools > More tools > Sensors).

Current location of the former User agent as well as former sensors tab

Muntashir Akon
  • 8,740
  • 2
  • 27
  • 38
3

"Show Emulation view in console drawer" message confusing.

Generally our chrome dev tool bar tab selected as a console tab or we try to find out in console tab.

Problem is , Console drawer will not opened when your console tab selected.

dilipprajapati
  • 71
  • 1
  • 5
1

I seem to have solved it. When I upgraded to Chrome Canary (Version 34.0.1789.0 canary) the problem was solved.

http://www.google.co.uk/intl/en/chrome/browser/canary.html

enter image description here

Mikael Engver
  • 4,634
  • 4
  • 46
  • 53
1

I run into this problem, and it took me a while to figure it out, despite the answers here. I am on Version 37.0.2062.103 m. First, in this version, there is no Override pane, neither "Show 'Emulation' view in console drawer either. It is turned on by default (I guess), but a little bit hidden. The key is to first press ESC key in dev mode (now I'm not sure if it's on by default). You should see a pane with 4 "tabs" including "Emulation" at the bottom. I quoted tabs because it appeared more like a status bar to me and I keep clicking it and nothing happens, until I accidentally resized the pane.

newman
  • 6,841
  • 21
  • 79
  • 126
0

Sweet... This behaviour (running device emulation and debug mode) works in Chromium on Linux Ubuntu by hitting F12 and then the drawer icon. :)

More info: Some more info, including screenshots

Community
  • 1
  • 1
user1956808
  • 11
  • 3