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

Play ;

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.

Play ;

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.