如何在chrome（或任何浏览器）中编辑任何网页
网页只是您的Web浏览器显示的文档。但是如果你可以直接在任何网页上输入来修改它呢？你可以，而且你不需要浏览器扩展它是每个现代浏览器内置的功能。
此功能利用了“文档.designMode“功能，您可以通过web浏览器的JavaScript控制台启用。它最近被Tomek Sułkowski在Twitter上强调，但它太酷了，我们不得不与读者分享。
That feeling when you first discovered `document.designMode` pic.twitter.com/bxA1otzCjN
— Tomek Sułkowski (@sulco) September 27, 2019
您可以使用此功能在打印前清理网页，测试网页更改的外观，甚至只是恶作剧。这就像编辑一个Word文档一样，不需要搞乱HTML。
要激活此功能，请访问网页，然后打开开发人员控制台。要在Google Chrome中打开控制台，请单击“功能表”>“更多工具”>“开发人员工具”，或按Ctrl+Shift+i。
我们以Chrome为例，这个特性也适用于其他现代浏览器。以下是如何在其他浏览器中打开控制台：
- 在Mozilla Firefox中，单击“功能表”>“Web开发人员”>“Web控制台”，或按Ctrl+Shift+K。
- 在Apple Safari中，单击Safari>首选项>高级并启用“在菜单栏中显示开发菜单”。然后单击开发>显示JavaScript控制台。
- 在Microsoft Edge中，单击“功能表”>“更多工具”>“开发人员工具”，或按F12键，然后单击“控制台”选项卡。
单击开发人员工具面板顶部的“控制台”选项卡。在控制台中键入以下内容并按Enter键：
document.designMode = 'on'
如果愿意，现在可以关闭控制台，并像编辑可编辑文档一样编辑当前网页。单击某个位置**光标并键入文本。使用Backspace或Delete键删除文本、图像和其他元素。
这只会改变网页在浏览器中的显示方式。刷新页面后，您将再次看到原始页面。如果您转到另一个网页或选项卡，在打开控制台并再次键入此行之前，它不会处于设计模式。
您甚至可以返回控制台并运行以下命令来关闭设计模式：
document.designMode = 'off'网页将不再可编辑，但您所做的更改将被保留，直到您下次刷新页面。
- 发表于 2021-04-03 02:56
- 阅读 ( 132 )
- 分类：互联网
你可能感兴趣的文章
如何使网页在任何浏览器中打印都更环保
...友好（因此对环境友好），但它们通常要求您使用特定的浏览器。但是有一些工具不管你的浏览器或你要打印的页面如何都能工作，而且它们不容易使用。 ...
2016年最流行的chrome扩展和帖子
... 12016年Chrome与Firefox：哪款浏览器最适合你？--四月份，乔尔·李给了我们这篇精彩而有帮助的文章。对于那些在Chrome和Firefox之间徘徊的人，Joel强调最终是你的选择。但他也为两种浏览器提供了最喜...
6种不用鼠标快速浏览网页的方法
... 我们将首先介绍一些可用于流行浏览器的扩展，然后探讨一些主要为无鼠标浏览而设计的替代浏览器。所有这些都是免费的，而且大多数都是开源的。 ...
如何使用chrome开发工具解决网站问题
Chrome开发工具是开发人员必不可少的资产。虽然其他浏览器提供了相当方便的故障排除工具，但Chrome DevTools由于其多功能界面和流行性而值得您关注。 ...
什么是chrome“阅读列表”，您如何使用它？
...备将来使用，所以你永远不会错过好东西。 什么是谷歌浏览器阅读列表(the google chrome reading list)？ “阅读清单”正是它听起来像的——一个要阅读的东西列表。这与我们在web浏览器中使用的书签类似，但目的更为集中。 你可以...
如何使用google drive progressive web应用程序
...当你浏览一个PWA时，它的外观和感觉都和网站一样；你在浏览器中能做的一切，你都可以在这里做。 如何上传文件和文件夹 如果要添加新文件夹或上载文件或文件夹，请单击“新建”开始。 或者，您可以将文件或文件夹从...
如何将google文档、工作表或幻灯片文件共享为网页
...包含敏感或私人信息。 如何共享googledocs文件 打开你的浏览器，进入谷歌文档，然后打开你想要分享的文件。单击“文件”&gt；“发布到Web”。 接下来，单击“发布”使您的文件在Internet上可见。 单击“确定”确认要将文...
如何在googlechrome中创建、查看和编辑书签
...在Omnibox中会显示一个蓝星图标，通知您该页面已保存到浏览器中。 如何查看书签 有几种方法可以查看您在Google Chrome中保存的所有书签，这取决于您是使用书签栏还是希望浏览器尽可能简约。 使用书签栏 要通过单击访问访问...
如何充分利用chrome书签栏
...and+Shift+B（在macOS中）。 相关：如何显示（或隐藏）谷歌浏览器书签栏 从其他浏览器导入书签 当你切换到一个新的浏览器时，大部分的数据都不是那么重要，当你离开时，可能不会让你三思而后行。然而，书签是个例外，这就...
如何自定义firefox的用户界面用户浏览器.css
FirefoxQuantum的界面由于其独特的用户浏览器.css文件。您可以编辑此文件以隐藏不需要的菜单项、移动导航工具栏下方的选项卡栏、查看书签工具栏上的多行，以及执行其他通常不可能执行的操作。 如何工作 相关报道：FirefoxQua...
0 篇文章
