Cloud Confusing

Brackets Live Preview Is Not Working? How To Fix It!

Having trouble getting Brackets’ Live Preview tool to work? Brackets is an excellent text editor and the price is right (free!) but live preview can sure be fickle. Here are some things to try if your live preview tool seems broken.

It’s worth noting that there are three main issues here that might need fixing:

• Live Preview Editing (primary browser)
• Live Preview Editing (multi-browser)
• Live Preview Editing and Live Preview Highlighting break independently of one another. That is, you could have editing but no CSS selector highlighting. This is annoying, but generally less of a problem.

Live Preview edition not working? Here are the things you should try to fix it.

Enable Live Preview

You did this right? Simply go to File > Enable Experimental Live Preview.

Enable Multi-browser Live Preview

Go to Debug > Open Preferences File. You will get a .json file, where should look for “livedev.multibrowser” which needs to be set to true, not false. If you are unable to edit this file you should hit F5 to reload the editor or go to Debug > Reload with Extensions.

Doing this well let you use Brackets preview in different browsers.

Open The Right Folder

The first thing try is also the simplest: make sure you have the right project open! On the left bar, where your file tree exists, you are able to pick your open folder. If you are editing a file from folder X but you have folder Y open, live preview will usually not work.

To fix this, just to go the top item (it’ll be a folder name), click it, and choose the folder where your files exists. You should be working with the root level of your project, essentially the “/” level of your website. This will ensure all underlying relative links work. Without the right starting point Live Preview will often freak out and tell you that it can only work with “HTML files” even if you are trying to preview a literal .html file!

Alternatively if you open you project with File > Open Folder you should be good to go.

Kill Your Extensions

Bracket’s extensions system is excellent but they are not all bug-free and they do not all play nicely together. If you are having trouble with any Brackets feature you should always do the following two steps:

1. Debug menu > Reload with Extensions
2. Debug menu > Reload without Extensions

If step one doesn’t solve your problem, many times step two will.

HTML Syntax Errors

There are number of edge cases where preview or CSS updates can break (like the string “type =”text/css”) but one of the big things to watch out for is an HTML syntax error. You’ll see an error in the HTML debug of Bracket that will make it clear that the editor has encountered something it does not like. The line number will become red and the Live Preview lightning icon on the top right will likely go red as well.

Fix the error and you should be off to the races.

Browser Issues

These are normally Chrome issue, since most people will be using Chrome. Make sure you are using normal, Chrome stable is possible, as opposed to Canary, Chromium or some other variation. These might work, but aren’t as likely to.

Also try reloading Chrome if your preview isn’t working. There is a change that there could be an extension problem or the browser is just prevented from running a local server because of an anti-virus or similar software.

Some people have had luck by disabling background processes. This can be done by going to Settings > Advanced Settings and then unchecking the setting that says: “Continue running background apps when Google Chrome is closed.”

Reinstall Brackets

If all else fails, this is worth a shot. It seems like the equivalent of “turning it off and back on again” but it really does help sometimes.

Sal March 22nd, 2019

Posted In: Localhost / Environment

Tags: Brackets, Text Editors