Tincr and live reloading of CSS/JavaScript in Google Chrome

The standard workflow with web development is run the web application, make some changes to your CSS in Visual Studio, flip back to the browser and reload the page to see the effect. While this works relatively well it can be somewhat slow at times.

 

One improvement is make changes to your CSS in the browser. I use Google Chrome as my main browser and it’s CSS and JavaScript viewer is actually an editor so you can make changes there. The nice thing is you see the effect of your changes immediately making for a much faster feedback loop. The drawback is that changes are made in memory and you have to copy them back to the original CSS/JavaScript file. And if you accidently navigate away or reload the page your changes are gone.

 

Tincr to the rescue

Sometimes a utility comes along that is so incredibly useful that you wonder how you managed to live without is. Tincr is one of those plugins for Chrome that makes you wonder how you could do web development without it.

The basic idea behind Tincr is to create a link between the CSS/JavaScript files on disk in your project and in the browser and keep them in sync. That means that you can make any change you want to your CSS file in Visual Studio and as soon as you hit save the browser is automatically updated. The same goes the other way, make a change to your CSS in the Chrome developer tools and the change will be save to disk automatically.

 

How cool is that?

 

Here is a short demo from the maker showing Tincr in action.

Using Tincr with an ASP.NET MVC application is easy.

After installing Tincr you will see an additional tab in the Chrome developer tools. Select this and set the project type to HTTP Web Server and select the root directory for the project. By default auto refresh and auto save are enabled allowing for 2 way syncing.

image

Make sure to keep the Chrome Developer Tools open and switch back to Visual Studio and make some changes to your CSS. As soon as you save the file you will see the browser window update.

 

One gotcha with Windows 8

Unfortunately this plugin won’t install on Google Chrome running on Windows 8 even though other plugins work just fine. I am not 100% sure why but believe this is because it uses the NPAPI Chrome File API to get access to the file system.

 

Update: Lauricio Su came up with a good workaround. See here for more details.

 

Recommended!

 

Now if we would only have a similar plugin for Internet Explorer Winking smile

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>