How to Modify a Web Page from the Browser

Do you need to change the text that appears on a web page? Do you want to print a page but do not want a certain paragraph to appear, or do you prefer to modify a couple of sentences to better suit what you are looking for before taking a screenshot? All of this is possible since a web page is nothing more than a document, and therefore, it can be edited as if it were a Word file.

Of course, this change will always be temporary, and as soon as you refresh the page from the browser, it will be displayed again in its original format. You will make all the changes from the browser’s JavaScript console. Do not panic. It is a fairly simple process to carry out.

How to edit a web page from any browser (Chrome, Firefox, Safari, and Edge)

To achieve your goal, enable the ” document.designMode ” function, which is the one that will be in charge of doing all the “magic.” It is not necessary to make any modifications at the HTML level. However, depending on whether you use the Chrome, Firefox, Edge, or Safari browser, the procedure is slightly different.

Step # 1: Open the browser development console

Before starting, open a new tab in the browser and load the web page you want to modify. Now open the development console.

  • Chrome: Display the Chrome options menu and click on “More tools -> Developer tools.”
  • Mozilla Firefox: Open the options menu located in the upper right margin of the window and navigate to “More tools -> Developer tools.”
  • Safari: If you use an Apple computer, click on “Safari -> Preferences -> Advanced” and enable the option “Show development menu in the menu bar.” Then click on “Development -> Show JavaScript console”.
  • Microsoft Edge: Click on the options menu and go to “More tools -> Development tools.”

If you have problems opening the development console, you can also try the “Ctrl + Shift + I” key combination.

Step # 2: Enable Design Mode

To enable the “Document Design” mode, type the following command in the JavaScript console that you just opened, and hit enter:design mode

Step # 3: Modify the web page as if it were an editable document

The most difficult part is already done. From here, you have to place the cursor over the part you want to modify on the page, click and add text, delete it or make any other type of modification as if it were a simple Word document.

The moment you refresh or update the page, the changes will automatically disappear. On the other hand, if you change the tab to make changes to another website, you will also have to reactivate the design mode from the development console.

Finally, to deactivate design mode on a page, open the development console and run the following command:

document.designMode = 'off'

In this way, the page will no longer be editable, but it preserves any changes until you refresh the page. In short, a very simple command to make changes to web pages that works with any web browser.

More Like This

How to View Your Browsing History in Incognito Mode

If you have a shared computer and you think that by deleting the history you can eliminate all traces of the pages you have...

How to Increase or Change Font Size in Safari Browser on Mac

It is not a secret for anyone that surfing the web has become one of the activities that we usually do daily. And for...

How to Disable Web Notifications in Chrome for Android

Do you receive notifications in your Chrome browser? We will teach you how to disable these notifications in Chrome so that they do not...