Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Where is the new Emulation tab in Chromes console drawer?

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 ToolsConsole Tab with no Emulation view

like image 934
Mikael Engver Avatar asked Jan 17 '14 09:01

Mikael Engver


People also ask

How do I add devices to Chrome emulator?

Chrome let's you add new emulated mobile devices by opening the Developer Tools pane (View > Developer > Developer Tools), going to Settings (F1) then Devices and clicking the Add custom device button.

How do I run a script in Chrome console?

Open Chrome, press Ctrl+Shift+j and it opens the JavaScript console where you can write and test your code.

Where is the Console tab in Chrome?

To open the developer console in Google Chrome, open the Chrome Menu in the upper-right-hand corner of the browser window and select More Tools > Developer Tools. You can also use Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux).


2 Answers

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.

like image 119
SnapShot Avatar answered Oct 19 '22 11:10

SnapShot


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"

like image 20
Eric Kigathi Avatar answered Oct 19 '22 13:10

Eric Kigathi