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输出些数据看看,比如百度的控制台好像很厉害的样子
chrome开发者工具初探_第1张图片

source
可以看下该页面相关的资源有哪些,可以改完了,ctrl+s保存,js还可以打断点慢慢走下来,调试
chrome开发者工具初探_第2张图片

Network
可以看每个资源的网络请求,以及开始时间,使用了多少时间Timeline,点击左侧资源还能看到http头和preview等信息
chrome开发者工具初探_第3张图片
chrome开发者工具初探_第4张图片

Timeline
点击左上方的小点开始,然后刷新网站可以看到相关的分析信息
chrome开发者工具初探_第5张图片

Profiles
点击Take Heap Snapshot然后点击Take Snapshot可以进行内存快照,左侧会显示该页面占用了多少堆内存
chrome开发者工具初探_第6张图片

Application
可以看到manifest,localstorage,cookie等存储信息和数据库信息
chrome开发者工具初探_第7张图片

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

你可能感兴趣的:(js,html5)