鲁达 一个程序员按照要求编写网页，不可能一次编写就完全达到目的，一般要对自己的代码修改调试几次后才能到达要求，浏览器的 F12 开发人员工具就可以很方便地帮助程序员调试自己的代码。
F12 开发人员工具是一套按需采用的工具，网站开发人员可以随时在任何网页上使用 F12 工具，从而快速调试 JavaScript、HTML 和级联样式表 (CSS)，还可以跟踪并查明网页或网络的性能问题。 那么， F12 调试页面各个功能分别是什么？
NO1：Elements 标签页
Elements 标签页的左侧就是对页面 HTML 结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。
NO2：Elements 标签页的右侧
NO3：Network 标签页
Network 标签页对于分析网站请求的网络情况、查看某一请求的请求头、响应头以及响应内容很有用。需要注意的是在你打开 Chrome 开发者工具后发起的请求，才会在这里显示。
NO4：Sources 标签页
Sources 标签页可以查看到请求的资源情况，包括 CSS、JS、图片等内容，也可以设置各种断点。对存储的内容进行编辑然后保存也会实时的反应到页面上。
NO5：Audits 标签页
这个对于优化前端页面、加速网页加载速度很有用。点击 run 按钮，就可以开始分析页面，分析完就可以看到分析结果了。
NO6：Console 标签页
就是 Javascript 控制台了。
在控制台中可以直接模拟手机、调整 UA、修改网络连接状态。