Develop Reference

Inspect element without right clicking in Chrome

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

How to inspect an element in Chrome that only exists in DOM on Javascript event

I know that chrome has a ":hover" state in the inspector for this, but it does not trigger the event.
As far as I can tell the markup that I want to inspect is written in the DOM after a jQuery .hover() event. And is immediatly removed from the DOM when my mouse leaves the element that is targeted by the .hover() event.
Is there any way to force this open, assuming I can't write in the Javascript files that hold the function that does this (but I can access the rest of the files and can read the unminified JS).

In the Chrome developer tools tab "Sources", you have a roll out on the right labelled "Event Listener Breakpoints". Open stack "Mouse" and activate "mouseenter". The window/ javascript then gets "paused" when you hover an element while you can switch back to the "Elements" tab and inspect the dom.

HTML Inspect element changes layout

I've been noticing some problems with chrome and the inspect element functionality.
When the page I'm currently developing loads, some elements are misplaced (The text in this case):
Whenever I right click and select inspect element on the container of the misplaced element:
The element gets then magically placed as it should be:
You may have noticed I'm using nvd3.js, however this has happened to me before, and without nvd3.js. I don't think it's a nvd3 problem (I may be wrong).
My question is: Does the "inspect element" of chrome trigger some sort of recalculation of the layout?
Thanks in advance.

Youre Using .resize() or css media queries and when you click inspect element and console window opens (fixed in bottom part of chrome) youre screen resizes and some media query or .resize() funcion affects text alignment

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.

How do I debug and inspect things that change on response to mouseclicks or focus changes?

I'm currently toying around with some autocomplete form fields, and am finding it very hard to inspect the generated drop down items. As soon as I click on the "inspect element" button or try to right click on the dropdowns, the original autocomplete input runs an onclick event (or something that triggers on a focus change) and hides, deletes or otherwise modifies the element I was trying to inspect.
Is there a way to work with the debugger so that the mouseclicks and other commands I give to it don't get intercepted by the script I'm trying to debug?
I currently have this kind of problem on both Firebug and on Chrome's inspector. The only solution I can think right now would be setting some smart breakpoints inside the appropriate event handlers but that is hard to do if I don't know what event handlers to look for or where they are hidden in the original code...

You could set a breakpoint and inspect after it is triggered, I have noticed that freezes the DOM.

You need to use breakpoints. As far as tracking down what's happening where, Chrome's "Call Stack" window can be very helpful.
Cheers

In Firebug you have a Break on next item in Script panel. Since Firebug 1.10, there's a keyboard shortcut for this: Ctrl+Alt+B on Windows (it works even if focus is in the page, not in Firebug).
You'll probably need to have Script panel focused in Firebug since this is a shared shortcut for Break on... which differs in each panel.
It generally freezes the DOM although it's not 100% reliable.
It's also not ideal because it will stop at any JavaScript execution, and will not be helpful if there is some aggressive polling in the background, or global capturing of keyboard events. Anyway it's still better than nothing.

Chrome pauses Javascript execution on F8; it took a bit of repetition but pressing F8 at the right time prevented JS from defocusing the element.

If you are having problem selecting the element, you can try cmd + shift + c on Mac to select the element without right clicking it.
If its DOM manipulation problem, you might try to force state on the input element by right clicking on the element in the Elements panel and set force state to focus.

Open the docked DevTools first (the undocked approach will not work due to the OS limitations.)
Once the autocomplete box is displayed, right-click it and select "Inspect Element" in the context menu. The focus will move to the DevTools but the autocomplete box will still be shown (this worked for me on Linux, tip-of-tree Chromium, M25. Your mileage may vary.)

/**
* Utility to freeze actual DOM state, for example dropdown menu
*/
function easyBreak() {
function doBreak() {
// put breakpoint here to freeze actual dom and write to console easyBreak()
// you have 3 seconds to get to desired state
var a = 0;
}
window.setTimeout(doBreak, 3000);
}

You could use DOM breakpoints.
I'm having a similar case here : I want to inspect dropdown items that only show when the input has focus.
On Chrome, I right-click on the parent element and choose Break on > Subtree modifications.
It will pause - like it does with JS breakpoints - anytime the DOM changes within that parent. You can then inspect the children while the DOM is frozen.