Inspect element without right clicking in Chrome - javascript

When I inspect html/css on a website, I usually open the chrome developers panel ctrl+shift+I → right click context menu "inspect" so I can highlight that class
however, sometimes I'm trying to inspect an element that is sensitive to "right clicks" events , e.g. if I right click an item on the website functionality changes
Example:
so I can't inspect an element
Normally I inspect elements like this (e.g. stackoverflow)
How do you inspect an element without using the right click button?
Normally I would have to just dig through the chrome developer's panel elements and just go one by one to find said element, which takes a really long time
I must be missing something important here about chrome's inspect element tools.
Could someone enlighten me here a better workflow / maybe chrome extension tools?

Try pressing ctrl+shift+c. This will open the dev tools in element selection mode, allowing you to left-click on elements to jump straight to them in the elements view.

You can press Ctrl+Shift+C to enter a mode where you can mouse over elements and it will inspect it. With your mouse over the element you want to inspect, just press Ctrl+Shift+C again and your element will be selected in the developer panel.

You can open the dev tools on a different windows and refresh your page or use firebug.
or use Firefox

Related

Chrome Dev Tools - Can you undo changes in the console?

If you enter a command in Chrome Dev tools (which could be one big block of code) and hit enter, is there a way to "undo" changes made to the DOM? Or do you simply have to refresh the page?
I too was looking for an answer to this question beyond "refresh the page"... Stumbled across this solution:
Enter Chrome dev tools (CMD + Shift + I on Mac)
Click the three dots aligned vertically to get the settings menu
Hover over "More Tools" then go to "Changes"
On the changes window you can see all the changes made during your current DOM editing session - to revert them all, simply click the
undo arrow in the bottom left...
See the visual below
Reset all changes made in Chrome dev tools
Depends on what that code actually does. For example if you change something in the style (css) or structure (html), if you refresh it will show the original page. But if that code changes a cookie value, refreshing is not enough, or even closing the browser and opening again.

Examine Element That is Removed onblur

So I have an element that is dynamically added to the page with Javascript. After it is added, it is granted focus.
I want to examine the element in chrome dev tools, but the issue is that it has a onblur event handler that removes it from the DOM. So basically when I click on the dev tools to select the element, it is removed. An example can be seen here:
http://jsfiddle.net/MSZEx/
HTML:
<div id="container">
<button id="the_button">Click me to show field</button>
</div>
Javascript:
$("#the_button").click(function() {
$elt = $("<input>").attr("type", "text").attr("id", "text_field");
$("#container").append($elt);
$elt.focus();
$elt.blur(function() {
$elt.remove();
});
});
In the example I would like to be able to examine the input element that shows up once the button is clicked.
All of these answers didn't really work for me.
At the time of writing (Chrome 92) you can use the Rendering settings in Chrome Dev Tools:
Open Chrome Dev Tools > Click the kebab menu > More tools dropdown > Rendering > Check emulate a focused page
This keeps the focus enabled whilst playing around in Chrome Dev Tools 🎉
Edit: 23/03/2022 - this is still the case in Chrome 99
I got it working by right clicking the parent node in the tree without focus & then
-> Break on... -> Subtree Modifications
Note that a page refresh doesn't clear this out, so might have to close & reopen the inspector if you have forgotten where you put your break point
Rightclick the node in the element tree -> Break on... -> Node Removal.
The debugger will now break before the node gets removed.
The trick I like to use is
Open up the sources panel
Display the tooltip
Use the keyboard shortcut to pause script execution. (Hover over the pause icon to find out the keyboard shortcut)
When the script execution is paused, go back to the Elements panel and inspect the tooltip as you are used to
Another way is to open Chrome dev tools, focus the element in question in the browser viewport and then hit F8 which will stop all JS from running (without losing focus), leaving the element even after it loses focus till you enable JS again. This way you can inspect the element in the DOM tree and proceed from there.
Enable JS by hitting F8 again.
How about you just simulate the click from the console?
Open your f12 tools on the website, get the elements id and do your own $("#the_button").click(). The console will keep the focus so your element won't blur. You can then go to the elements tab and look at the css.
"but what if my Javascript was very very long, and it was minified" <- In this case, you could try this (use F12 to trigger):
$(window).keydown(function(e) { if (e.keyCode == 123) debugger; });
// Or in vanilla JS:
window.addEventListener('keydown', e => { if (e.keyCode == 123) debugger; })
in this fiddle
As suggested by this SU question
I don't know if it works in chrome, but it does in Firefox when you already have a console open.
According to the
Chrome DevTools Keyboard Shortcuts page, Ctrl+Shift+C toggles Inspect Element Mode, which allows you to hover over the element without it disappearing, and this will sync with the Elements view in the DevTools. However, as soon as you click on the element, it will still disappear.
You can combine this with the other answers to break immediately (using F8 or Ctrl+</kbd> to pause script execution) or on modification of the element/subtree (which should now be shown in the Elements view).
In Firefox this does not work, but you can still use the trick with setting a breakpoint (Debugger -> Event Listener Breakpoints -> blur). You can then select the element while the page is paused.
If putting a break-point is an acceptable solution for you (which it seems to be according to comments) then you can add a debugger; statement to automatically halt execution. For more information check https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/debugger

How to find elements that are out of page

I'm trying to repair a slideout javascript menu. The problem is, that the 3rd level sub-menu doesn't show although it should. I am sure it has something to do with wrong positioning and the element is showing somewhere outside the page.
Now my question is: is there a browser extension, or some other way to outline an element that is beyond borders of the page?
Thanks!
EDIT: Okay that's weird.. according to the coords it seems to be in the correct position, it also has proper dimensions, is visible and yet I can't see it.. am I missing something?
Yes, use firebug (in Firefox) or Chrome Developer console (CTRL+SHIFT+C) (in Chrome), locate your menu on html tab and checkout the computed styles for that element to see where is it. You can also type any styles you like and see how it affects your menu.
For Firefox, Firebug allows you to inspect the DOM; You can use the HTML tab to find your missing element. When you click on the element, Firebug will highlight it and overlay guides showing you where it is. It will also give you positioning information in the Layout tab on the right, and you can reposition the element by changing its style using the Style tab.
Chrome developer tools already has this built in; Go to Settings->Tools->Developer Tools (or use the keyboard shortcut Ctrl-Shift-I) to activate it. It's very similar to Firebug.

Using Firebug to show DOM Hierarchy

I am currently using FireBug to debug my javascript and HTML code. I was wondering if anyone knows of a feature where I can mouseover my generated web-page and it will display the DOM hierarchy of where my mouse is currently located. So if I have nested floating div elements. And I mouseover one of the divs, it will show the ID of that div, the id of its parent, the id of its parent's parent etc.
Doesn't clicking the inspect button (second from the top-left on Firebug) do something a lot like that?
google chrome, right click and select 'inspect element'. It brings up the dom tree with the clicked on element highlighted
I am not sure of this is what you are looking for. When you rightclick and use "Inspect Element", you will see the DOM and everything else in firefox.
Right click, Inspect Element also works in Firefox / Firebug
You can also use F12, Ctrl + B in IE 9.
This FireFox extension does exactly that
Web Developer Extension
You can set it to outline elements as you hover over them and it will display their info, as well as their position in the dom tree.

How can I copy dynamically generated source HTML from the web?

For design purposes, I want to copy the exact HTML that is created by some JavaScript after the page loads. Firebug shows me what's going on, of course, but I really just want some static text that I can copy and paste at will.
The "View Source" menu of the Web Developer Firefox Add-on offers the "View Generated Source" tool.
That can be done with the innerHTML or outerHTML properties. Or just in Firefox, select the part you want the source code from and select View Selection Source from the context menu.
You can copy the HTML out of firebug (or the IE8 developer toolset) into your favourite text editor.
In Google Chrome, choose Inspect Element, then you can right click and "Copy as HTML"
For IE/firefox, following bookmarklet works:
https://www.squarefree.com/bookmarklets/webdevel.html#generated_source
For google chrome, right click on any element and choose 'Inspect Element' option. It will show the position of element in DOM. Now right click on '
For opera, right click on any element and choose 'Inspect element'. This will start opera dragonfly. In dragonfly window, Click on 'Expand the DOM tree' button (first button with a dot and two arrows) and then 'export the current DOM panel' button (second button)
In IE, open the webpage and press F12 to open developer tools. Click View->Source->DOM(page) or shortcut Ctrl+Shift+G in developer tools window. This will show the complete currently visible DOM.
For firefox, alternative is Web developer toolbar extension and choose View Source->View Generated source in it.
you could also write a perl script with the Library mechanize.

Categories

Resources