1.直接打开控制台
Fn+F12
2.Elements标签页
这个就是查看、编辑页面上的元素,包括HTML和CSS:
3.Resources标签页
Resources标签页可以查看到请求的资源情况,包括CSS、JS、图片等的内容,同时还可以查看到存储相关的如Cookies、HTML5的Database和LocalStore等,你可以对存储的内容编辑和删除。
这里的CSS文件有一个特性,你可以直接修改CSS文件,并且修改即时生效:
4.Network标签页
Network标签页对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用,特别是在查看Ajax类请求的时候,非常有帮助。
点击左侧某一个具体去请求URL,可以看到该请求的详细HTTP请求情况:
5.Scripts标签页
这个标签页就是查看JS文件、调试JS代码的
6.Timeline标签页
注意这个Timeline的标签页不是指网络请求的时间响应情况(这个在Network标签页里查看),这个Timeline指的JS执行时间、页面元素渲染时间
7.Profiles标签页
这个主要是做性能优化的,包括查看CPU执行时间与内存占用
8.Audits标签页
这个对于优化前端页面、加速网页加载速度很有用(相当与Yslow)
9.Console标签页
就是Javascript控制台了
这个除了查看错误信息、打印调试信息(console.log())、写一些测试脚本以外,还可以当作Javascript API查看用。
例如我想查看console都有哪些方法和属性,我可以直接在Console中输入"console"并执行: