Bracket’s Live Preview is a beautiful feature which enables us to see the changes on a browser as soon as we do the changes.
The Shortcut for Live Preview is:
Ctrl + Alt + P -> For Windows
Cmd + Alt + P -> For Mac
Once you enable this option, your changes will be visible in the Browser immediately as soon as you edit the code without even saving the changes.
The Shortcut for Live Preview Highlight is:
Ctrl + Shift + C -> For Windows
Cmd + Shift + C -> For Mac
Bracket’s Live Preview Highlight is an extremely useful feature.
Before using this feature, you should make sure that the “Live Preview” is enabled.
This helps to fix any layout issues fast as you can place your cursor on the tag and it shows the layout/outline of that tag.
The “Live Preview Highlight” feature highlights the selected tag from the editor on the browser like below –
For Example, if you place your cursor on the tag, the entire document will be highlighted. Similarly, if you place cursor on tag, the entire content area will be highlighted and so on.
In the Example above, we have placed cursor on tag and it highlights that particular tags in the browser.
If you are in the CSS file and place your cursor on the tag, then it will highlight all the tags on the browser.
Note/Info:
The Live preview Highlight feature inspired by the Developer Tools feature of browser like Chrome.
