What's the Trick to Inspect Popout/Dropdown Menu Style with Firebug

What's the trick to inspect popout / dropdown menu style with Firebug?

There's an option built in:

Inspect the element that's "hidden", then use this.

Inspect the Markup used in CKEditor Styles Dropdown

I found a way to do it even if it is a little tricky.

If you are using Chrome you can press F8 while having the developer tools opened. F8 pauses on next script execution.

So if you hover over the desired element, then press F8, then move your mouse a bit inside/over the element, the script execution will pause with that dropdown opened and you will be able to rightclick -> inspect it, as long as in pause.

How can I inspect disappearing element in a browser?

(This answer only applies to Chrome Developer Tools. See update below.)

Find an element that contains the disappearing element. Right click on the element and apply "Break on... > Subtree Modifications." This will throw a debugger pause before the element disappears, which will allow you to interact with the element in a paused state.

Update Oct 22 2019: with the release of v. 70, it looks like FireFox finally supports this kind of debugging 2 3:

Update Sep 15 2020: Chrome has an "Emulate a focused page" option (you can get it from the [⌘]+[P] Command Menu, or Global Preferences) for this exact need. 5 - h/t @sulco on Twitter

How to change properties values in Firebug inspector with the mouse wheel?

Okay, you've found something where Firebug works differently to Chrome Devtools.

You're just going to have to accept that they work differently in this respect. You can use the up/down arrow keys to change the values in Firebug, but not the scroll wheel. That's just the way it works.

Personally, I prefer the scrollwheel to work the way it does in Firebug -- ie scrolling the list of styles. But that's just my personal preference. But either way, you're not going to be able to change Firebug's behaviour in this respect without digging into the codebase and modifying it yourself.

Firebug: How to inspect elements changing with mouse movements?

I think you can also do this :

• Choose Firebugs Inspect mode

• Hover over the item that pops up the element you wish to inspect and then use the Tab key several times to make Firebug active (I found it tricky to see when Firebug was the active component but nothing like trial and error - when I saw that Firefoxes Find Toolbar was active I'd then Shift + Tab backwards twice to get into Firebug.

• Then I'd use the L/R arrow keys to contract/expand elements and U/D arrow keys to navigate through Firebugs console

Worked for me anyway!

Freeze screen in chrome debugger / DevTools panel for popover inspection?

Got it working. Here was my procedure:

1. Browse to the desired page
2. Open the dev console - F12 on Windows/Linux or option + ⌘ + J on macOS
3. Select the Sources tab in chrome inspector
4. In the web browser window, hover over the desired element to initiate the popover
5. Hit F8 on Windows/Linux (or fn + F8 on macOS) while the popover is showing. If you have clicked anywhere on the actual page F8 will do nothing. Your last click needs to be somewhere in the inspector, like the sources tab
6. Go to the Elements tab in inspector
7. Find your popover (it will be nested in the trigger element's HTML)
8. Have fun modifying the CSS

Inspect element that only appear when other element is mouse overed/entered

It's fairly easy in Chrome 38.0.2094.0.

Here's what it'll look like:

Step-by-step:

1. Open the DevTools in the Sources panel
2. Make the tooltip appear by hovering over the button
3. Press F8 to freeze the page
4. Switch to the Elements panel and use the magnifying glass icon in the top left to select the tooltip

If the tooltip shows up because of CSS, here's what you can do in that case:

Step-by-step:

1. Open the DevTools
2. Select the triggering element in the dev tools (the link)
3. Right click, and select "force element state", and select ":hover"
4. Inspect the CSS tooltip

---

Related Topics