How can I refresh Chrome from within WebStorm?

Question

While the WebStorm debugger is pretty robust, I prefer the Chrome console. I'm unable to make use of WebStorm's live reload feature, as it a function of the debugger and won't work while the Chrome console is open. Having to manually give Chrome focus every time I want to refresh is a headache, so does anyone know of easy way to trigger a refresh in Chrome without leaving WebStorm?

Answer 1

I happen to be on a Mac, so was able to work out a solution by utilizing WebStorm's External Tools configuration and AppleScript. Here are the steps:

Define an External Tool configuration in WebStorm

• Open WebStorm preferences (⌘,)
• Go to Tools --> External Tools
• Create a new configuration:
  • Click the '+' button (a dialog will appear)
  • Set the name/description as preferred
  • Uncheck Open console
  • Set Program to osascript
  • Set Parameters to -e "tell application \"Google Chrome\"" -e "repeat with theWindow in (windows)" -e "repeat with theTab in (tabs of theWindow)" -e "if theTab's URL contains \"localhost\" then" -e "reload theTab" -e "end if" -e "end repeat" -e "end repeat" -e "end tell"
  • Press OK to save

At this point, you can go to Tools --> External Tools --> to refresh all chrome tabs whose URL contains "localhost".

You can also map a key combination in the Keymap section of preferences

---

For reference, here's the AppleScript being executed:

tell application "Google Chrome"
    repeat with theWindow in (windows)
        repeat with theTab in (tabs of theWindow)
            if theTab's URL contains "localhost" then
                reload theTab
            end if
        end repeat
    end repeat
end tell

---

Update:

The external tool configuration and keybind is great, but left something to be desired. TypeScript takes time to compile, so after saving I was left spamming my refresh keybind until I saw my changes... What I really wanted is for Chrome waited for all of the TypeScript to compile before refreshing. This is what I came up with:

By setting the command of an npm run configuration to version, you can setup a run configuration that effectively does nothing but invoke external tools (see this post). I used this strategy to create a run configuration first invokes Compile TypeScript and then the Refresh Chrome Tabs script I defined earlier. The key here is that these external tools are run sequentially.

To take it a step further, I defined a macro that will "Save All" and then "Run" and rebound ⌘S to run invoke this macro. Now, whenever I save, Chrome is automatically refreshed after the TypeScript has been compiled, without any additional key presses.