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.
Related
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.
Google Chrome dev tools no longer lets me re-position it to the bottom of the page instead of the right side. Anyone know how I can re-enable this function? It makes it very difficult to use it in certain screen layouts.
I'm using Chrome v 33.0.1750.154 m
Windows 8.1
Interestingly, the opposite is true in Canary(v 35.0.1900.0 canary). In canary dev tools are stuck on the bottom and can't be re-positioned to the side.
Is there some check-box I accidentally clicked or what??
Currently I can only dock or un-dock the dev tools panel, but the option to change it's position inside the window is gone.
If you click and hold the dock/undock button you get the option to reposition.
Cmd-Shift-D also works, as I just found out
Some semi-recent update to Chrome now places an overlay on my webpage when paused at a breakpoint. I'm specifically trying to view the state of my page markup at this point, and the overlay is hiding exactly what I want to see!
Is there a way to turn off this markup?
Or is there a way to revert Chrome to a version that doesn't have this mis-feature?
Now there is an option in Inspector's settings, just uncheck Disable paused state overlay: Go to Settings (F1), the Preferences tab (the first one) and it's the last option under Appearance (top left).
It is very usable with the setTimeout(function(){debugger;}, 5000); trick to inspect elements that are visible only on hover.
I've run into this same issue, and I discovered that if I switch to the "Elements" tab and enable the element inspector (the button in the lower right with the magnifying glass icon) then the overlay is hidden. As you might expect, when you disable the element inspector again the "paused in debugger" message comes back, so I usually just leave the inspector enabled while I'm stepping through the debugger.
It may not be intuitive, but at least it works. If there are any other alternatives, I'd love to hear them!
If you see "Paused in Debugger" popup on Chrome 90.0+, then make sure to enable this setting under Preferences -> Appearance in Chrome Dev Tool to disable the popup.
I'm not sure how I did it, but when I right click on the page and choose Inspect Element in Google Chrome, it's taking up the entire page. I think it's supposed to be a split screen like Firebug.
Q: How do I split the Web Inspector page?
You need to click on the icon "Dock to main window" on the right top corner.
Can you drag the window down to resize, split it into its own window, or maybe it already is in its oown window? There is an option to dock it in the page.
This is really annoying. The bar which allows you to minimize or maximize or window-ize is not there at all. This is the only program that has ever done this to me on mac.
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'.