How to access Pale Moon UI element picker. Topic is solved

[BenFenner]

I'm working in userChrome.css for the first time* in Pale Moon (have worked with it in Firefox previously). It's taken me about a decade into PM use before I've wanted to do this because Pale Moon's UI customization is just so good.

Anyway, I always forget the keyboard shortcut to bring up the UI inspector so I tried looking it up and found (Ctrl + Shift + Alt + I) for Firefox, but it doesn't seem to do anything in Pale Moon. I also know there is an about:config setting and network loopback setting in Firefox to turn on before this UI inspector will run. Is that also the case for Pale Moon?

I know people on the forum are doing this all of the time. Can one of you help me out? I'd like to find the names of some UI elements so I can remove them.

I'm sorry for the newb question. I've searched the forum for a while now and just can't find the info. I tried everything in the Tools → Developer Tools menu as well, but maybe I missed it?


* viewtopic.php?f=3&t=30106&p=241682#p241696

[athenian200]

In Epyrus, I have the Developer Toolbox enabled by default so people can inspect the messenger window's chrome/UI easily, but that's not the case for Pale Moon. On Pale Moon, you need to do the following steps:

1. Go to Developer Tools -> Inspector.

2. Click on the Gear icon to access advanced settings.

3. Make sure "Enable browser chrome and add-on debugging toolboxes" is checked.

4. Make sure "Enable remote debugging" is checked.

5. Go back to Developer Tools and select Browser Toolbox instead of Inspector.

6. You'll get a pop-up warning you that a remote debugging session is being started from localhost, just click OK.

7. You'll see an interface very similar to the normal Inspector in a separate dialog box, only this time it allows you to inspect and pick elements from the browser UI in much the same way you would with a web page in the normal inspector.

I actually wasn't even sure it was possible to do this in Pale Moon until I just started poking around and researched it... thought perhaps it was hard disabled, but apparently it is just turned off by default.

[BenFenner]

Thank you very much!

And now that you describe the steps, I feel like I have done this on Pale Moon before, I just reversed things when I was finished and have forgotten all about how to do it. And docs on this seem hard for me to find.

Cheers!

[moonbat]

Or use the DOM inspector from the Developer Tools menu and set it to examine Chrome documents. You can click on any UI or webpage element and see its details.

[BenFenner]

Or use the DOM inspector from the Developer Tools menu and set it to examine Chrome documents. You can click on any UI or webpage element and see its details.

Can you give a little bit more instruction? I'm trying to follow your directions but getting lost somewhere. I'm very familiar with the Inspector from the Dev Tools menu (F12) but have never been able to get it to work with the Pale Moon UI elements. I must be missing something?

[Moonchild]

Moonbat's instructions need you to install the DOM Inspector extension which adds that menu entry (and tool).
It's a bit more rudimentary than using remote debugging and the devtools toolbox, but also a hell of a lot more performant. So YMMV depending on what you need it for.