前端调试技巧：F12（开发者工具）使用

打开开发者工具

使用谷歌浏览器打开开发者工具，Windows环境下，可使用键盘F12唤醒。

Console--查询隐性信息

以百度搜索为例，Console里面除了显示一些报错信息外，还有招聘信息。一些报错信息显示在Console里而不是直接抛在页面中，可以避免尴尬，又可以提示开发者。而招聘信息写在这里就是为了从普通用户中过滤出开发者了。

Network--查看资源加载

以CSDN首页为例，Network里面显示了首页加载的各类资源，及其资源大小、类型、加载耗时，加载状态等，一般标红的都是有问题的地方，可以点击进去查看错误信息。

Elements--查找页面元素

以站酷网为例，通过Elements工具（先点击工具栏左上角的箭头，再移动鼠标到页面）可以定位页面中的元素，图片，文字，视频等，看到它们附带的样式，如宽高、颜色、字号等。图片视频类的可以直接看到其资源链接，其中一些公开的链接可以在浏览器中打开。下图的链接可以在浏览器中重新打开（见本文第一张图）。

高级应用 

打断程序运行

如图，程序中有一个定时动画 window.requestAnimFrame 不断在控制台 console 时间差，这时可以在开发者工具 sources 中打断程序的运行。