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:
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.
Today, I am going to show you how to overcome this problem using an extension and a plugin for Intellij Idea.
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
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:
I think this is kind of awesome, do you ?
Stay live !