Thursday, April 4, 2019

In-Browser Style Linter

Chrome extension under development: 

In-Browser Style Linter 

What it does:

It enables you to do quick style checks on your page after it renders, without even leaving your browser. You can see a demo here: https://goo.gl/ou1KEv

Why:

I had a task to help developers automate style checks on new pages that they create. I know there are tons of CSS linters out there, but I could only find pre-render code linters. I was also getting tired of using and reading about bulky testing frameworks, and I wanted to minimize the time it takes to set up something to test UI styles. 

So I created a quick script to do just what I needed, and ran it as an in-browser snippet. The code analyzes computed styles, which happens post-render. Then the script evolved into a Chrome extension, which is great because now it saves developers even more time: no need to edit the JavaScript code directly, just copy and paste settings into a box. 

Find it in the Chrome Web Store: 

https://chrome.google.com/webstore/detail/in-browser-style-linter/mopnkclaipjghhmneijljnljeimjahfc

Read the Documentation or Contribute on GitHub: 

https://github.com/hchiam/in-browser-style-linter