Google Chrome and the Brackets Live Preview extension
February 6th, 2021
- Link to the Google Chrome and the Brackets Live Preview extension podcast on anchorfm
I just started
using Brackets recently for a
Web Design class I am teaching, and the other morning, I woke up to find that
“all my Google Chrome extensions” were wiped out!
At first I thought that my
Mac Operating System had something to do with it. I re-installed my main two
extensions immediately in the
open instance of
Chrome I was in.
Then I upgraded to
Big Sur yesterday (it’s great by the way), and all of a sudden all my
extensions re-appeared. I thought it was because I had upgraded to
Big Sur. but later on in the day, when I was using
Brackets again, I noticed for the first time that I only had two extensions
installed in the active instance of
Google Chrome. I also noticed that I had two instances of
Google Chrome open. I began to wonder what was going on, but did at least find out that one of them
contained all my extensions!
I found out pretty quickly what was going on.
Brackets launches its own
Google Chrome profile for its
Live Preview extension, which has the
Chrome Remote Debugging API enabled.
Brackets use a separate
Google Chrome profile for this?
According to the
thread I found entitled Why does Brackets (code editor) open a new instance of Chrome when using Live Editor? on
Remote debugging Is off by default in Brackets, and enabling it requires re-launching Chrome( I probably had re-launched Chrome, enabling this feature without even realizing it). Using a separate profile means your existing browsing session doesn’t have to be restarted, which would be disruptive if you have lots of tabs open (which I invariably do when creating coursework or developing). It reduces security slightly - other processes on your local machine could use the Remote Debugging API to monitor/interfere with other browsing you do in the Google Chrome window (it happened with me). The API is not exposed to the network, so if you trust your computer to be malware free, this is less of a concern. But if you don’t like having a separate Chrome instance open (I don’t), you can check File > Enable Experimental Live Preview to try out a new Live Preview implementation that does not require the Remote Debugging API, and so a new copy of Chrome is not launched. You just can’t use this option if your project has a custom server URL set. I have found ways of getting around that issue.
There are two things that I really don’t like about
Brackets. One was launching the more insecure
Chrome when I launch
Live Preview (it was confusing and I didn’t know what was going on at first!). The other is that I have to work in
iTerm2 itself in order to be able to use
VS Code or
Atom, it does not have an
integrated Terminal. They are purportedly working on it, but I think that feature is a long way off. Not having an
integrated Terminal in one’s editor (my
WebStorm integrated IDE also has one!) makes working with it much harder. It slows one’s
workflow down and can also
There are good things about
Brackets as well. They do have some nice
editor themes with great
syntax highlighting. They do have an equivalent of the
VS Code HTML5 template shortcut when one uses their
HTML Skeleton extension (which I love). They have a whole bunch of other
cool extensions I like. I would like
Brackets even more if there was an
integrated Terminal. I find myself constantly opening up
VS Code and working with it along with
Brackets just because of its
integrated Terminal (it also happens to be a wonderful
They (Brackets) also have the coolest
syntax highlighting theme called
CodePen Panda Theme. It is a dream, and great for my eyes. The
user experience (
UX) in that regard sometimes is not the best for me in
I will be writing more about
Brackets as I
use more and more of its
features over the coming months.
I will be embedding this episode of Plugging in The Holes along with a transcript in the form of a post on interglobalmedianetwork.com for your hearing and reading pleasure. Bye for now!