如何在浏览器中使页面可编辑

There is a special and pretty secret mode in browsers, called design mode.

浏览器中有一种特殊且非常秘密的模式，称为设计模式 。

When you set a page into design mode, you can edit the content of the page directly inside the browser page, which is very handy to test some prototype or check out how a new headline would look, for example.

将页面设置为设计模式时，可以直接在浏览器页面内编辑页面的内容，例如，这对于测试某些原型或检查新标题的外观非常方便。

How do you enable it? Open the DevTools console, and type:

如何启用它？ 打开DevTools控制台 ，然后输入：

document.designMode = 'on'

The same result can be triggered by enabling contentEditable on the body element, like this:

通过在body元素上启用contentEditable可以触发相同的结果，如下所示：

document.body.contentEditable = true

You can edit text, delete it, and also drag images around to reposition them.

您可以编辑文本，将其删除，也可以拖动图像来重新定位它们。

You can turn off the mode by using

您可以使用以下方式关闭模式

document.designMode = 'off'

This feature is supported by almost every browser, IE included. It’s pretty old, but quite unknown.

几乎所有包括IE在内的浏览器都支持此功能。 它已经很旧了，但是还很未知。

翻译自: https://flaviocopes.com/designmode/