怎么利用浏览器开发者模式编辑修改网页上的信息

CodeAE

当我们打开某个网页时是不可以直接对页面信息进行修改的，那当我们想对页面中的一些文字信息进行修改时怎么办呢？
此时我们就可以利用浏览器自带的开发者模式进行编辑修改。

首先我们先来认识2个代码：
document.designMode = "on" 和 document.body.contentEditable = "true" 都是用于启用网页编辑功能的 JavaScript 方法，但它们在作用范围和用法上有重要区别：

1、 document.designMode = "on"

作用范围：应用于整个文档（包括 <html> 及其所有子元素）。
效果：整个页面变为可编辑状态（类似富文本编辑器），用户可以直接修改文本、删除或移动元素（所见即所得）。

2、 document.body.contentEditable = "true"

作用范围：仅针对 <body> 元素及其子内容（不包括 <head>）。
效果：允许用户编辑 <body> 内的文本和元素。可通过 CSS 或 JS 限制特定子元素不可编辑（例如设置 contentEditable="false"）。

以微软的Microsoft Edge浏览器为例：
1、我们鼠标右健选择检查或者直接按健盘的F12即可打开开发者模式

2、然后点击下方的控制台输入代码document.body.contentEditable="true"按回车确认即可。

此时你就发现我们可以对网页中的文字信息自由修改了

[电脑常识] 怎么利用浏览器开发者模式编辑修改网页上的信息

CodeAE LV9