How to Edit Any Web Page in your Browser

Web pages are read-only but did you know that it is possible to edit the content of a web page directly in your web browser. This step-by-step tutorial explains how you can easily edit the content of any web page using Developer Tools. I’ve used Google Chrome for this example but Developer tools are available in all browsers including Mozilla Firefox and Safari.

How to Edit Web Pages

Here’s a step by step guide on how you edit the webpage text even if that website is not your own.

  1. Open any web page inside Chrome and select the text on the web page that you wish to edit.
  2. Right-click the selected text and choose Inspect Element in the contextual menu.
  3. The developer tools will open in the lower half of your browser and the corresponding DOM element will be selected.
  4. Double-click the selected node and it will switch to edit mode. Now change the text inside Dev Tools and click outside the Chrome Dev Tools window to apply the changes.

If you are familiar with HTML tags, you can use the same technique to not just edit the text on web pages but also replace images, change formatting styles, and more.

Also see: How to Replace Text in Web pages

The Chrome Inspect Tool technique is useful for making a couple of quick edits but if you are making multiple text changes on a web page, there’s a better approach.

Edit Websites Like a Wiki

Go to your browser menu, select Tools, choose Developer Tools and then choose JavaScript console. If you are in Safari for Mac, choose the Develop menu, and then choose Show JavaScript Console. In Firefox, go to Tools > Web Developer > Show Web Console.

Inside the console window, type the following JavaScript code at the command prompt and hit Enter.

document.body.contentEditable = true;

What this will do is make your entire web page editable just like a Wiki or a Word document. You can now click anywhere on the web page and start typing.

Please do note that web page edits are temporary and the changes are lost when you close the browser. The technique is however still handy if you are taking screenshots of web pages and would like to conceal or replace some phrase before capturing the image.

Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory


Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.