Stylish Developer Tool for Firefox - gHacks Tech News

Stylish Developer Tool for Firefox

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.

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.

stylish userstyles

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.

stylish developer tools

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?

Summary
software image
Author Rating
1star1star1star1stargray
3.5 based on 3 votes
Software Name
Stylish Developer Tool
Software Category
Browser
Landing Page

We need your help

Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.

We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats or subscription fees.

If you like our content, and would like to help, please consider making a contribution:

Comments

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

    No, I don’t use stylish.

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

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

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

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

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

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

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

    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 …

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

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

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

    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
      Reply

      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
        Reply

        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.

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

    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
      Reply

      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
        Reply

        Thanks for the info!

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

    The only positive info about MOZILLA CORP. in months.

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

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

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

    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))

Leave a Reply

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

Please note that your comment may not appear immediately after you post it.