怎样修改网站内容(之前会总结几种简单的修改页面内容的方式吗?)
优采云 发布时间: 2021-08-28 20:14怎样修改网站内容(之前会总结几种简单的修改页面内容的方式吗?)
注意:请勿将本文提及的技术用于非法活动,由此造成的损失本人不承担任何责任。
简介
之前在内测群聊的时候,发现几乎没有人知道怎么修改网页的内容,除了相关的字段。可能是因为接触过一些前端知识,所以很多人默认都知道。
本文将总结几种简单的修改页面内容的方法。我会用一个比较简单的描述,毕竟这个知识点对于大多数前端来说都是必须的,自然理解。
一些简单的知识点
什么是网页?
网页是您通过浏览器或应用程序访问的界面,由许多代码组成。这里的代码并不复杂。如果你对编程语言有一定的了解,你可以认为这个页面上的代码是logotype,而不是类似于C语言中的逻辑。我们使用几个元素标签来标记页面上的内容。
修改网页内容会不会修改实际内容?
您能看到的大部分页面都已加载。也就是说,在使用过程中,它是一个相对静态的页面。虽然静态页面的内容是固定的,但其大部分数据的来源仍然是服务器传递过来的数据。该技术不能也不能修改服务器动态传输的数据,也不能修改服务器中的数据,也不能将修改后的数据发回服务器(在非用户输入的情况下),只能修改已加载的静态数据。 .
所以,它在技术上是安全的,但不要将此技术用于非法目的。
开始
准备
我需要在这里解释一下。 Chrome 是谷歌拥有的浏览器。它的内核是开源的。许多浏览器也使用 Chrome 内核,例如 Edge。
如果您的浏览器不是基于Chrome内核的,可能有些操作与本文有所不同,但思路是一样的。
如果你不知道你的浏览器是什么内核,你可以阅读其官网的内容,或者安装Chrome。
开启调试
在浏览器中,按 F12 键。
界面右侧会出现一个额外的区域,显示复杂的代码。这是我们的调试工具。
在不同的浏览器中,调试工具可能有不同的名称,甚至有不同的打开方式。
方法一元素检查
元素检查是开发过程中非常有用的工具,方便定位和修改元素。
如图,选择左上角的按钮,
当我们再次移动鼠标时,界面会发生一些变化。
此时我们的鼠标会自动显示区域内的元素,点击选择元素。
点击后会自动退出元素检查,自动定位到右边的代码。
双击“43.78”修改这个数字,回车确认,
同时,页面内的元素也会发生同样的变化。
这样可以修改任意元素的文本内容。
如果您了解更多,实际上可以通过这种方式完全修改此页面。
方法二 Javascript 调试
这一次,我们将选择控制台选项卡。
输入命令:
document.body.contentEditable="true"
按回车确认,
此时我们已经进入了类似的编辑模式。
如果我没记错的话,这段代码有一个小问题,就是会导致页面出现重复的波浪线,也就是拼写错误。如果你想修复它,你需要在浏览器设置中关闭文本检查功能。
当然,如果它没有发生,那么就假设我没有说过。
输入命令:
document.designMode='on'
不重复也能达到同样的效果。
使用
用途一定非常广泛。正如我开头提到的,这是前端开发不可或缺的工具。同样,它可以做很多事情,尤其是一些坏品味。
月入百万的你进来挨打
最后施展绝招,随心修改支付宝余额:
终于
不要尝试做违法的事情。