How to edit and check HTML/CSS pages without refreshing the page

For web developers and designers, F5 key (refresh) must be the most used key. Even when you edit small css font color you’ll check that first before proceeding to implement other features.

Firebug is one great Firefox addon by which you can modify the HTML or CSS and check the page layout and its properties, text etc there itself without refreshing the page.

After installing the addon, to edit, just select the text or right click on the area you want to modify and select Inspect Element option -

This will open up a new addon tab below the page showing you the HTML and Style of the selected area highlighting it with a color.

Now just like any normal editor, edit the HTML (on left) and CSS (on right) and you’ll see the changes to your page instantly without refreshing the page.

After you are satisfied with your design you can make the corresponding changes to your website too.

Please note that if you use Google Chrome then it has inbuilt support for the same. Follow the steps here.