Did you know that several web design tools include Live Preview functionality, allowing you to instantly view changes to your web code in the browser? In this article, I’ll cover a few tools that have implemented this cool time-saving technology that results in better web development. There are different capabilities with each tool, but I’m sure regardless of the tool you choose, you’ll wonder how you ever developed for the web without it.
Brackets is an open source code editor for web designers and front end developers released by Adobe in 2011. I used it for about a year (back end and front end) and was very satisfied with it. It has several exciting features such as inline editors that allow you to edit CSS and JS files without changing the current file and live preview which lets you see changes to your files in real time without having to save and refresh the browser after each change. There are also many extensions that you can use to expand functionality. In this article, I will focus on Live Preview.
Note: At the time of this writing Brackets supports only a single Chrome browser instance and isn’t compatible with Developer Tools in Chrome. An experimental multi-browser live preview can be enabled to address these limitations.
You can use this feature in two ways: with no back-end logic and using your own back end. For getting familiar with it, let’s start with no back-end logic.
Without Back-End Logic
Open an HTML file and select File > Live Preview (or click the lightning bolt icon) and a new Chrome instance is opened.
Live Preview in Brackets
If the HTML file includes CSS, any changes to the CSS are reflected in the browser automatically. Also, when moving the cursor through HTML and CSS files, the corresponding elements are highlighted.
Note that the code for including your CSS and JavaScript must be in the HTML file before using Live Preview. If you add it after viewing the file, Live Preview is not aware of the files and fails to reflect any changes made in those files.
With Back-End Logic
Use this option to test a page that is dynamically created where the result is visible only after it is processed by the server. We can save a lot of time by making edits without having to refresh to see the changes.
To use this option, your local server must be running. Then go to File > Project Settings and specify the URL that corresponds to the root folder that is open in Brackets. Then do the same to run Live Preview.
This method is helpful for testing your dynamic pages and making adjustments. For example, we use it for testing our custom templates in WordPress—running the portal locally, loading the page we want to review, and then modifying the CSS as needed. The disadvantage is that the browser won’t immediately update changes to HTML in real time due to its limits with dynamic content. Refer to the Brackets documentation for specifics.
Live preview of MyEclipse page before editing corresponding CSS file
MyEclipse page after editing a class from its CSS file
As shown in the example above, Live Preview allows me to edit the CSS file and immediately see the result. Just imagine how much time you’ll save with this feature.
WebStorm is a JavaScript IDE, created by JetBrains, with a good code completion feature, on-the-fly error detection, UI for working with SVN, Git, Mercurial and others, debugging, tracing and testing. It has support for HTML, CSS, JavaScript, Node.js and frameworks such as AngularJS, Meteor and React. Additionally, it includes Live Edit which allows you to live preview changes to HTML, CSS and JavaScript.
Live Edit, introduced in WebStorm version 5, allows you to instantly view code modifications in your Google Chrome browser. Setup is easy—the Live Edit plugin is included and activated by default in WebStorm. However, before Live Edit can be used, you must install an extension for the Chrome browser.
Live Edit in WebStorm delivers live preview functionality
To use WebStorm’s Live Edit feature your project must run in debug mode. With Live Edit, you can edit your file and see the changes in the Chrome browser without having to save and refresh the browser every time you make a change. Even changes in external CSS and JS files are refreshed.
Note that the Live Edit feature can hot swap only function definitions without a full reload. If hot swap fails, a message appears stating that we must reload. Enable the Restart if hotswap fails option in Live Edit configuration to avoid this message.
At Genuitec we love filling the needs of the modern developer. Our Eclipse plugin Webclipse was designed to deliver the missing pieces of Eclipse to web developers. We knew that Live Preview would be a great addition, so we’ve included it in our latest release and we’ve also included it in MyEclipse, our powerful Java IDE. If you are a Java EE developer that codes for the web, you will love Genuitec’s Live Preview.
Live Preview is a powerful solution to ease the creation of your website and immediately view changes in your browser—no debug session required! The usage is easy, Live Preview is enabled by default; however, it’s simple to toggle it on or off per server with the click of a button from the Servers view. It doesn’t require you to install any browser plugins and even allows you to test multiple browsers simultaneously: Chrome, Firefox, Safari, IE/Edge, mobile simulators, Eclipse’s Web Browser, etc.
Genuitec’s Live Preview allows you test multiple browsers at the same time
Live Preview enables you to directly see in real time the places where your changes are being made, highlighting the elements you’re changing within your HTML, CSS and JSP files. It’s so simple, just put the cursor anywhere in your code and the affected elements are immediately highlighted in the browser(s).
Do you use JSP to create dynamic web content? Support for JSP is one of the unique features in Genuitec’s Live Preview. With the first release of Live Preview, JSP support is included as an experimental preview feature and limited to static blocks. Further enhancements will be included in future CI releases.
Genuitec’s Live Preview includes limited support for JSP
JavaScript is important to the full stack developer. Webclipse supports JavaScript debugging which helps you make reactive changes on your code and analyze the outcomes with little effort. We give you the ability to hot-swap JavaScript code in the browser. Combine hot-swapping with Live Preview to maximize efficiency when developing for the web.
Web development has come a long way and Live Preview is yet another step in the right direction. I hope I helped you discover a tool can help you become a more efficient developer and get more accomplished. If you’re a Java EE developer and Eclipse devotee, Genuitec’s Live Preview is a must-have. It fits perfectly within the development cycle without getting in the way or adding tedious steps to your process. If you like what you’ve read so far, check out our website for additional information.
If you have any comments or questions, we would love to hear from you @Webclipse on twitter or via the Webclipse forum.
