Stylish Developer Tool for Firefox

[Batu69]

Stylish Developer Tool is a free browser add-on for the Firefox web browser that adds Stylish script 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.

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.

Stylish Developer Tool

Article source