如何在Chrome(或任何浏览器)中编辑任何网页

网页只是您的网络浏览器显示的文档。但是,如果您可以直接在任何网页上键入以进行修改怎么办?您可以,也不需要浏览器扩展程序,它是每个现代浏览器都内置的功能。

此功能利用了“ document.designMode”功能,您可以通过网络浏览器的JavaScript控制台启用该功能。 TomekSułkowski最近在Twitter上强调了这一点,但它是如此酷,我们必须与读者分享。

您可以使用此功能在打印网页之前清理网页,测试网页的外观,甚至只是恶作剧。就像编辑Word文档一样-无需弄乱HTML。

要激活此功能,请访问网页,然后打开开发人员控制台。要在Google Chrome浏览器中打开控制台,请依次点击菜单>更多工具>开发者工具,或按Ctrl + Shift + i。

以此处的Chrome为例,该功能也可以在其他现代浏览器中使用。在其他浏览器中打开控制台的方法如下:

  • 在Mozilla Firefox中,单击菜单> Web Developer> Web控制台,或按Ctrl + Shift + K。
  • 在Apple Safari中,单击Safari>首选项>高级,然后启用“在菜单栏中显示开发菜单”。然后,单击开发>显示JavaScript控制台。
  • 在Microsoft Edge中,单击菜单>更多工具>开发人员工具或按F12,然后单击“控制台”选项卡。

单击“开发人员工具”面板顶部的“控制台”选项卡。在控制台中输入以下内容,然后按Enter:

document.designMode ='开'

现在,您可以根据需要关闭控制台,并像编辑可编辑文档一样编辑当前网页。单击某处以插入光标并键入文本。使用Backspace或Delete键删除文本,图像和其他元素。

这只是改变了网页在浏览器中的显示方式。刷新页面后,您将再次看到原始页面。如果您转到另一个网页或标签,则只有在打开控制台并再次键入此行后,它才会处于设计模式。

您甚至可以返回控制台并运行以下命令以关闭设计模式:

document.designMode ='关闭'

该网页将无法再编辑,但您的更改将被保留,直到您下次刷新该页面为止。


$config[zx-auto] not found$config[zx-overlay] not found