WEB DEVELOPMENT - EDIT YOUR CSS AND HTML PAGES IN YOUR BROWSER AND PERSIST THE CHANGES DIRECTLY IN YOUR IDE IS NOW POSSIBLE WITH GOOGLE DEV TOOLS

Hi, and welcome back.

I am sure many of you at least once tried to edit directly in your browser, a css or an html page of a web application deployed in an application server like Tomcat, and persist these changes back in your favourite IDE, with no luck.

This article describe how to edit a css or an html page in your browser and see the changes you made reflected in your source code, using a google dev tools new features called workspace.

The biggest limitations are that:

• 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" tab.
• 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.

Here is the link to the guide: Dev tools workspaces.

In the next articles I will show you how to overcome the limitations of this solution!

These features are live in Chrome 28.

STAY WEB!

LUCA