Live Development with Brackets (experimental)

Article by: Jonathan Diehl

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!

Leave a Reply

Your email address will not be published. Required fields are marked *