How to reload/refresh a web page without leaving my web development IDE?

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!

Take a look at: http://stackoverflow.com/questions/3309599/automatically-refresh-browser-in-response-to-file-system-changes/3309946#3309946 — Rekin, Sep 26 '11 at 06:39
@Rekin: thanks! somehow google didn’t like me, so i only found this useful answer thanks to you. that’s exactly what i need! now i’ll combine it with inotify and boom! — flying sheep, Jan 17 '12 at 21:59
I have posted another solution to the same problem that frustrated me when I ventured into web programming. Details at the bottom... — Hari Mahadevan, Nov 17 '14 at 03:27

dogbane · Accepted Answer · 2011-01-17T10:04:37.183

20

In Windows XP, this should work:

Create a VBS file called refresh.vbs:

Set WshShell = WScript.CreateObject("WScript.Shell") 
WshShell.AppActivate("Firefox")
WshShell.SendKeys "{F5}"
WshShell.AppActivate("TextPad")

Create a shortcut to this file on your desktop.
Right-click the shortcut icon and go to Properties.
- In the General tab, click on the Change button next to "Opens with". Browse to C:\WINDOWS\system32\cscript.exe Select Microsoft Console Based Script Host.
- In the Shortcut tab, enter a Shortcut key e.g CTRL + ALT + R. In the Run dropdown, select Minimised.

Now, when you hit CTRL + ALT + R, it will refresh the current tab in Firefox.

edited Jan 17 '11 at 10:04

answered Jan 14 '11 at 12:08

dogbane

266,786
75
396
414

2

This is the best solution so far. Thanks very much! My main aim was for speed so I have mapped the shortcut to SHIFT+CONTROL+S. Means I can save the file and refresh very quickly. – Jon Winstanley Jan 14 '11 at 14:43
1

This works great setting it up as a Builder in eclipse that runs automatically during save. In the builder settings for **Location:** enter `C:\Windows\SysWOW64\wscript.exe` and in the **Arguments:** enter the location of the script - if you store it with your project then something like: `${workspace_loc:/development.FOO.com-klisrv10-local/auto-refresh-browser-helper.vbs}` – Daniel Sokolowski Feb 11 '13 at 19:12
can you do this for sublime i suppose itd be like sublime text 3 or something in AppActivate also can you make sublime run file at every save.. – Muhammad Umer Mar 11 '14 at 01:30

score 13 · Answer 2 · answered Mar 08 '12 at 15:14

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

How do you get the name of the tab? Anyway to get the "age" of the tab from its last request? — Yzmir Ramirez, Aug 08 '19 at 23:36

score 11 · Answer 3 · answered May 24 '12 at 14:33

11

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.

answered May 24 '12 at 14:33

tantegerda1

111
1
3

For Windows see [How to monitor a folder for changes, and execute a command if it does, on Windows?](http://superuser.com/questions/468662/) – Piotr Dobrogost Sep 30 '12 at 17:38

speedball2001 · Answer 4 · 2011-01-14T10:14:12.550

6

There exists a tool for Windows called Autohotkey that lets you automate almost everything by sending keycodes and mouse clicks. You could write a script that locates your browser window and send the keycode for F5. Assign this script to a global hotkey and you're done.

To get back to your previous window your script would need to remember the currently selected window, refresh the browser and set the focus back to the remembered window.

edited Jan 14 '11 at 10:14

answered Jan 13 '11 at 13:55

speedball2001

947
4
7

Thanks a lot. However this would still break my flow as it would take focus away from the IDE. – Jon Winstanley Jan 13 '11 at 16:48
Couldn't you combine this with Josh Smeaton's answer? Assign one hotkey to the full "alt-tab F5 alt-tab" sequence, and then you will be right back to your IDE again. – Tyler Jan 13 '11 at 19:14
3

AHK can send the key to the other window without activating it. So it wouldn't break your flow. It would work just like the VBS example really. – studgeek May 08 '11 at 23:24
1

`#n::ControlSend, , {F5}, ahk_class Chrome_WidgetWin_1` will refresh Chrome on Win+n, no focus change. – DDS May 13 '13 at 04:30
@DDS, this is super slick! – MEMark Jan 02 '14 at 11:04

score 5 · Answer 5 · answered Jan 13 '11 at 14:02

5

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.

answered Jan 13 '11 at 14:02

Josh Smeaton

47,939
24
129
164

1

Thanks very much. However I am really wanting something quicker, such as a single keypress or at least a single set of 2 keys. – Jon Winstanley Jan 13 '11 at 16:47
This how i do it all day long. I promise you if you get used to this little workflow you won't even notice the keystrokes anymore...it will be as natural as that ctrl-s twitch we all built in. – Matthew Nichols Feb 03 '13 at 15:27

score 5 · Answer 6 · answered Aug 09 '11 at 20:41

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.

score 4 · Answer 7 · 2013-05-17T10:19:51.487

I use MS Ergonomic Keyboard that has a key-macro feature. I programmed Joshs solution in it and it works well, you just have to make sure, the browser is the next application when switsching with alt-tab. There is a cool tool named XRefresh thats just about every developers dream - doesn't work with firefox 4 though.

Edit: But there is an addon "Auto Reload" that does exactly what we need: you specify one or several folders (or files) and firefox refreshes whenever one of the files inside changes.

Edit (2013): PHPStorm has an automatic refresh feature for Google-Chrome. Its awesome: you see the webpage chnge as you type (!) in the IDE. They have a free community edition for OpenSource software developers.

score 4 · Answer 8 · edited Jun 20 '20 at 09:12

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.

enter image description here

score 2 · Answer 9 · edited May 23 '17 at 12:26

2

Thank dogbane and all for share.

Work with Windows 7 you can refresh your browser

Create .bat file and execute

%windir%\SysWOW64\wscript.exe refresh.vbs

and execute .bat with "Run as administrator"

Cannot use CreateObject from VB scripts on Windows 7 x64

:)

edited May 23 '17 at 12:26

Community

1
1

answered May 14 '12 at 05:30

Mean

21
1
4

Daniel Sokolowski · Answer 10 · 2013-03-26T21:11:26.507

The VBScript solution does not work with Google Chrome browser in Windows 7. Below is a solution that works amazingly well with any browser (just adjust the ititle string) and the Eclipse IDE by using a small utility from NirSoft (http://www.nirsoft.net/).

Download NirCmd and extract 'nircmd.exe' somewhere into your project (its KISS this way).

Create the following 'nircmd-chrome-focus+f5.bat' batch file somewhere in your project:

ECHO Off
REM This little batch files calls the awesome nircmd utility to focus Chrome window send an F5 and swtich
REM back to Eclipse. This is no longer possible with VBScript in WIN7 as Chrome can only be focused but won't 
REM accept key sends unless a click is made. Seriously donate to the NirSoft for making this tool. 

%~dp0nircmd.exe win activate ititle "- Google Chrome"
%~dp0nircmd.exe win max ititle "- Google Chrome"
%~dp0nircmd.exe sendkey f5 press
%~dp0nircmd.exe win activate ititle "- Eclipse"
%~dp0nircmd.exe win max ititle "- Eclipse"

Add the batch file as a project builder 'Project > Properties > Builder > New' and ensure 'Project > Build Automatically' and 'Build Options' > 'During auto builds' is selected. See below screenshot for an idea.

margenn · Answer 11 · 2014-08-25T23:56:07.130

In Windows: Just Press Alt + F5 and get it done. This solution works with more than one browser simultaneously and probably with any Editor/IDE. It was tested with (jEdit, Eclipse, Notepad++)

To accomplish that, install AutoHotKey and run the script below (copy in a text file and change extension to .ahk). There is a portable version here. It was tested with AutoHotKey version is 1.0.48.05

This solution is pretty flexible since you can change Keys, Editors, Browsers and everything else. It come pre configured for Firefox and IE browsers and jEdit, Eclipse editors, but you can easily customize this list.

The varTextEditor and varBrowsers where discovered using "WindowSpy" utility that comes bundled into AutoHotKey.

;###############################################################################
; Save all unsaved documents, refresh all opened browsers and return to text editor
;###############################################################################
!F5::
    ;Configuration vars. Edit here the settings of this script
    ;               jEdit       Eclipse
    varTextEditor = SunAwtFrame,SWT_Window0
    ;varBrowsers = MozillaUIWindowClass,MozillaWindowClass,Chrome_WidgetWin_0,IEFrame,OpWindow,{1C03B488-D53B-4a81-97F8-754559640193}
    ;             Firefox3             Firefox4            Chrome             IEca    Opera    Safari
    varBrowsers = MozillaWindowClass,IEFrame
    ;End of configuration vars.

    WinGetClass, thisWindowClass, A ;Get the active window class

    if (InStr(varTextEditor, thisWindowClass, true, 1) > 0) { ;true = case sensitive
        varTextEditorClass = ahk_class %thisWindowClass%
        if (thisWindowClass = "SunAwtFrame") {
            OutputDebug, ...Saving everything
            ; SetKeyDelay, 100, 100, Play
            Send ^+s  ;Ctrl + Shift + S = Save all
        } else if (thisWindowClass = "SWT_Window0") {
            SendPlay ^s ;Ctrl + S = Save
        }
        Sleep, 500 ;Give some time to the data be recorded on hard disk
    } else {
        MsgBox, 0, Ops!, You must be in on these text editors: (%varTextEditor%) to get this script running, 5
        return
    }

    ;Refresh all opened (and maximized) browsers
    Loop, parse, varBrowsers, `,
    {
        varClasseBrowser = ahk_class %A_LoopField%
        if WinExist(varClasseBrowser) {
            WinGet, winState, MinMax, %varClasseBrowser% ;get window state. -1 = minimized
            if (winState != -1) {
                WinActivate, %varClasseBrowser%
                OutputDebug, ...Refresh browser %A_LoopField%
                Send, {F5}
            }
        }
    }
    ;Return to text editor
    WinActivate, %varTextEditorClass%
return

While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. — nanofarad, Aug 25 '14 at 23:33
A link to external site, maybe. But a link to another stackoverflow answer? Unlikely. Nevertheless I edited the answer to full post just in case it happens in a far away future. It's precipitate press the "-1" button before read (and test) the answer. Doing this, you can deflect attention away from a solution that can help a lot of people. I've been succesfully using this in the last 5 years and unfortunately it started with "-1" grade, given by someone that must be taken less than 5 seconds to judge it. There must be people that likes to push the downgrade button, just for fun... — margenn, Aug 26 '14 at 01:09

score 0 · Answer 12 · answered May 30 '14 at 08:05

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.

score 0 · Answer 13 · answered Nov 17 '14 at 03:21

There's another solution to this.

Install the FF-Remote-Control plugin in FireFox which will allow you to send commands to the plugin from another machine through network. Instructions on integrating it with VIM are in the documentation which can be used as a template for integration with other editors too. Works only with FF though.