This just appeared in the top left of my window when I run Chrome Inspect.
What is it called and how do I get rid of it?
That is "device mode" mobile/layout emulation. The key to disabling it is finding the phone icon, usually at the top left of the normal inspector window. The icon should be blue while it is active.
In this image, you can see it at the bottom right:
The disable icon on the top left looks promising, but only turns off the emulation of a specific mobile device; it doesn't actually close the device mode view.
Related
Do any one knows how to make sure that extensions work in popup window as well.
I have my chrome browser[highlighted with RED rectangle box in the picture], I wanted to capture the full screen of popoup windows[which is below to chrome highlighted box]. Also to mention that popup page is very huge having big scroll in it [mentioned by blue arrow in the picture].
Its really important.
Right click the Google Chrome window on top and select open as tab, then the address bar opens with default options to the right and click the puzzle icon for your extensions :)
With the latest version of Chrome (v41), I seem to only have bottom and pop-out window options. Is there a way I can dock the Web Inspector to the side?
Yes there is a little icon on the right of the Inspector that docks to the side. See the attached screenshot
If you only see the bottom or pop out icon perform a long click on the icon to turn it into a drop down menu.
I need to right click on an element and go to inspect element.
I have tried to right click but since its a touch device emulator that action doesn't make sense, the dropdown doesn't appear.
It works fine when i am not in the emulator mode checking for things, but when i am in the emulator for touch devices (ipad, iphone, galaxy), I lose the right click.
How do it make chrome open that html tag just like the inspect element, so i don't have to dig through the html trying to find the element i want?
thanks in advance! :)
Left click and hold on the element in the emulation window.
The context menu will then appear, and you'll need to move your mouse to Inspect Element before releasing the click to activate it.
You can use either the magnifying glass in the top left corner of the developer tools, or you could turn off the touch sensor emulation by going to Emulation|Sensors|Emulate touch screen and turn it back on after you find your element.
I'm building out my jquery mobile app out and have been testing in Chrome. Its the best for me because the debugging is great.
I was using a TAPHOLD event but decided to go away from that for a swipe-right event.
Chrome actually registered the taphold, so I was hopeful that it would register a swipe right with the mouse. But I cannot get it to register unless I have to do something else... anyone?
By now the actual chrome developer tools (tried chrome 20) can emulate touch and swipe events.
You can activate that behavior through the tool options, accessible via the little gear-wheel in the bottom corner.
Just check "Emulate touch events" from the options. Then you can also swipe with your mouse.
In desktop browsers I tend to use the right mouse button testing swipes. It will open a context-menu but it actually works (I normally use Chrome 17 and Firefox 10).
For instance when left-clicking and then swiping on an image in Chrome or Firefox it selects the image and you are then moving around the transparent thumbnail of the image. But when right-clicking and swiping the swipe event is fired.
UPDATE
This update is pretty late to the punch but this just shouldn't be necessary anymore. In fact the Chrome developer tools (the ones I'm used to using) have gotten a lot better about emulating devices.
A lot of the answers here are old and out of date. As of Chrome 63, swipe is built-in as long as you are in responsive mode with developer tools open. So open Developer Tools (3 dots->tools->developer tools), then click the phone/tablet icon on the left to put Chrome into a mobile mode. Then if you left click and hold, you will see the cursor changed to a dot, and you can swipe.
Update: this appears to be enabled in Chrome by default (37.0.2062.120 as of September 2014) you do the following:
Open Developer Tools
Click the little phone icon next to the search icon in the upper left (next to the Elements tab)
In the Emulation tab on the bottom choose a device model from the drop down
Previous answer:
To get this working in the current version of Chrome (32.0.1700.107 as of Feb 2014) you do the following:
Open Developer Tools
Click the gear icon in the upper right
Select the Overrides tab on the left
Click on Show 'Emulation' view in console drawer
Close the Settings popup
Open the Console (button to the left of the gear)
Click the Emulation tab in the console (next to Console and Search)
Choose a device and click on Emulate (and click Reset to cancel emulation)
I would like to open chrome debugger in a separate window. Is this possible? How?
Internet Explorer opens the debugger in separate window when i press F12 key.
You have to press and hold the 'toggle window position' button in the top right corner and then release the mouse on the icon that appears below.
On newer versions of chrome, it looks like this:
I was driven mad by this recently. It seems you (now?) have to click and hold on this icon. Two widgets appear and, for me at least, the upper widget undocked.
I'm convinced in the past the button in the bottom left used to toggle
Click on the first icon in the bottom, left-hand corner (two rectangles) - 'undock into separate window'.