Im developing a site and I would like the page to refresh when a change is detected to a CSS file. I used to be able to do this easily with the following bookmarks, but now none of them work on Chrome.
http://david.dojotoolkit.org/recss.html
http://calvincorreli.com/2006/02/13/re-recss/
http://www.paulirish.com/2008/how-to-iterate-quickly-when-debugging-css/
I cant change the HTML of the site im working on so I cant use the livereload app. Ideally I would keep using Chrome but I would switch to another browser if necessary.
You have two ways:
livereload to reload it automatically in ChromeAbout livereload(it works not for css only).
Use livereload. You need download Livereload 2 and add javascript file to your page or use Chrome extension.
This script is meant to be included into the web pages you want to monitor, like this:
<script src="http://localhost:35729/livereload.js"></script>
LiveReload 2 server listens on port 35729 and serves livereload.js over HTTP (besides speaking the web socket protocol on the same port).
A slightly smarter way is to use the host name of the current page, assuming that it is being served from the same computer. This approach enables LiveReload when viewing the web page from other devices on the network:
<script>document.write('<script src="http://'
+ location.host.split(':')[0]
+ ':35729/livereload.js"></'
+ 'script>')</script>
However, location.host is empty for file: URLs, so we need to account for that:
<script>document.write('<script src="http://'
+ (location.host || 'localhost').split(':')[0]
+ ':35729/livereload.js"></'
+ 'script>')</script>
LiveReload.js finds a script tag that includes .../livereload.js and uses it to determine the hostname/port to connect to. It also understands some options from the query string: host, port, snipver, mindelay and maxdelay.
From GitHub
About changing CSS in Chrome devtools.
Just take a minuit and watch a demo from Paul Irish