CODEWITHSUNDEEP
google-chrome
dingo_d
dingo_d

Reputation: 11690

Inspecting drop down menus in new Chrome

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)?

Upvotes: 182

Views: 226093

Answers (16)

Said Madi
Said Madi

Reputation: 1115

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

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

Dev tools Settings

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

Check Emulate a Focused Page Option

Upvotes: 109

xiaozheng wu
xiaozheng wu

Reputation: 11

The easiest way I found, was just to right click before clicking on the inspect button.

Upvotes: 1

Lucas Parra
Lucas Parra

Reputation: 19

Probably this is not very fancy but you can write this:

setTimeout(() => {
    debugger
}, 3000)

Then you have 3 seconds to open the dropdown and then you can inspect the elements. This is nice because works in any browser

Upvotes: 1

Ben
Ben

Reputation: 421

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

In Chrome 86 and above you can find "Emulate a focused page" option here:

DevTools >> Elements >> "Kebab" menu (3 vertical dots by the settings cog) >> More tools >> Rendering.

Alternately: With Devtools open: Hit CTRL/CMD+SHIFT+P to open the command menu HUD, enter "emulate a fo" to narrow the search results and enter (or click) to toggle the setting.

Upvotes: 32

Krishna Jangid
Krishna Jangid

Reputation: 5410

in my case i do following steps

  • Open developer tool or inspect page

  • click three dot button at top right

enter image description here

  • click on More tools -> Rendering

enter image description here

  • then check on Emulate a focused page option.

enter image description here

Upvotes: 5

Bojidari
Bojidari

Reputation: 155

I just used emulate a focused page and it worked like a charm

  1. go to settings
  2. go to more tools
  3. find Rendering
  4. find "emulate a focused page" and click the radio button

voala now you can inspect your select element

Upvotes: 8

mmohammad
mmohammad

Reputation: 2820

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 enter image description here

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

Upvotes: 227

Marco Floriano
Marco Floriano

Reputation: 349

On Windows, press F12 first, at the page with the menu, then point your mouse to the element menu (the menu will drop down), then press CTRL + Shift + C. Now you can inspect all the elements.

Upvotes: 0

icekomo
icekomo

Reputation: 9466

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). *

Upvotes: 191

raine
raine

Reputation: 1929

Only way that would work for me was doing setTimeout(() => { debugger }, 3000) in the console and opening the dropdown while timeout was running.

Pressing pause button in dev tools UI or F8 key to pause script execution would both close the menu.

Upvotes: 24

user2451016
user2451016

Reputation: 1961

None of the above referred remedies worked for me. As our drop down (React based) will close on any single click (right or left) So we found out the below workaround:

  • In Chrome Open developer tools
  • first click on the drop-down in collapsed state & let it expand with options
  • then under the element section, right-click on the div node (make sure not to left click before right clicking), which contains details of the drop-down items
  • Then select option 'Expand Recursively'
  • Then required details were shown enter image description here

Upvotes: 1

Dmitry Shvedov
Dmitry Shvedov

Reputation: 3296

In Firefox

In Inspector, right click on a node that contains the dropdown, select:

Break on... > Subtree modification

This will pause execution the moment dropdown is... well... dropped down.

Upvotes: 9

Raja David
Raja David

Reputation: 314

Now, when I hover the menu, and right click to inspect it, the menu closes, and I cannot inspect it!

I faced the same issue and what I used was Expand recursively option on chrome dev tools:

The steps are:

  1. Inspect the dropdown field
  2. Find the dynamic DOM (the purple highlight)
  3. Right-mouse click on that dynamic DOM
  4. Choose Expand recursively: enter image description here
  5. We can see all elements are there

Here is a demo:

enter image description here

Upvotes: 11

Adam Libuša
Adam Libuša

Reputation: 733

You can set an interval that writes out the content of a given element in the JS console every second. Drop this in the console and open the dropdown.

setInterval(() => 
    console.log(document.querySelector('.Select-menu-outer').outerHTML),
1000)

Upvotes: 2

lowerends
lowerends

Reputation: 5267

On Mac, you can press cmd+\ to pause the script after having opened the dropdown. You can then use shift+cmd+c to inspect elements.

Upvotes: 18

Steven Lemmens
Steven Lemmens

Reputation: 630

I think you can use the CSS Editor in Chrome to apply a state, for instance, the state of 'hover'.

In the Developer Tools, you select an element. On the right hand you have a square with an arrow over it. Click that and you can choose a state. For instance, pick hovered and you'll see both your window and your CSS update as if the element is being hovered right now.

Upvotes: 0

Related Questions