I've got an HTML element that has a CSS hover-state. There's a bug with the margin or padding on hover and every time I mouseover, the contents of the element slide a little, its annoying.
I'd like to debug using FireBug or Chrome Dev Tools, but a common problem I've had with these tools is that after I select the element from Firebug/devtools I obviously need to move the mouse back to the dev tools and the hover state is no longer enabled.
How do I inspect/debug an HTML element using these tools with the element in its hover state?
Chrome Dev Tools has a built-in :hover state selector in the Elements > Styles panel. You can toggle other pseudo-classes (like :active) there as well.
For testing :hover states in Chrome
For testing :hover state in Firefox (You need firebug add on)
Here's a screen shot for firebug & those not sharp enough to see agriboz's comment (like me)
Now you can see both the pseudo-class style rules and force them on elements.
To see the rules like :hover in the Styles pane click the small dotted box button in the top right.
To force an element into :hover state, right click the element.
Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.
Related
In Chrome devtools, when hovering over a DOM element, the size of the element in the viewport is highlighted. Recently, this highlight is not shown all the time, but rather quickly removed.
How can I make it so that I always see the highlight of an element in the viewport while my cursor is hovering over a DOM element in the Elements tab in DevTools?
The only thing in the DevTools settings for the Elements tab is "reveal DOM node on hover", but checking or unchecking this checkbox does not affect anything: the behavior is the same: I hover over the DOM node, the size of the element appears in the viewport for a short time, then disappears.
I turned off the React Developer Tools 4.27.1 extension and the backlight stopped disappearing.
For example I have clicked a button and it has been selected in inspector. I don't fire any events on this button if inspector is opened. Just select elements I want simply clicking on them in document. This is how dragonfly works in opera. I wish to use chrome for all purposes but inspecting DOM is tiring for me without this feature. Or maybe i have missed it in settings?
I found the solution. In inpector window in top-left corner we have loupe button. Just press it and them on DOM element on page.
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.
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.
If give a html table element a tabIndex > 0 then I can tab into that element. If I click on a table element where tabIndex > 0 then I would expect the focus to change to that element. But in IE it doesn't seem to do it while in Firefox and Chome it does.
If I do the same with a div element then this does focus on mouse click in IE, Firefox and Chrome.
So it seems that IE doesn't automatically focus a table element on mouse click.
Can anyone confirm this? Also is there a workaround? I could capture the mouse click and call focus myself, but IE seems to try and center the element on the screen when focus is called. This looks bad in my app.
Thanks,
AJ
Check out this article: http://nemisj.com/focusable/
Basically, the browsers all differently implement focus on traditionally "non-focusable" elements. With IE, you can use a click event instead (using conditional code and browser detection), or implement one of the workarounds suggested in the linked article.