One of the coolest features in Brackets is Live Preview. With Live Preview, as you make changes to HTML or CSS in Brackets, the results appear instantly in your web browser. At first, Live Preview only worked with Chrome, but later releases now allow this great feature to work in other browsers.

Chrome by default

To start Live Preview, perform the following:

1. Open Chrome.

2. Open your project in Brackets.

3. Start Live Preview by doing one of the following in Brackets:

   • Click the lightning bolt icon in the top right of the window.
   • Select File > Live Preview.
   • Press Command+Alt+P (Mac) or Ctrl+Alt+P (Windows or Linux).

If everything is set up correctly, you should see the page open up in Chrome.

If you see a prompt telling you that Brackets needs to restart Chrome in Remote Debugging Mode, click on OK, & you should then see the page open up in Chrome.

Nothing happened!

If nothing happens—if you see the lightning bolt icon change color halfway but nothing else occurs in Chrome—then you need to perform the following steps, depending upon your operating system.

Remember, you only need to do these steps if Live Preview isn’t working for you!

Mac

Open the Terminal app (Applications > Utilities > Terminal, or search Spotlight for Terminal & open it from there).

Enter the following & press Return:

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Now Live Preview should work for you.

Windows

Open the Command Prompt.

Enter the following & press Return:

chrome.exe --remote-debugging-port=9222 --user-data-dir=remote-profile

Now Live Preview should work for you.

Linux

Open your Terminal app of choice.

Enter the following & press Return:

google-chrome --remote-debugging-port=9222

Now Live Preview should work for you.

Other browsers

You can also have Live Preview open in your operating system’s default browser. For instance, I use Safari by default, so when I click on Live Preview, it opens in Safari (although I can also use Live Preview in other browsers at the same time, as I’ll shortly explain).

To get this to work, do the following:

In Brackets, select Debug > Open Preferences File.

In that file, add the following line somewhere in the file (near the top is a good place):

"livedev.multibrowser": true,

The Preferences file is a JSON file, so you have to pay attention when you enter that line. Note that it ends with a comma, which means that it cannot be the last line before the final } at the end; that’s why I suggested putting it somewhere near the top, after the first {.

Save the file, close it, & then restart Brackets. Open or create an HTML file & press the Live Preview lightning bolt symbol. Your default browser should open & display the webpage. Cool, huh?

Other browsers at the same time

What’s really cool about Live Preview is that you can press the lightning bolt to open your webpage in your default browser, but then, if you copy the URL & paste it into another browser, you essentially have Live Preview working at the same time in multiple browsers.

Now, I have found that this can be a bit flaky at times, so if things don’t update in every browser at the same time, you can always hit the Reload button in the browser & refresh things that way.