Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

為了改善您的使用體驗,本網站正在進行維護,部分功能暫時無法使用。若本站的文件無法解決您的問題,想要向社群發問的話,請到 Twitter 上的 @FirefoxSupport 或 Reddit 上的 /r/firefox 發問,我們的社群成員將很快會回覆您的疑問。

搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

了解更多

How can I detect the IDs elements from firefox interface?

  • 6 回覆
  • 2 有這個問題
  • 1 次檢視
  • 最近回覆由 pickone

more options

Hi everyone,

      I want to use userChrome.css file to change things in firefox (ex: context menu order, context menu items, right click menu in page, font in tabs... and many other things)... For changing these, I must know the IDs or CLASSes of the selectors/elements and at this link, I can see only a few of everything from firefox http://kb.mozillazine.org/UserChrome.css_Element_Names/IDs#Firefox_menus Which means that I need a tool or something with who I can point the mouse to the item which I want to know the ID/CLASS to put it in userChrome.css for chaning the design. How can I do that? Because, ok, the default ones are somewhere in that link, but I installed many addons and I want to know the IDs from everything. A tool similar to "Inspect element" but for Firefox Interface

Thank you in advance!

Hi everyone, I want to use userChrome.css file to change things in firefox (ex: context menu order, context menu items, right click menu in page, font in tabs... and many other things)... For changing these, I must know the IDs or CLASSes of the selectors/elements and at this link, I can see only a few of everything from firefox http://kb.mozillazine.org/UserChrome.css_Element_Names/IDs#Firefox_menus Which means that I need a tool or something with who I can point the mouse to the item which I want to know the ID/CLASS to put it in userChrome.css for chaning the design. How can I do that? Because, ok, the default ones are somewhere in that link, but I installed many addons and I want to know the IDs from everything. A tool similar to "Inspect element" but for Firefox Interface Thank you in advance!

由 pickone 於 修改

被選擇的解決方法

You can inspect the local copy of the source code of the tolbar area if you paste the following address to the address bar and press Enter/Return to load it:

view-source:chrome://browser/content/browser.xul

That's hard to read as plain text. If you save it locally with a .xml extension and open it in an editor that can add syntax coloring to XML, that will make it easier to spot the ID and class attributes.

Note: The source file doesn't show dynamically generated content like the address bar drop-down or your bookmarks.

To explore interactively, check out the Browser Toolbox. See: https://developer.mozilla.org/docs/To.../Browser_Toolbox. It's not as convenient as the old DOM Inspector combined with the old Element Inspector, but hopefully it will continue to improve.

從原來的回覆中察看解決方案 👍 2

所有回覆 (6)

more options

By the way, we are talking about the new version of firefox ... => 57.0

more options

選擇的解決方法

You can inspect the local copy of the source code of the tolbar area if you paste the following address to the address bar and press Enter/Return to load it:

view-source:chrome://browser/content/browser.xul

That's hard to read as plain text. If you save it locally with a .xml extension and open it in an editor that can add syntax coloring to XML, that will make it easier to spot the ID and class attributes.

Note: The source file doesn't show dynamically generated content like the address bar drop-down or your bookmarks.

To explore interactively, check out the Browser Toolbox. See: https://developer.mozilla.org/docs/To.../Browser_Toolbox. It's not as convenient as the old DOM Inspector combined with the old Element Inspector, but hopefully it will continue to improve.

more options

P.S. You can share ideas and problems here: https://www.reddit.com/r/FirefoxCSS/

more options

Many thanks for this informations.. I must check them asap :D

more options

Ok... till now I find Browser Toolbox very useful because it is similar or identical with Inspect element... BUT, how can I point the "Pick an element from the page" with the mouse to the menu where I must right click to see it? :D

more options

Oh, I found out myself :)) It is a very good tool