WEB DEVELOPMENT - LIVE EDIT YOUR HTML, CSS AND JAVASCRIPT CODE WITH INTELLIJ IDEA

In latest post:

Edit your css and javascript code in google dev tools and persist the changes in your favourite IDE

I have shown you a new feature of Google Web Tools that makes you edit some of the components of your web application directly in your browser and persist the changes in your IDE. 

This is a brilliant feature for web developers that want to become faster, but there are two main limitations:

• DOM changes in the "Inspect Elements" panel are not persisted. Only style changes on the Elements panel are persisted. You will need to modify it form the "Source" panel.
• Only styles defined in an external CSS file can be changed. Changes to element.style or to inline styles are not persisted back to disk. If you have inline styles, they can be changed on the Sources panel again.

This limitations can't be obviously be addressed by a web browser because the code you are seeing in the elements panel could be totally different from your source html page. You can generate html code and DOM object at runtime using scripting languages, so any tentative to reflect changes from the elements panel to your source code, would lead to mistakes. 

Also, as you may know, all the changes you make in the "Source" panel, are not live changes, which means that you will not see the their effects directly on the page you are visualizing in your browser; You will first have to save the page and then reload it in your browser. This process is time consuming especially if you have many elements you want to edit and you want a visual fast feedback.

Today, I am going to show you how to overcome this problem using an extension and a plugin for Intellij Idea.

If you are working on web application an you want to see the changes you make to your html/css/JavaScript being reflected live on the your application pages in the browser, you can install this awesome plugin:

LiveEdit - for IntelliJ web editors

Prerequisites

1. The LiveEdit plugin is enabled if you are using Intellij WebStorm. In case you are using Intellij Idea like I am doing, you can install the plugin from the plugins menu and enable it. 

Once you downloaded it, you can enable the extension from the edit menu.

2. You will need to install The JetBrains Chrome Extension is installed in your Chrome browser if not already installed.

The extension is installed when you first initiate a debugging session and follow the dedicated link provided by WebStorm. For details, see Using JetBrains Chrome Extension and How to install Chrome extension.

Live debug session

Live editing is supported only in debug mode, but with the latest version of the Chrome extension you won't even need to create a debug configuration in your IDE and run it. Just right click on a web page an select inspect with Idea:

Once you have done that you can start edit the source HTML directly in your IDE and the changes will be reflected in the real time in your browser. You won't even notice the delay. For instance:

You can also edit css or javascript. The changes will still be live in your page in your browser:

I think this is kind of awesome, do you ?

Stay live !

Luca