用好 F12，一键开启浏览器的「上帝模式」

前言

互联网时代，我们得以凭借一个小小的视窗浏览浩瀚的网络世界，离不开浏览器的支持。

而今网络上的各种信息和资源更是让浏览器成为每个工作族必备的工具之一，因此你或多或少听说过「F12」这一关键词。

「F12」是打开浏览器「开发者工具」的一个快捷键，「开发者工具」还有以下几种打开方式：

• 快捷键：Ctrl + Shift + I
• 快捷键（macOS）：Command + Option + I
• 右键菜单 - 检查
• 菜单栏 - 更多工具 - 开发者工具

相信如果是从事网站开发的读者对「开发者工具」并不陌生，这是进行网站调试和检查 bug 的最常用工具。

浏览器的「上帝模式」

何谓「上帝模式」？通常是指一个人对某件事情上拥有无限的控制能力，可以随心所欲地改变和操纵一切。在我们的理解中，「上帝模式」可以被用来形容某种具有超凡能力或者无限自由的状态。

就好比是在「我的世界」里开启了「创造模式」。

将这个概念应用到浏览器上，我们可以将其理解为用户通过开发者工具获得了对网页的绝对控制权。在普通人看来，网页是一个已经完成并且不可更改的东西，而开发者工具就提供了一种让普通人可以像开发人员一样去修改和操作网页的途径。

开发者工具（devtools）是一套用于开发和调试网页的工具，这些工具可以检查当前加载的 HTML、CSS 和 JavaScript，显示每个资源页面的请求以及载入所花费的时间。不同于网站创建器或者集成开发环境，开发者工具不直接参与网站的创建，而用于测试网站或网页应用的用户界面，它提供了对网页源代码的完全访问权限。

网页的本质

正如前文所述，开发者工具是一套用于检查和调试网页的工具，那么在介绍之前，首先需要了解我们浏览的「网页」的本质是什么。

网页的本质是一些用 HTML（超文本标记语言）编写的文本文件。

HTML 是一种用于创建网页的标记语言，它由一系列的标签组成，这些标签用于描述网页的结构和内容。这与 TXT、Markdown、XML 没有本质区别。

一个纯 HTML 构成的网页就像上图一样简陋，要形成精美的网页还少不了 CSS（Cascading Style Sheets）和 JS（JavaScript）的支持。CSS 用于调整网页的外观和样式，比如网页元素的颜色、大小、位置等；JS 则用于实现网页的动态效果和交互，比如登录功能、提交表单、点击事件等。

如果不是网站开发人员，我们在「开发者工具」中常用的就是使用 JS 对网站修改和查询。JS 是与 HTML 与 CSS 的交互桥梁，使我们可以轻松地通过?DOM?与网页元素进行交互。