chrome开发者工具初探

chrome和ff一直都是web开发者最后青睐的浏览器，作为先进浏览器在兼容性和html5的支持都非常的不错，比IE要好多了，头好痛，今天来研究下chrome开发者工具
在window中按F12就可以调出来了，中间有几个选项卡，Elements、console、sources、network、timeline，profiles，application，Security，audits
先来看下Elements

这里显示页面相关的dom树，然后右侧的话显示了CSS，如果在线调试看效果的话，可以直接双击DOM来对其里面的内容来进行修改，右侧的css也可以修改，如果要看到hover这类要点击上面的：hov然后勾上响应的多选框，这样的话就能看见该dom对应的事件了。
console
用来输出点调试数据，可以用console.log输出些数据看看，比如百度的控制台好像很厉害的样子

source
可以看下该页面相关的资源有哪些，可以改完了，ctrl+s保存，js还可以打断点慢慢走下来，调试

Network
可以看每个资源的网络请求，以及开始时间，使用了多少时间Timeline，点击左侧资源还能看到http头和preview等信息

Timeline
点击左上方的小点开始，然后刷新网站可以看到相关的分析信息

Profiles
点击Take Heap Snapshot然后点击Take Snapshot可以进行内存快照，左侧会显示该页面占用了多少堆内存

Application
可以看到manifest，localstorage，cookie等存储信息和数据库信息

后面两个没怎么用过，嘎嘎