1.Element面板
调试HTML和CSS
1.1.对HTML增删查改
可以修改节点内容也可以修改节点的属性
可以删除一个节点
可以增加一个节点:选中一个节点,右键edit as html
1.2.对CSS增删查改
点击某个节点,右侧会出现相应的这个节点的所有样式。我们可以看到每一个样式在哪个文件中,这个样式集成与哪个文件,哪个样式被覆盖了,还有这个元素的盒模型
修改样式:双击
在已有的中添加样式
直接添加一个新的
删除一个样式:去掉勾选
2.network面板
查看所有的网络请求,在和后端调试一些接口的时候可能会用到
3.source面板
包含网站所有的资源,js源码,图片资源
可以设置断点来调试JS文件
4.命令行工具
可以在console面板中直接输入JS代码进行执行
或者在js文件中输入一些值,方便调试
5.Resource(Application)
包含网站本地的数据资源比如:cookie,storage
6.profile,Timeline,audits用于调试网页的性能
7.针对于IE
IE 早期不自带更新,所以存在了IE6---IE11这么多的版本
IE8+自带调试工具,
IE6:浏览效果:IEtester,调试:IE6原声浏览器+IE Developer Tool