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 http://www.themebeta.com/node/70940 and at http://www.themebeta.com/node/70944 (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.
Not a subscriber? Sign up for a free trial.
Safari Books Online has the content you need
About the author
|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.|