We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

Avatar for Username

Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

This thread was archived. Please ask a new question if you need help.

How to cutom UI of Firefox dev console

  • 4 replies
  • 2 have this problem
  • 8 views
  • Last reply by Mehdi

Mehdi
Mehdi
more options

Hi,

Is there any way to use custom style/css for Firefox dev console?

Thanks!

Hi, Is there any way to use custom style/css for Firefox dev console? Thanks!

Modified by Mehdi

All Replies (4)

evilssh
evilssh
more options

Hi, 1) Go to this url: chrome://browser/content/browser.xul This loads a page filled with Firefox GUI elements.

2) Open Tools-> Web Developer-> Inspector.

3) Inspect the element(s) you want to customize

4)Create a Stylish style that modifies those elements.

Mehdi
Mehdi Question owner
more options

evilssh said

Hi, 1) Go to this url: chrome://browser/content/browser.xul This loads a page filled with Firefox GUI elements. 2) Open Tools-> Web Developer-> Inspector. 3) Inspect the element(s) you want to customize 4)Create a Stylish style that modifies those elements.

Thanks, where I should put my custom CSS file? Also actually I need to customize Developer console, I could not open that in your mentioned URL. how I can open that too?

evilssh
evilssh
more options

right click inspect element the console is on the second tab.


you can visit this link for more info:

https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

Mehdi
Mehdi Question owner
more options

evilssh said

right click inspect element the console is on the second tab. you can visit this link for more info: https://developer.mozilla.org/en-US/docs/Tools/Style_Editor

No, I know how to work with Dev console, (I'm web developer), I mean when I open your mentioned link, I can inspect (for example) toolbar items & change the CSS using Dev console. But the opened Dev console is for main window not for opened/editabled window.

I need to edit UI of Dev console not whole window (as I said in question title). (hope I could tell the point here)

Modified by Mehdi