怎样修改网站内容(之前会总结几种简单的修改页面内容的方式吗?)

优采云 发布时间: 2021-08-28 20:14

  怎样修改网站内容(之前会总结几种简单的修改页面内容的方式吗?)

  注意:请勿将本文提及的技术用于非法活动,由此造成的损失本人不承担任何责任。

  简介

  之前在内测群聊的时候,发现几乎没有人知道怎么修改网页的内容,除了相关的字段。可能是因为接触过一些前端知识,所以很多人默认都知道。

  本文将总结几种简单的修改页面内容的方法。我会用一个比较简单的描述,毕竟这个知识点对于大多数前端来说都是必须的,自然理解。

  一些简单的知识点

  什么是网页?

  网页是您通过浏览器或应用程序访问的界面,由许多代码组成。这里的代码并不复杂。如果你对编程语言有一定的了解,你可以认为这个页面上的代码是logotype,而不是类似于C语言中的逻辑。我们使用几个元素标签来标记页面上的内容。

  修改网页内容会不会修改实际内容?

  您能看到的大部分页面都已加载。也就是说,在使用过程中,它是一个相对静态的页面。虽然静态页面的内容是固定的,但其大部分数据的来源仍然是服务器传递过来的数据。该技术不能也不能修改服务器动态传输的数据,也不能修改服务器中的数据,也不能将修改后的数据发回服务器(在非用户输入的情况下),只能修改已加载的静态数据。 .

  所以,它在技术上是安全的,但不要将此技术用于非法目的。

  开始

  准备

  我需要在这里解释一下。 Chrome 是谷歌拥有的浏览器。它的内核是开源的。许多浏览器也使用 Chrome 内核,例如 Edge。

  如果您的浏览器不是基于Chrome内核的,可能有些操作与本文有所不同,但思路是一样的。

  如果你不知道你的浏览器是什么内核,你可以阅读其官网的内容,或者安装Chrome。

  开启调试

  在浏览器中,按 F12 键。

  

  界面右侧会出现一个额外的区域,显示复杂的代码。这是我们的调试工具。

  在不同的浏览器中,调试工具可能有不同的名称,甚至有不同的打开方式。

  方法一元素检查

  元素检查是开发过程中非常有用的工具,方便定位和修改元素。

  如图,选择左上角的按钮,

  

  当我们再次移动鼠标时,界面会发生一些变化。

  

  此时我们的鼠标会自动显示区域内的元素,点击选择元素。

  

  点击后会自动退出元素检查,自动定位到右边的代码。

  

  双击“43.78”修改这个数字,回车确认,

  

  同时,页面内的元素也会发生同样的变化。

  

  这样可以修改任意元素的文本内容。

  如果您了解更多,实际上可以通过这种方式完全修改此页面。

  方法二 Javascript 调试

  这一次,我们将选择控制台选项卡。

  

  输入命令:

  document.body.contentEditable="true"

  按回车确认,

  

  此时我们已经进入了类似的编辑模式。

  

  如果我没记错的话,这段代码有一个小问题,就是会导致页面出现重复的波浪线,也就是拼写错误。如果你想修复它,你需要在浏览器设置中关闭文本检查功能。

  当然,如果它没有发生,那么就假设我没有说过。

  输入命令:

  document.designMode='on'

  

  不重复也能达到同样的效果。

  使用

  用途一定非常广泛。正如我开头提到的,这是前端开发不可或缺的工具。同样,它可以做很多事情,尤其是一些坏品味。

  

  月入百万的你进来挨打

  

  最后施展绝招,随心修改支付宝余额:

  

  终于

  不要尝试做违法的事情。

0 个评论

要回复文章请先登录注册


官方客服QQ群

微信人工客服

QQ人工客服


线