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 Chrome but Developer tools are available in all browsers including Firefox and Safari.
How to Edit Web Pages
- Open any web page inside Chrome and select the text on the web page that you wish to edit.
- Right-click the selected text and choose Inspect Element in the contextual menu.
- The developer tools will open in the lower half of your browser and the corresponding DOM element will be selected.
- Double-click the selected node and it will switch to edit mode. Now replace the selected text with any other phrase and click outside the Chrome Dev Tools window to apply the changes.
The Chrome Inspect Tool technique is useful for making a couple of quick edits but if you are make a number of edits on a web page, there’s a better approach.
Edit Web Pages Like a Wiki
Go to your browser menu, select Tools and then choose Developer Tools from the menu. This will open the Dev Tools and now switch to the Console tab. Type the following command in the console window 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 be 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.