Brackets Blog

code the web

Live Development with Brackets (experimental)

As you all know and love, Brackets gives you immediate feedback in the browser when editing CSS files through the live preview. We call this “live development”. What you did not know is that Brackets already includes some experimental features that allow the live development of HTML and JavaScript files.

The video below demonstrates what I mean (best viewed in 720p):

So, how does it work?

For the live preview, we open a remote debugger connection to Chrome, which we can use to inspect and interact with the visible page. Through this connection, we can replace some of the source files of the rendered web site with updated copies. This is how CSS and JavaScript changes are passed to the browser. For HTML, however, we need to do more to preserve the state of the web site, because updating the HTML source this way resets the website entirely. Instead, we create and maintain a mapping between the source code and the rendered DOM tree through the HTML inspection methods of the remote debugger. We can then use this mapping to update the rendered element when the source code changes. So far, this works only for text elements, but it should be possible to extend this to all possible HTML manipulations (it is just a lot of work to do so). The same mapping is also used to drive the navigation between web site and source code. We install a new click handler in the web site, adding a special data-tag to elements upon hovering over them, which can be detected and visualized by Brackets.

The live preview remote debugger connection can be used by extensions to do cool things. For example, the Debugger extension uses this connection to create JavaScript breakpoints and allow pausing and stepping through code.

The connection is fairly easy to use and documented (see brackets/src/LiveDevelopment/Inspector/inspector.html) or the official (but incomplete) documentation. To use the connection, just include “LiveDevelopment/Inspector/Inspector”, attach a connect handler, and code away!

8 Comments

  1. Derek says:

    Can I also just open the Mac app package and edit the .js file in there to enable that flag or does Brackets *have* to be rebuilt after this edit is made? I’m trying to edit the HTML on a file and it’s not updating currently so I’m guessing that means no?

    • It should work but you still need to disable the cache as shown in the video. However, I submitted some bugfixes that are not included in the current release, yet. To get them, check out my branch and activate it by holding Shift while starting Brackets and selecting the index.html from this branch.

  2. sathyamoorthi says:

    Nice features. This will make developer life, much interesting.

  3. Caleb M. says:

    Wow, great job Brackets team! These live development tools are really the key to making Brackets standout from other editors. I know I’ve mentioned it before, but having live preprocessor support is a HUGE feature for many developer today.

    Keep up the great work!

  4. Ryan says:

    Just curious if you guys are allowing people to live edit the original HTML source code or your replacing the original source with the DOM generated representation from the inspector and then allowing people to edit that in Brackets.

    I ask because I tried to use WebKit to take a crack at this exact problem a few years ago and I found there to be no built-in way (with the inspector or otherwise) to map DOM nodes to their original source location.

    Unless this has changed recently, the only way I could see this working is if you build your own html parser into Brackets that exactly matches webkit’s (that would be quite an achievement!) or you’re just using the source that gets re-generated from the DOM loaded in the browser.

  5. pppdns says:

    Nice feature!
    Does it work only with file protocol or when files are loaded from a local webserver?
    (I guess Brackets can figure out the filesystem mapping from the set Live Preview Base URL (set at Project settings))

  6. [...] the course of this year, we’ve been quietly working on Live Development for HTML. Live Development goes beyond a simple auto-reload that triggers a page refresh on save. With Live [...]

  7. dadf says:

    Just trying Brackets and noticed the Live Preview feature today- looks like a VERY promising IDE extension- not sure any other has it to this level, let alone where it will go as it develops further! However, primarily being a JavaScript developer, a little disappointed that when I have a page being previewed, that if I open the developer console, Live Preview cancels the preview and shows a pop-up saying ‘Live Preview was cancelled because the browsers developer tools were opened’. Surely thats a bug? I should be able to look at console while previewing, even simply to check my own console info statements etc… am I missing something? As mentioned, new to Brackets- thanks!

  8. Jonathan Channon says:

    I get the same

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*


9 − one =

You may use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>