❝ 学习使用浏览器自带的 F12 网页开发者工具，可以帮助前端以及测试人员来快速定位调试分析问题、解决问题。
❞
一、如何调出开发者工具
在浏览器页面上
- F12 键 (笔记本电脑 Fn + F12)
- 右键选择 检查(N)
- 快捷键 Ctrl + Shift + i
二、开发者工具初步介绍
开发者工具最常用的四个功能模块：
元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。
1、元素（Elements）
❝ 查看网页页面的所有元素，修改元素的代码与属性。用于查看修改元素的属性、CSS 属性、监听事件以及断点等等。
❞
查看元素的代码
点击左上角的箭头图标（或按快捷键 Ctrl+Shift+C）进入选择元素模式，从页面中选择需要查看的元素，可以在开发者工具元素（Elements）一栏中定位到该元素源代码的具体位置。
查看元素的属性：定位到元素的源代码之后，可以从源代码中读出改元素的属性。
修改元素的代码与属性
点击元素，然查看右键菜单，可以看到 chrome 提供的可对元素进行的操作：包括编辑元素代码（Edit as HTML）、修改属性
