前言
「F12」是打开浏览器「开发者工具」的一个快捷键,「开发者工具」还有以下几种打开方式:
快捷键:Ctrl + Shift + I
快捷键(Mac OS):Command + Option + I
右键菜单 - 检查
菜单栏 - 更多工具 - 开发者工具
浏览器的「开发者模式」※
何谓「开发者模式」?通常是指一个人对某件事情上拥有无限的控制能力,可以随心所欲地改变和操纵一切。在我们的理解中,「上帝模式」可以被用来形容某种具有超凡能力或者无限自由的状态。
就好比是在「我的世界」里开启了「创造模式」。
「我的世界」中的「上帝模式」
将这个概念应用到「开发者工具」上,我们可以将其理解为用户通过「开发者工具」获得了对网页的绝对控制权。在普通人看来,网页是一个已经完成并且不可更改的东西,而「开发者工具」则提供了一种让普通人可以像开发人员一样去修改和操作网页的途径。
「开发者工具」(通常称作 devtools )是一套用于开发和调试网页的工具,这些工具可以检查当前加载的 HTML、CSS 和 JavaScript,显示每个资源页面的请求以及载入所花费的时间。不同于网站创建器或者集成开发环境,“开发者工具”不直接参与网站的创建,而用于测试网站或网页应用的用户界面,它提供了对网页源代码的完全访问权限。
网页的本质※
正如前文所述,开发者工具是一套用于检查和调试网页的工具,那么在介绍之前,首先需要了解我们浏览的「网页」的本质是什么。
网页的本质是一些用 HTML(超文本标记语言)编写的文本文件。
HTML 是一种用于创建网页的标记语言,它由一系列的标签组成,这些标签用于描述网页的结构和内容。这与TXT、Markdown、XML没有本质区别。
眼花缭乱的网页实际上是由文本渲染而成
区别在于浏览器识别到HTML的标签后会将其渲染成对应的格式,比如以下HTML代码:
<!DOCTYPE html>
<header>
<h1>这是一个标题</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</header>
<section id="content">
<article>
<h2>文章标题</h2>
<p>这是一段文章内容。</p>
<figure>
<img style="width: 30px;" src="image.jpg" alt="图片描述">
<figcaption>图片标题</figcaption>
</figure>
<table border="1">
<tr>
<th>表头 1</th>
<th>表头 2</th>
<th>表头 3</th>
</tr>
<tr>
<td>单元格 1</td>
<td>单元格 2</td>
<td>单元格 3</td>
</tr>
</article>
</section>