How to Edit Webpage Content Online in Browsers?

The title of this article may be confusing. First, we clarify that permanently modifying content of a webpage is not possible from the browser. Only website owner can edit the content from the website’s administrator panel and publish it online. However, in many situations you may want to insert a piece of note on the live webpage. You can take a screenshot with the updated content so that it is useful for sharing or later reference purposes. So, here we will explain how to edit the webpage content online in browsers for temporary purposes.

2 Ways to Edit Webpage Content Online

You can edit the content online in 2 ways both using the developer tools. These methods will work on all the browsers and we will explain here with Google Chrome.

1. Edit elements as HTML
2. Modify freehand with console command

1. Edit Elements as HTML

Follow the below instructions to edit the content as HTML elements.

• Open the webpage you want to edit the content in Google Chrome.
• Right click and select “Inspect” option. Alternatively, press F12 in Windows PC to open developer console.
• Use select element tool to select the element on a page to get the corresponding HTML code in the console under “Elements” tab.
• Right click on the selected element inside developer console and choose “Edit as HTML” option.

• Now, add any content you want using HTML paragraph tag. For example, paste the below code inside the element:.

<p>This is a sample text i want to insert on this page.</p>

• You can use any CSS class already used on other elements on the page with paragraph tag. In our example, we will use the background color class used in existing paragraph element.

• After adding the element, click on outside area. The new paragraph will appear instantly on the webpage.

Similar to adding elements, you can also delete any elements by right clicking on it and selecting “Delete Element” option. Close the developer tool and take screenshot with the updated content.

2. Using Console Drawer

The only issue in the above method is that you should use HTML tags to add content. If you directly want to delete or add the content on a webpage, follow this method.

• Open developer console on Chrome or other browser.
• Go to “Console” tab, paste the below code and hit enter.

document.body.contentEditable = true

• You will see a return statement as “true”.
• Now, you can delete and add any content directly on the webpage.

Close the developer console window and modify the webpage content online to add your own content.

Final Words

Some browsers like Edge offer annotation feature for quickly highlighting the important content when reading. However, editing the webpage content online will help you to add your own text or images on the page. You can take full page screenshot and keep for offline reference or insert in any documents. The updated content will be available till you close the browser or refresh the webpage.