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

How to cutom UI of Firefox dev console

  • 4 replies
  • 2 have this problem
  • 8 views
  • Last reply by 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)

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.

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?

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

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