Brackets provides several features including:
Applying quick edit to HTML elements will display all corresponding CSS properties in a box beneath the selected element. Users can choose to create new CSS rules directly within the editor and edit a tag's CSS properties inline without leaving the context of the HTML file.
Files containing Hex or RGB color properties
For color properties, quick edit will return an inline color picker for previewing and color adjustment functionality.
Using Live Preview, Brackets pushes code edits instantly to the browser to present an updated page without having to reload.
Two scenarios to Live Preview:
No Back End Logic:
Using Live Preview, Brackets will launch the chosen HTML file in Google Chrome by supplying static content from Brackets built-in server. This procedure does not require any back end logic to support viewing changes to the HTML file.
Back End Logic:
With back end logic, Brackets will direct Google Chrome to a provided project URL running on a separate server but will disable support for HTML-related features. As a result, the browser will not be able to update any HTML, PHP, etc. files in real time and element highlighting will also be disabled for these files. Only edits and element highlighting related to CSS files will be reflected in real time. All non-CSS file updates will be auto-reloaded instead. These limitations exist because providing live editing functionality for HTML files requires injecting annotations into the HTML code before the code is loaded into the browser. These injections are normally handled by Brackets built-in server but are non-existent when projects make use of separate personal servers.
HTML & CSS real time updates (without reloading)
Element Highlighting: Elements selected in HTML and CSS files are highlighted within the browser.
Live preview limitations.
Currently only works with desktop Google Chrome (not open-source Chromium), as the target browser.
Opening developer tools in Google Chrome will close all live development connections.
All files to be viewed must be inside a currently open folder in Brackets.
Only one HTML file can be previewed at a time.
Real time updates are paused when syntactically invalid HTML is encountered. Brackets will resume pushing changes to the browser when the syntax is corrected.
Displays number of times a function is called next to the function’s definition.
Logs all arguments received, values returned, and exceptions thrown by a function call within Brackets.
Related to quick edit, quick docs is a feature used to display relevant documentation inline. In a CSS/LESS/SCSS file, quick docs will open inline documentation for any selected property. Quick Docs can also be applied to multiple properties simultaneously.
If you liked this article, subscribe to the feed by clicking the image below to keep informed about new contents of the blog: