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 th开发者_StackOverflow社区is 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!

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.

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

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.

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.

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.

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.

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.

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.

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

:)

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.
  
  

  

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

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.

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.