How to reload/refresh a web page without leaving m

Question

Building Websites

When I build websites I use 2 monitors. I have my development IDE on the main monitor and the web page open on the secondary screen.

I get annoyed that everytime I need to refresh the web page I have to go to my mouse, move over to the other screen and click refresh.

I would like to have a shortcut key mapped to reloading the web page whenever I need. In a similar way to how Winamp maps keys to common functions like play/pause etc.

My current research:

Firefox via Command Line

I have discovered that an existing FireFox process can be controled from the command line, however the best it can do is create a new window with a specific URL.

firefox -remote "openURL(www.mozilla.org, new-tab)"

The documentation is here: https://developer.mozilla.org/en/Command_Line_Options

Reload Every

There is also a firefox extension that will refresh the web page periodically. However this results in a constant flickering of the page and will also be wasteful with resources.

https://addons.mozilla.org/en-US/firefox/addon/115/

However, what I really need is either....

• A customisable global hotkey for Firefox/Chrome to reload current selected tab
• A browser extension that could be fired from a Global Hotkey
• A command to reload the current selected tab from the Command Line that I could then map to a hotkey (is it possible to add extra remote command with an extentsion?)

Does anyone know how I could do this? Thanks!

Answer 1

This is my favourite bash one-liner:

while /bin/true ; do inotifywait --recursive --event modify ./ ; echo "reload" | nc -c localhost 32000 ; done

It uses Firefox Remote Control AddOn, which it notifys about changes in and below the current directories files. So all you need is to save any file in the project and the same moment the current Firefox tab gets reloaded. This one is unix-ish, should work on Linux+Mac if you have inotify, won't work on Windows without adaptions.

Answer 2

http://www.livereload.com/

LiveReload monitors changes in the file system. As soon as you save a file, it is preprocessed as needed, and the browser is refreshed.

Even cooler, when you change a CSS file or an image, the browser is updated instantly without reloading the page.

Answer 3

There's a much better solution to this, but at a cost of vastly increased complexity.

Selenium (seleniumhq.org) can do what you request. It's an Open Source browser testing framework that, among many things, allows you to control a browser window remotely.

If Selenium sounds like something you'd want to get into your brain anyway, you might as well learn it; if not, I'd stick with WSH scripts and Autohotkey.

Answer 4

This does not really answer your question but maybe makes your life a bit easier ;)

I just found Stylebot. Although it doesn't have any auto completion and stuff, it may help you with the CSS.

Here is a screenshot. The sidebar is Stylebot. You have a basic editing mode where you can quickly edit some simple properties, an advanced mode where you can edit the plain CSS for the selected element and with "Edit CSS" you can edit the whole CSS for the page.

Answer 5

I created a simple applescript that I set up as a global hotkey using Alfred.

Here's the applescript

tell application "Firefox"
    activate
    tell application "System Events"
        tell process "Firefox"
            keystroke "r" using {command down, shift down}
        end tell
    end tell
end tell

If you want to make sure the focus stays in your editor, you could add these lines. Remember to replace Coda (my editor of choice) to whatever it is you are using

tell application "Coda"
    activate
end tell

Answer 6

There sure are hot keys available, especially if the IDE and the browser are the only programs you're switching between.

alt+tab f5 alt+tab

Switches to your browser, reloads it, and switches back. Much quicker than mousing, and you don't need to worry about global hotkeys, or extra software to install.