Posted on by & filed under Content - Highlights and Reviews, Programming & Development.

A guest post by Ingo Richter, a Computer Scientist/Web P&A with Adobe Systems who is currently working on Brackets and you can find him @ingorichter.

In the last two articles of this series (Brackets Introduction and Build a Brackets Extension), we introduced Brackets and showed you how to build your own Extension to add new functionality to Brackets. In this article, we’ll show you some Tips and Tricks to make your daily work with Brackets more enjoyable.

Quickly Create a New CSS Rule

Brackets provides a nice feature, which is only available from an open Quick Edit window. So, if you move the cursor to one of your HTML tags and press Crtl/Cmd+E you will see a quick editor window opening up.


If there is no CSS rule defined for the current HTML tag, then you are able to create a new CSS rule from here. The rule will be added to the CSS file that is referenced by your HTML file. If you have more than one CSS file referenced, then you will be able to choose the destination for the newly created rule. What a timesaver.

Quicker Switch Between Projects

If you need to jump between different projects, then you might like the Ctrl/Cmd+Alt+R keyboard shortcut to open the project selection drop-down menu. Now you can switch between projects without ever leaving the keyboard.

Open Developer Tools from Chrome Browser

Something happened several times to me when I developed my first Extension. I had a typo or a wrong require statement somewhere in my source and Brackets was unable to load my file. The result was that Brackets stopped responding and nothing worked anymore: no menus, no shortcuts, nothing. I wasn’t even able to open the developer tools to figure out what went wrong. There is, however, still the option to open a Chrome browser and type http://localhost:9234. This will open the Developer Tools, regardless of the state Brackets is currently in. Having the Developer Tools open, you can inspect all the source and see the output in the console to figure out what went wrong.

Custom Theme for Chrome Live Preview Profile

Brackets uses a different Chrome Browser profile for Live Preview sessions. With this solution, you stay away from all of your open tabs, settings and extensions that you might have setup to customize your browsing experience. To better distinguish your normal Chrome session from the Live Preview session that Brackets opens for editing, it’s a good idea to install a custom theme to make them look differently. You can find two custom themes for Google Chrome at and at (Thanks to @randyedmunds).

To install a theme, open Brackets and start a Live Preview session. In the Chrome instance opened by Brackets, download one of the themes mentioned above (or some other theme that you like better) and install it in the running Chrome session. After you quit your Live Preview session, the new theme is preserved for the next time you start Live Preview again. This way you can easily distinguish your main Chrome session from the ones used for Live Preview.

I hope, that this collection will help you as much as it helped me in my daily work.

If you want to know more about Brackets, I recommend starting with the GitHub Project page, and look below for some great JavaScript resources from Safari Books Online.

Not a subscriber? Sign up for a free trial.

Safari Books Online has the content you need

Learning JavaScript Programming Video teaches you the basics of programming with JavaScript, the worlds most used programming language. The tutorial is designed for the absolute beginner – no prior JavaScript programming experience is required in order to get the most out of this video training. You will start with learning what programming is, and specifically, what JavaScript is, how it it used, and its limitations. You will discover variables and data types, and how to take input and create output. Craig covers conditions, loops, arrays, sorting, functions, paramaters and debugging. You will even learn advanced concepts such as OOP, string manipulations, regular expressions and other programming patterns.
Eloquent JavaScript is a guide to JavaScript that focuses on good programming techniques rather than offering a mish-mash of cut-and-paste effects. The author teaches you how to leverage JavaScript’s grace and precision to write real browser-based applications. The book begins with the fundamentals of programming—variables, control structures, functions, and data structures—then moves on to more complex topics, like object-oriented programming, regular expressions, and browser events. With clear examples and a focus on elegance, Eloquent JavaScript will have you fluent in the language of the web in no time.

About the author

IngoPortrait-1 Ingo Richter is a Computer Scientist/Web P&A with Adobe Systems, and is currently working on Brackets. He has successfully worked through five release cycles of the Adobe Creative Suite and is experienced in creating products from start to finish. He moved from Hamburg, Germany to the Bay Area to explore the Wild West. You can find him on Twitter @ingorichter.

Tags: Brackets, Chrome, Chrome Live Preview, CSS, Extension, Javascript, Quick Edit,

Comments are closed.