1.Element:元素列表:用于调整Html和Css;Event Listener(事件监听):
在代码上右键-->copy-->capyoutHtml可以复制别人的Html代码
在代码上右击-->copy-->copy selector-->可以复制元素的层次关系
Computed计算:浏览器加载所有文件之后呈现的样式和布局(因为浏览器渲染存在覆盖的问题),可以查找到最终起作用的哪一个
2.Console:控制台
3.Source:源文件:用于调整JS代码,右侧可以添加监视(Watch)和事件的类型(Event Listener Breakpoints)
格式化JS代码::在Sources模式下查看压缩过的JS,可以点击左下脚的花括号{}Pretty print来格式化JS代码
给JS代码设置断点:在Source模式下,点击JS代码左侧可以设置断点,F5重新加载(推荐右键重新加载)即可,右边有按键可以进行分步调试
4.NetWork:交互中心:用于Ajax请求和数据抓取,XHR,查找参数,查看HTTP协议
Disable cache:勾选上为无缓存模式浏览页面:每次都是重新加载最新的数据
Filter:过滤器:可以自定义输入,也可以点后面定义好的类型(正则,JS,CSS等)
Preserve log:保存日志.一直在增长,用于对比修改后和修改前的数据
Online:模拟在各种网络环境下加载网页
5.箭头可以选择网页元素定位代码
在Element模式下,右键网页图标点检查可以精准定位代码