Inspecting drop down menus in new Chrome

Question

I'm on Chrome Version 41.0.2272.101 m (newest), and this update is messed up. They put it, when you have inspector open, that any DOM change will flash with purple on the changed element (like in Firefox), but now I cannot inspect any hovered object (also like in FF, which is why I don't like to use it when doing front end developing).

I'm talking about js triggered events, like superfish for instance. Before, I could hover the menu, and cover the menu with the inspector, and the menu would stay opened, and I could go in the inspector see what pseudoelements are created, change the paddings and such directly, and see the change. Now, when I hover the menu, and right click to inspect it, the menu closes, and I cannot inspect it!

I tried dragging the inspector over, but nothing helped. This new 'feature' is annoying as hell. Is there a way to inspect js triggered events, without putting break points on elements (which works, but is kinda pain in the ass)?

Answer 1

Hover over the element with your mouse and press F8 (this will only work in Chrome) to pause the script execution. The hover state will remain in visible to you. If you're on a Mac, you may have to open system preferences and check off "Use all F1,F2,etc" check box (Or simply use fn + F8).

Sometimes it only works if you are in the Sources tab of the inspector.

*Yes, you should be in the source tab and MOST IMPORTANT is you should close all the opened tabs in the Sources tab before you press F8(win) or Fn+F8(mac). *

Answer 2

Depending on the menu element type, I ran into this issue with drop-down input menus. The reason it's disappearing when I inspect it, is because a blur or focusout event is always triggered on the element when I click anywhere outside the element.

One way I was able to inspect the element is to prevent these events from being triggered is by removing their event listeners:

• Inspect the input element on Chrome
• Go to the Event Listeners tab and remove the blur or focusout event

Once the event listeners are removed, you can open the menu and inspect it without disappearing

Answer 3

In Chrome, press F12 to open the developer console, then click on Settings (cogwheel icon) or press F1:

then find & check the "Emulate a focused page" option.

Update: as noted in comments, this option is now in another place. See this answer.