More on CodeLive

Inspect the Source Code for an Element

Another useful way to view your source code is to use the Inspector to navigate to a particular line in the source code.

For Angular applications, hover over a component on the page to view the component name. Click the component to view the dashboard list filtered for the selected component, and then easily jump to the corresponding TypeScript , HTML or CSS file.

For Java EE websites, hover over an element to see the path to the source file. Click on the element to jump directly to the corresponding line of source code.

Instantly View Changes

For Java EE web developers, think of the time you’ll save when you immediately see changes to your HTML and CSS files. Modify list items, change the structure of your page or update Div styling—you won’t have to waste time deploying before you know if you are happy with the changes. Edit your CSS to experiment with broad changes to your web page such as new colors, fonts and margins.

Live Highlighting

Live Highlighting lets you quickly see which areas on a Java EE web page are affected by a change. When your cursor is placed in an HTML file, the corresponding elements are highlighted in the browser. When your cursor is on a rule in a CSS file, all affected elements are highlighted in the browser.

Support for JSP

Maybe you use JSP to create dynamic web content on your Java EE website. With Live Preview you can view changes to static blocks allowing you to rapidly develop advanced web pages in a snap! With the first release of Live Preview, JSP support is included as an experimental preview feature. Further enhancements will be included in future CI releases.

View Multiple Browsers and Devices

Have you ever created a beautiful website in Java EE, only to discover it’s not so beautiful in a particular browser or mobile device? Live Preview lets you simultaneously test your web page on multiple browsers and simulated mobile devices so you can make sure your page always behaves properly, regardless of browser or device.

Front-end developers, ready to make your lives easier with a progressive framework? Vue.js allows you to build user interfaces and impressive SPAs efficiently, so it might be the perfect time to start learning it. Vue does have great documentation,...