chrome浏览器网页版_如何在Chrome（或任何浏览器）中编辑任何网页

编程知识更新时间:2023-05-03 01:10:19

chrome浏览器网页版

Web pages are just documents your web browser displays. But what if you could type directly on any web page to modify it? You can, and you don’t need a browser extension—it’s a feature built into every modern browser.

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

This feature takes advantage of the “document.designMode” feature, which you can enable via your web browser’s JavaScript console. It was recently highlighted by Tomek Sułkowski on Twitter, but it’s so cool that we have to share it with our readers.

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

That feeling when you first discovered `document.designMode` pic.twitter/bxA1otzCjN

当您首次发现`document.designMode` pic.twitter/bxA1otzCjN时的那种感觉

— Tomek Sułkowski (@sulco) September 27, 2019

-TomekSułkowski(@sulco) 2019年9月27日

You could use this feature to clean up a web page before printing it, test how changes to a web page will look, or even just prank people. It’ll be just like editing a Word document—no messing with HTML required.

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

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.

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

While we’re using Chrome as an example here, this feature works in other modern browsers, too. Here’s how to open the console in other browsers:

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

In Mozilla Firefox, click menu > Web Developer > Web Console or press Ctrl+Shift+K.
在Mozilla Firefox中，单击菜单> Web Developer> Web控制台，或按Ctrl + Shift + K。
In Apple Safari, click Safari > Preferences > Advanced and enable “Show Develop menu in menu bar.” Then, click Develop > Show JavaScript Console.
在Apple Safari中，单击Safari>首选项>高级，然后启用“在菜单栏中显示开发菜单”。然后，单击开发>显示JavaScript控制台。
In Microsoft Edge, click menu > More Tools > Developer Tools or press F12 and then click the “Console” tab.
在Microsoft Edge中，单击菜单>更多工具>开发人员工具或按F12，然后单击“控制台”选项卡。

Click the “Console” tab at the top of the Developer Tools panel. Type the following into the console and press Enter:

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

document.designMode = 'on'

You can now close the console, if you like, and edit the current web page as if it was an editable document. Click somewhere to insert your cursor and type text. Use the Backspace or Delete keys to remove text, images, and other elements.

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

This just changes how the web page appears in your browser. As soon as you refresh the page, you’ll see the original once again. If you go to another web page or tab, it won’t be in design mode until you open the console and type this line once again.

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

You can even go back into the console and run the following command to turn design mode off:

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