在浏览器中有一个非常神秘的模式,称作设计模式。

在浏览器中有一个非常神秘的模式,称作设计模式

当你将一个页面设为设计模式后,你可以直接在浏览器中编辑页面内容。例如,这对于测试一些原型或者看看新标题怎么样非常方便。

那你能帮帮我吗? 那么怎么才能启用它呢?打开 DevTools console,然后输入:

1
document.designMode = 'on'

启用 body 元素的 contentEditable 属性也可以达到同样的效果,就像这样:

1
document.body.contentEditable = true

你可以编辑、删除文本,也可以拖动图像来定位它们。

designMode in action

你可以通过它来关闭设计模式:

1
document.designMode = 'off'

几乎所有的浏览器都包括此特性,包括 IE。它相当久远,但知之甚少。

https://flaviocopes.com/browser-dev-tools/