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:
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.
![Pinterest](https://pinterest.com/pin/create/button/?url=https://sourceht.com/how-to-modify-a-web-page-from-the-browser/&media=https://sourceht.com/wp-content/uploads/2021/09/edit-a-web-page.jpg&description=To edit a web page, enable the " document.designMode " function, which is the one that will be in charge of doing all the "magic."){kind=link}