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!
5 Comments
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.
Nice features. This will make developer life, much interesting.
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!
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.