网页破解的傻瓜之道:如何暂时性地修改任意网页内容

每一天我们都在使用浏览器,用它来搜索、学习、阅读、查邮件……但是,你或许从来都不知道,在你的浏览器中隐藏着一个无比强大的工具:「检查元素」。

在任何网页点击右键,点击「检查」,你会通过这个窗口看到整个网页内部结构:网页的源代码、设计图、样式表、使用的字体、图标,酷炫的网页动画脚本代码等等。你还可以看到你打开这个网页花了多少时间,以及每一段文本使用了什么样的颜色值。

以上这些,听起来似乎都是属于「程序员」的事情。但是,对于大多数的「非程序圈」人来说,你可能对于网页代码根本不感兴趣,但是你可能更想知道的是,如何用「检查元素」来做一些更接地气的事:

  • 设计师:你想要看一下网页在移动设备预览的外观是怎么样的?或者想要看一下如果把按钮的颜色修改为绿色效果如何?你可以通过「检查元素」在几秒钟内完成。
  • 营销者:你想知道竞争对手在其网站标题中使用了哪些关键字,或者想知道你的网站为什么加载速度这么慢?「检查元素」都可以帮助你完成。
  • 写作者:厌倦了每一次都要在屏幕截图中模糊你的名字和电子邮件?借助「检查元素」,你可以在一秒钟内更改网页上的任何文本。

我想对于绝大多数人来说,你可能最感兴趣的应该是「把任意的网页修改成你想要的样子」这一点了。让我们来看一下这到底是怎么回事。

比如,在某一刻,半撇有道儿的公众号粉丝数量是这样的:

如果,你希望在这些数字短时间能够翻10倍甚至100倍,它也可以是这样的:

让我们来看看这个是如何实现的吧!

打开桌面浏览器

无论你是写过代码的开发人员还是完全不懂代码的营销者,如果你正在手机上阅读这一篇文章,现在你可以切换到笔记本电脑,打开 Google Chrome 就可以准备开始了。

大多数Web浏览器(包括Mozilla Firefox和Apple的Safari)都包含一个「检查元素」的工具,而Microsoft的Internet Explorer和Edge浏览器也包含一组类似的开发工具。本文重点介绍Google Chrome的「检查元素」工具,但大多数功能在其他浏览器中也都具备。

打开开发者工具

你有有几种方式可以访问 Google Chrome 的检查元素。只需打开一个想要尝试编辑的网站(按照本教程进行操作,打开www.bpteach.com),然后以以下三种方式之一打开「检查元素」工具:

  1. 右键单击网页上的任意位置,在弹出的菜单底部,你会看到「检查」,点击这个按钮。
  2. 点击 Google Chrome 工具栏最右侧的汉堡菜单(带有3个堆积点的图标),点击「更多工具」,然后选择「开发者工具」。或者,在文件菜单中,单击查看 - >开发人员 - >开发人员工具。
  3. 喜欢键盘快捷键?在Mac或PC 上按下CMD+ Option+ I,或者F12,你可以在无需单击任何内容的情况下打开「检查元素」工具。

如果你的屏幕底部的检查元素没有足够的空间,因此单击检查元素窗格右上角“X”旁边的三个垂直点,将窗格放置到屏幕的右侧。

修改网页元素

现在,你到了「检查元素」的窗口,你当然可以拿它来修改背景图片、颜色、文本、字体等等,但是在本文中我们着重介绍文本的修改。

  1. 双击选中你想要修改的文字,点击鼠标右键,你会看到这个部分变成了蓝色突出的文本块:

  1. 你会看到右侧的对应的文字也被选中了,双击“开发人员工具”窗格中呈蓝色突出显示的部分(比如这里的“做是最好的学”),它将变为可编辑的文本字段。

  1. 这时候,你就可以自由地修改文本了,然后按回车!网页就会呈现出你修改后的样子了:

当然,这都只是暂时性的修改,当你刷新页面,一切都将恢复正常。

「检查元素」作为浏览器非常重要的一个开发工具,当然能量要远远大于这一点,如果你希望深入的研究,你可以阅读 Google 的官方指南

写到这里,我想说的是:虽然我们总是相信「数据背后的道理」,但是永远不要轻易地相信「图片就是数据背后的真相」。

最后小广告,「半撇的创业手记」社群(知识星球)试运营开始了,在这个星球里,我会把创业过程中解决问题的方法和失败的经验都收录到里面,每一个季度的新课程内测也会在这里完成,如果你感兴趣,可以回复「社群」加入(当然,它是付费的)。

Comments
Write a Comment