浏览器 F12 开发者工具快速入门

一、F12 开发者工具是个啥？

通俗的话讲，就是提供给 Web 前端工作者进行页面、样式、脚本、调优……的一类开发工具。是基于浏览器的扩展功能，典型的关键字就是 “console” ，写在 js 中能被识别，但本质上并不是 js 原生提供的，而是浏览器提供的对象。

二、常见使用场景

如何打开就一笔带过了，可以直接按 F12 或者在页面中鼠标右键→审视元素

①修改html页面

如下图，鼠标对“百度一下”按钮审视元素，即可开启开发者工具，在左侧“Element”窗口下把“value”改为 海螺一下 后按下回车，页面便实时发生了变化。

在“Element”窗口下选中了标签后会在右侧显示该标签所应用的样式。例如在右侧“style”窗口下同样可以选中 css 样式如 “font-size”,目标样式进入选中状态后按快捷键 ↑、↓、pageUp、pageDown可调整样式值。（↑+Alt 则是以 0.1 为增量变化；↑+Shift是以 10 为增量变化）

点击 Sources 标签可查看到许多静态资源，包括 .css、.js 等等，商业级项目多数是会对 .css 等进行去除“无效”字符压缩文件大小的，而这种文件是难以辨识的。例如此处的 mt_min_d0e7c6d2.css 便是难以辨识的，点击图中 红色圆圈处即可将 css 样式格式化。

②调试JS

一图流，和常见 IDE debug 无明显区别，知道如何加断点和如何下一行后就应该是信手拈来了。

说起调试就不得不提到 “console” 对象了,将 “console” 相关代码写入js 即可产生效果。
console.log();
console.info();
console.error();
……
在控制台输出日志，上述是日志级别的区别，显示样式会有所不同

console.time(“A”);
……
console.timeEnd(“A”);
即可输出time、timeEnd 之间代码的执行时间。

console API 传送门

③追踪 Ajax 请求

进入到“Network”窗口下，选中 XHR 即可，追踪到 Ajax 请求。有 “HTTP 协议”基础的话，可以很快速的确认请求的内容，和发送URL等一系列关键信息