Chrome devtools showing this popup with element xpath near selected element that is highlighted (div#mainbar). How to hide that popup and only highlight element?
In 2020 they've added so much info into that popup - so it has become a real nuisance when inspecting the page.
Partial solution:
Hold down Ctrl or CMD key (depending on you OS) while hovering over elements and the popup will not be displayed.
Credit goes here
As of December 2017, there is no setting for removing that popup. It seems like an uncommon use case, so unfortunately I don't think the team would implement that option.
Related
I am debugging a big DOM with devtools:
I would like to "boomark" this div, so I can jump to it again easily.
It would be great if this bookmark would survive a page reload.
Is there a way to do this?
I'm not sure it qualifies as "Bookmark", but you can use the "Break on" mark, which survives reload and guides you to the right line, even when the elements are folded.
Break on mark
Break on DOM changes from google
With Bookmark no until and unless there is an href to your selector(which is not there in your case).
If you can add then this link can help you How to scroll an HTML page to a given anchor
If you can not use href then though scripting in your dev tools you can do everytime you want to scroll like below
document.querySelector('.panel-heading').scrollIntoView();
The other answers here as I write this will work. Yet another option (sorry the screenshots are so large):
Right click the element in the Elements panel
Select "Store as global variable"
The console will slide open, revealing the automatic name assigned to the element (temp1, temp2, etc)
Whenever you want, you may now type that variable name into the console to have it log the element
Right click the logged element, and click "Reveal in Elements Panel" to have the elements pane open with that element selected
In the latest Chrome version (73.0.3683.86) there is a new feature which adds a tooltip to the Inspector tool which shows information about the hovered element. (see screenshot)
The question now is whether someone has already found out if this function can be disabled.
Very annoying. I don't believe you can disable it at the moment but if you hold down Ctrl/Cmd you can move around the page without it showing up.
I'm testing my HTML on accessibility. While navigating the HTML with the TAB key, the focus ring sometimes disappears because the element that has focus is hidden. At that point i can't tell which DOM element has focus.
Is there a way i can track in Chrome DEVtools which element has focus while TABbing through the page?
Update
Official documentation
As of Chrome 70, which released in August 2018, Live Expressions provide an easier way to track which element has focus.
Open the Console.
Click Create Live Expression .
Type document.activeElement.
Click outside of the Live Expression UI to save.
As of Chrome 71, which was released in October 2018, when you hover over a Live Expression result that evaluates to a node (as is the case with document.activeElement), DevTools highlights the node in the viewport.
Original Answer
Thanks for posting. Seems like a common and useful workflow, yet I've never thought about it.
While focused on the hidden element, evaluate document.activeElement in the Console.
Right-click > Reveal in Elements panel.
The DOM Tree is highlighting the hidden element.
Here is the demo, if you'd like to try it yourself.
P.S. I tweeted out this workflow from the DevTools account.
I have an autocomplete dropdown box for city names as,
When i try to inspect one of the option elements using right click and Inspect Element, the dropdown menu disappears and inspect element takes me to the original page's dom.
How can one inspect dropdown menus using firebug inspect element?
With the suggestions dropdown visible and DevTools opened, press F8 and switch to the DevTools. You will immediately break at the JS blur handler for the field, so the dropdown will not be removed, thus you'll be able to inspect its DOM.
Edit HTML right click menu Chrome Dev Tool
In Chrome Dev Tool you can Right Click on the input where you type the adress, Scroll down to "Break On..." and select subtree modifications.
Go back to your input and start typing. It should Pause the app leaving you with the open suggestions dropdown.
Can't speak for Firefox, but in Chrome developer tools you can trigger a state on an element manually by right-clicking on the element in the developer window, and choosing the appropriate item (i.e. ':hover').
Inspect the dropdown/input element and remove the "Blur" event from the "Event Listeners"
I am trying to inspect the div element that appears for Tipsy hover-overs on this page in order to change the width of the popup.
https://dl.dropbox.com/u/1531353/Misc/Docudocker/setups/tipsyCrashingApplication/force-html.html
However, when I press Shift+Ctrl+C, and then move my mouse to the Developer Elements panel, the Tipsy hover-over disappears, so I can't examine it any more.
How do I examine an element that only appears upon a hover-over effect in Chrome Web Developer?
I am using Win 7. I used firebug & it showed that tooltips were using the tipsy.css try to navigate to your tipsy css & change the width attrib though i couldnt get the bottom part of the tooltip in right shape. Hope it helps