How to Edit Any Web Page in your Browser

H
Published in: wiki - Web Design

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.

📮  Subscribe to our Email Newsletter for Google tips and tutorials!
Published in: wiki - Web Design

Looking for something? Find here!

Meet the Author

Web Geek, Google Developer Expert
A
Amit Agarwal

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. He is the developer of Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory

Get in touch

Google Add-ons

Do more with your Gmail and GSuite account
G

We build bespoke solutions that use the capabilities and the features of Google Workspace for automating business processes and driving work productivity.

  1. Mail Merge with Attachments
    Send personalized email to your Google Contact with a Google Sheet and Gmail
  2. Save Emails and Attachments
    Download email messages and file attachments from Gmail to your Google Drive
  3. Google Forms Email Notifications
    Send email notifications to multiple people when a new Google Form is submitted
  4. Document Studio
    Create beautiful pixel perfect documents merging data from Google Sheets and Google Forms
  5. Creator Studio for Google Slides
    Turn your Google Slides presentations into animated GIFs and videos for uploading to YouTube