How to Edit Any Web Page in any web browser
Tags: javascript, tutorials, webseo, chrome
Published: 2020-08-19 09:25:53

---
title: How to Edit Any Web Page in any web browser
published: true
date: 2020-07-27 16:10:58 UTC
tags: Javascript,Tutorials,WebSEO,chrome
canonical_url: 
---

What if you could type directly on any web page to modify it live? or even create some fake screenshots? That could be awesome for any designer in order to test out font size, typography etc. The answer is that you **can** and this post will show you How to Edit Any Web Page in any web browser

So how is it possible to edit live a web page and experiment with it. Most awesome part you can do it without any browser extension.

> The feeling when you first discovered  
> **`document.designMode`**

This feature takes advantage of the “document.designMode” feature, which you can enable via your web browser’s JavaScript console. 

In order to activate this feature, visit a web page and then open the developer console.   
To open the console in Google Chrome, click menu > More Tools > Developer Tools or press **Ctrl+Shift+i**.

On other browsers:

- In Mozilla Firefox, click menu > Web Developer > Web Console or press **Ctrl+Shift+K**.
- In Apple Safari, click Safari > Preferences > Advanced and enable “Show Develop menu in menu bar.” Then, click Develop > Show JavaScript Console.
- In Microsoft Edge, click menu > More Tools > Developer Tools or press **F12** and then click the “Console” tab.

On the “Console” tab at the top of the Developer Tools panel just type the following into the console and press Enter:

```
document.designMode = 'on'
```

or even go back into the console to turn design mode off:

```
document.designMode = 'off'
```

This will trigger the current web page as if it was an editable document. Then you can click on any element on the web page and insert or remove any text.

As soon as you refresh the page, you’ll see the original once again.

Huge thanks ![🙏](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f64f.png) and credits to:

> That feeling when you first discovered `document.designMode` [pic.twitter.com/bxA1otzCjN](https://t.co/bxA1otzCjN)
> 
> — Tomek Sułkowski (@sulco) [September 27, 2019](https://twitter.com/sulco/status/1177559150563344384?ref_src=twsrc%5Etfw)

 <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[![](https://lh3.googleusercontent.com/aYbdIM1abwyVSUZLDKoE0CDZGRhlkpsaPOg9tNnBktUQYsXflwknnOn2Ge1Yr7rImGk=w300)](https://www.instagram.com/panayiotisgeorgiou)

[Follow me on Instagram](https://www.instagram.com/panayiotisgeorgiou)

![😉](https://s.w.org/images/core/emoji/12.0.0-1/72x72/1f609.png)   **That’s it for now. **

If you liked this article, then please subscribe to my [YouTube Channel](https://www.youtube.com/c/PanayiotisGeorgiou?sub_confirmation=1) for video tutorials.

You can also find me on [Twitter](http://twitter.com/panay_georgiou) and [Facebook](https://www.facebook.com/panayiotisgeorgiou.net).

The post [How to Edit Any Web Page in any web browser](https://www.panayiotisgeorgiou.net/how-to-edit-any-web-page-in-any-web-browser/) appeared first on [Panayiotis Georgiou](https://www.panayiotisgeorgiou.net).