Live Preview & CodeLive for Fast Web Development
Live Preview Changes
Quickly Jump to Source
CodeLive for Angular lets you see the files or components that are loaded on the page, and then quickly jump from the page to the source. Use Live Preview and CodeLive together and take your web development to the next level!
Instantly View ChangesFor 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 HighlightingLive 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.
Jump to Source Code from the Browser
Use the CodeLive Dashboard to quickly jump from a web page to its source. For Angular applications, the dashboard lists the active Angular components. Select the file to open: TypeScript , HTML template or CSS .
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.