How to Refresh Changes on Browser with Sublime Text

By . in Web Design. Updated on .

As web designers, we often do this: tweak the codes in the code editor, save the file, head over to the browser and refresh it to see the changes. We often do this back and forth in the middle of code editing, multiple times.

If you are using Sublime Text, you can skip all this and immediately see the result as you go to the browsers. In this post, we will show you how to do this with a Sublime Text package named BrowserRefresh-sublime.

Streamlining Your Workflow with Code Snippets in Sublime Text

Streamlining Your Workflow with Code Snippets in Sublime Text

As developers, we often find ourselves reusing the same pieces of code multiple times. One efficient way to... Read more

Browser Refresh for Sublime Text

First of all, we need to install it to our Sublime Text, and the easiest way to do so is through the Package Control.

Package Installation

Assuming that you have installed Package Control, you can press Command + Shift + P (Mac) or Ctrl + Shift + P to display the Command Palette, and search for the Install Package.

This will load all available Sublime Text package in the repository. Then, search for Browser Refresh, and simply hit Enter to install it.

Configuration

Once the package has been installed, go to Preferences > Package Settings > Browser Refresh > Key Bindings – Users. This will bring you to a .sublime-keymap file in a new tab.

By default, this file is empty, so let’s add the following syntax between the square brackets [ ... ].

[
  {
    "keys": ["command+shift+r"],
    "command": "browser_refresh",
    "args": {
      "auto_save": true,
      "delay": 0.0,
      "activate_browser": true,
      "browser_name": "all"
    }
  }
]

For those who are not yet familiar with Sublime Text, all the settings are specified with JavaScript objects, including the keys combination.

As we can see from the above syntax, the Browser Refresh is performed with the key combination of Command + Shift + R. If you are not comfortable with the default key combination, you can always change the value within the "keys": ["command+shift+r"].

Furthermore, we can also change the following arguments to specify the action upon hitting the keys:

Arguments Description
auto_save: It specifies whether the document should be saved first before refreshing it in the browser. You can set the value to false to disable this action.
delay It specifies the delay before the page is refreshed. The time is specified in seconds, so 1.0 will be equal to a second.
activate_browser It specifies whether the browser window should be active. If the browser is not yet open, hitting the keys will open it. If the browser is running, we will be redirected to the browser. I suggest to always set it to true.
browser_name It specifies which browser to use to refresh the document. By default, it is set to Google Chrome. So, if Google Chrome is not your preference, you can change to one of the following Safari, Firefox, Opera, IE, Iron, and Google Chrome Canary.

This time, we will just leaving the configuration as the default. So, when we hit Command + Shift + R, the document is saved, then we are redirected to the browser, and the browser is refreshed.

A few things to take note
  • Open the document on the browser first. Otherwise, the document will not be opened and eventually not be refreshed.
  • The browser tab that will be refreshed is the active one. So, make sure that you are in the tab where the document is being displayed.
  • At the time of the writing, it seems that there is a bug in which the document is not refreshed in Firefox 19.

Final Thought

We can now perform three tasks at once — Save document, Go to Browser, and Refresh — just by hitting a key combination. We hope that this tip can help streamline your workflow a little.

For more, visit the project at Github: BrowserRefresh-Sublime.

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail