Sometimes when I command the body tag on a page I am inspecting to expand (by clicking with the mouse or using the arrow keys) it does not expand. As you can see in the screen capture the arrow next to the body tag is pointing downwards but no content is showing. I know that there is content in the body tag. The head tag expands just fine.
When this happens problem occurs I have found that a workaround is to open the url in a new tab. When I do that, I can again expand the body tag and enjoy the full power of the Chrome Dev Tools.
This happens very often. During the last week I have found myself having to reopen the page I am inspecting several 10s of times a day.
Related
Earlier when i used to hover on a request in network tab, the tooltip used to show the full url, but i am not able to do that now. is there any way to enable it:
Open network panel settings (the second cog more to the right on your screenshot) and check/uncheck "Use large request rows". After that the URL preview on hover started to magically work for me again (I had the same problem). If not, you can at least keep the large rows on as a last resort.
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
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.
Is there a setting to change the click behavior in the scrollbar to page up/down instead of jumping to the location in the file? This is the usual scrollbar behavior in almost every other applications except maybe unix applications.
A suggestion could be:
Left click: page up/down
Right click: jump to location
There is a setting for this now:
Editor: Scroll by Page
Controls whether clicks scrolls by page or
jumps to click position.
With that setting enabled, the editor will scroll by one viewport page when clicking anywhere above or below the scrollThumb. With it not enabled (the default) it will scroll to the position in the scroll track where you clicked.
This behavior does not currently exist. I suggest opening a feature request on github.
If, like me, you've been brought to this page despite putting "Visual Studio" into your web search, you can modify this behaviour in the full blown Visual Studio as follows:
Tools > Options > Text Editor > All Languages > Scroll Bars
Under "Behavior", toggle between bar mode and map mode
More information can be found by reading the Microsoft Docs for this feature.
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