
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.
Why does 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 stackoverflow
,
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 copy
of 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
Terminal
with Brackets
. Unlike 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 create confusion
!
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 code editor
).
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 VS Code
.
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!
Related Resources

Created by Maria D. Campbell who lives and works in New York City building and teaching useful things. You should follow her on Twitter.