Reload any browser window when a local file is modified
When developing CSS, Javascript or other types of browser-based content, having to constantly refresh the browser window after making changes can be time-consuming and very annoying. The method here automatically refreshes any browser when a local file changes, and can speed up development time for CSS, HTML, and Javascript. Xrefresh is one way to accomplish this if you're using Windows/Mac and don't mind using only Firefox, but there doesn't seem to be documented way of getting the same effect on Ubuntu (or other Linux variants), or with other browsers. The method here is very flexible and should do the trick.Packages
If you're running a recent version of Ubuntu, you can get the two prerequisite packages directly using apt-get.sudo apt-get install inotify-tools xdotool
Usage
- Load your development page in your favorite browser (I use Chromium in the example below)
- Open up a terminal in the same directory as the page and run the following script:
while(true); do inotifywait -q -e modify *.html *.css *.js xdotool search --onlyvisible --classname chromium-browser key F5 done
- In the script above, replace
*.html *.css *.js
with the specific files or wildcard specifiers that you want to watch for changes to. The browser is automatically refreshed when you save a change to any of the watched files. When you're done editing, kill the script with a Ctrl-C, or just close the terminal.