Stylish Developer Tool for Firefox

Martin Brinkmann
Aug 30, 2016
Updated • Jan 3, 2021
Firefox, Firefox add-ons

Stylish Developer Tool is a free browser add-on for the Firefox web browser that adds Stylish style editing capabilities right into Firefox's Developer Tools.

Update: The extension is no longer available. You can check out the official Stylish guide on creating userstyles using built-in developer tools instead. End

Stylish is a very useful add-on for Firefox (and other browsers) that lets you install userstyles that modify the look and feel of websites or the browser itself.

One popular group of styles is dark themes for popular sites, but there are plenty of styles available for all sorts of sites and purposes.

You load styles after installing Stylish, and get basic management options afterwards that include editing the userstyles style code.

While that works, it is not overly comfortable, and even less so when you start from scratch to create a new style.

To get started install Stylish first, and then the Stylish Developer Tools in the Firefox browser. Please note that you need to run at least Firefox 48.x for this to work.

Tap on F12 afterwards to open the Developer Tools of the browser, and switch to the new Stylish section there.

The add-on displays several filters on the left. You may list only styles active on the page, or all website, global or app styles. If you have lots of styles installed, you may use search to find styles of interest.

Once you select a style it is displayed on the right with its source code. The layout and design looks exactly like the one that Stylish offers when you use it to manage your scripts.

The main advantage of Stylish Developer Tools over the native option is that you get better preview options.

Say you have installed a style for YouTube, and want to change some of its parameters to customize it. Visit YouTube, open the Developer Tools, and there the style you want to edit.

While you don't get better code editing, you get direct previews on the page for any changes you make.

This can be something simply as changing a color, or something complex like removing elements. This means that you get direct feedback for any edits you make if you edit the code while the page that you modify style information for is the active one.

There is no deep integration yet with the Firefox Developer Tools other than that the new Stylish menu is added to it.

It would be handy if one could use the Inspector for instance, and add code modified directly to the Stylish script.

Closing Words

If you use Stylish, and either create your own scripts or modify existing ones, then you may find Stylish Developer Tools useful for that purpose.

Now You: Do you use Stylish?

software image
Author Rating
4 based on 4 votes
Software Name
Stylish Developer Tool
Software Category

Tutorials & Tips

Previous Post: «
Next Post: «


  1. Yooohooo said on January 3, 2021 at 12:29 am

    This article needs an update. Link is broken, and extension may no longer exist.

  2. penubag said on August 30, 2016 at 10:02 pm

    If the developer is reading this, I would love for the inspector to be able to inspect chrome elements. Or at least tell me what the class or id name of a chrome browser element is. (ie. inspect backbutton, it returns #back-button (or whatever it is supposed to be))

  3. c0m said on August 30, 2016 at 7:05 pm

    The only positive info about MOZILLA CORP. in months.

    1. John said on August 30, 2016 at 7:44 pm

      You must have not read the FLAC support story. :-)

  4. John said on August 30, 2016 at 5:31 pm

    Does not appear in my developer tools. I’m using the latest stable Firefox release and the latest Stylish release.

    Stylish 2.0.7
    Firefox 48.0.1
    Mac OS X 10.11.6

    1. Tom Hawack said on August 30, 2016 at 6:57 pm

      Stylish is one add-on, ‘Stylish Developer Tool’ is another (which requires the first to be installed)

      1. John said on August 30, 2016 at 7:07 pm

        Thanks for the info!

  5. Earl said on August 30, 2016 at 1:43 pm

    If a “preview” is important to you, then using the Tile Tabs extension to split the Firefox window is just as–if not more–useful.

    1. Pants said on August 30, 2016 at 2:35 pm

      I just drag the stylish editor tab onto a secondary screen (i.e it becomes a new window) – dual (or trip) screen, that’s like a bigger better split. Changes are auto (just ctrl-s to save and they get applied).

      1. Earl said on September 1, 2016 at 7:04 pm

        Most of us don’t have multi-screen(s). I just run 1920×1080 (HD-TV), which is big enough to get a really good side-by-side view of any page plus the editor. Tile Tabs is great.

  6. Yoav said on August 30, 2016 at 11:23 am

    I use Stylish just for this one script: Google Search Tools Back.

  7. Tom Hawack said on August 30, 2016 at 11:01 am

    I’ve been using the ‘Stylish’ Firefox add-on since always but never this ‘Stylish Developer Tool’ that I discover with this article.

    ‘Stylish’ for CSSs together with ‘Greasyfork’ for scripts are the main tools I use for tweaking pages, ‘Stylish’ mainly when it comes to styling Firefox itself. So much can be done with CSS and sometimes I discover over at Greasyfork scripts which perform what a simple CSS could do as well in which case I always prefer the CSS approach.

    A ‘Stylish’ style can also be called by add-ons which apparently have nothing to do with styles, such as the “Firegestures” add-ons which can be configured to toggle a userstyle, enabling as such the call of a style with a simple mouse gesture : this is another tweaking area made possible by combining two add-ons…

    I’ll have a look at ‘Stylish Developer Tool’ (which requires the ‘Stylish’ add-on) but maybe is the developer tool moreaimed at… developers than at ordinary style fans such as myself. We’ll see …

  8. Tony said on August 30, 2016 at 10:31 am

    Just a small correction: Stylish is for CSS styles, not for scripts.

  9. Anonymous said on August 30, 2016 at 8:42 am

    Not indispensable add-on, but indispensable.
    Need a largest community for styles thought. is poor in good styles IMO, and many are broken and need to be updated.

  10. Randy Vogel said on August 30, 2016 at 7:46 am

    Thanks for bringing this to my attention. The ability to change scripts and immediately preview the result seems quite useful.

  11. bliztkeig said on August 30, 2016 at 6:53 am

    No, I don’t use stylish.

Leave a Reply

Check the box to consent to your data being stored in line with the guidelines set out in our privacy policy

We love comments and welcome thoughtful and civilized discussion. Rudeness and personal attacks will not be tolerated. Please stay on-topic.
Please note that your comment may not appear immediately after you post it.