Wednesday, February 1, 2023

How to edit a web page layout in the browser

Summary: How to edit a web page in a browser.

Here is something my 10-year-old showed me that I used at work today. Since I do not do this often, it's mostly a note to self (in case I forget). If you need to play with a web page layout in a browser (I, for example, needed to add some new lines to a few messages on the page to see what makes them easier to read). It is very simple (the instructions assume you are using Google Chrome, but I suspect you can do the same in other browsers).

  1. Right click anywehere on the web page and select the Inspect option from the context menu.
  2. In the Developer Tools' window, switch to the Console tab.
  3. At the prompt, type in document.body.contentEditable=true and press Enter.
  4. Make your changes on the page (you can cadd, change and delete text, and do other things).
  5. When done with your changes, at the prompt, type in document.body.contentEditable=false and press Enter
Happy programming.