使用谷歌浏览器开发工具

1、打开谷歌浏览器的开发者工具，可以直接在页面上点击右键，然后选择审查元素

3、也可以直接记住这个快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打开控制台)，或者直接按F12。打开的开发者工具如图：

5、下面来分别说下每个Tab的作用。Elements标签页，编辑页面上的元素，包括HTML和CSS

7、Elements标签页的右侧可以对元素的CSS进行查看与编辑修改

9、看到元素具有的方法与属性，比查API手册要方便得多哦(要注意某些方法和属性在IE、FireFox等其他浏览器下面的支持情况，Resources标签页

11、Network标签页

13、在这里看到HTTP请求头、HTTP响应头、HTTP返回的内容等信息，对于开发、调试，都是很有用的。Scripts标签页，这个标签页就是查看JS文件、调试JS代码的。

15、甚至还可以为某一XHR请求或者某一事件设置断点

17、Profiles标签页，这个主要是做性能优化的，包括查看CPU执行时间与内存占用

18、Audits标签页，这个对于优化前端页面、加速网页加载速度很有用哦(相当与Yslow)

20、甚至可以分析出页面上样式表中有哪些CSS是没有被使用

22、除了查看错虱忪招莫误信息、打印调试信息(console.log())、写一些测试脚本以外，还可以当作Javascript API查看用。酴兑镗笄查看console都有哪些方法和属性，可以直接在Console中输入"console"并执行