Editing a Webpage in Real-time with a Handy Tool - Inspect Element

html bracesEditing an (HTML) webpage in real-time is the best thing a web developer needs to edit in the page he developed, in realtime.

The problem most learning developers have is, they firstly write a really complex and lengthy code and after that to compile that lengthy code they needed a compiler ( Compiler is a software that converts a high-level language to a low-level language and runs it. )

In web developing programmers need to check the working of a web page in real time, means as soon as they edit the code it runs immediately in-front of them.

The real-time editing of a page is done with a inspect element tool present in most of the web browsers now (Google Chrome, Mozilla Firefox, etc. ).

Follow the steps below to edit a webpage in real-time :
  1. Open a web page you want to edit.(example: www.google.com)
  2. Right click on the page where you want to edit and click the inspect element option. The function key F12 would also work to open inspect element tool.
  3. On the browser the inspect element interface will be seen there.
  4. In the respected interface there'll be two columns seen, the center one is the real running html code, and the right column is the CSS or Style present on the screen.
  5. Edit the html code and CSS styles in order to see working them on the opened page.
  6. In order to close the Inspect element tool press the key F12.
Screenshots:
chrome Inspect Element screenshot

Post a Comment

Post a Comment (0)

Previous Post Next Post