使用 document.designMode 在浏览器中实时编辑网站

 网页只是浏览器显示的文档。 在开发的时候，想直接在网页上进行修改，一般是调出 DevTools，在元素上修改看效果。但其实还有更方便的方法可以直接在页面上进行修改，也不需要浏览器安装扩展程序，它是每个现代浏览器如 Google Chrome、Safari、Firefox 都内置的功能。

这个功能是利用了“ document.designMode”功能，您可以通过浏览器的JavaScript 控制台中启用该功能。允许您直接编辑整个文档，此属性默认情况下设置为 off，让我们将其更改为 on。

document.designMode="on"

也可以使用另一个代码，也能达到相同的效果。

document.body.contentEditable = true