- 右上角菜单
≡
- 高亮显示页面重绘:
More tools
>Rendering
> 勾选Paint flashing
- 监控页面上没有使用到的资源文件:
More tools
>Converage
(点进相应文件,里面标红的表示没使用,绿色则表示被网站使用了)- 怎么监控页面动画变更(多用于开发简单网页游戏时调试):
More tools
>Animations
。- 网络条件与User-Agent(改变浏览器是pc版还是android版)的设置:
More tools
>Network conditions
(Network throttling ,模拟3G网速快或慢的情况;User agent,去掉勾后选相应项,来模拟pc或手机端)- 远程调试android设备方法:
More tools
>Remote devices
,在pc上调试android手机。- 让浏览器阻止请求某个资源:
More tools
>Request blocking
勾选复选框,点加号用正则表达式填写要过滤的文件。- 在全站文件中搜索内容:
More tools
>Search
(支持正则表达式)- 模拟传感器:
More tools
>Sensors
(模拟手机横竖屏、坐标等)
- Elements窗口,调试“HTML、CSS”多在此操作。前端设计师用的多。
- 选中一个页面元素,然后右键
copy outerHTML
,获得选中元素及其子元素的html代码,copy seletor
获得选中元素的css层次选择器。Styles
,可以直接修改元素样式并立刻看效果。里画横线样式,是因为被覆盖(样式优先级造成的)。下面还有“盒子模型”,也可以改值在页面中看效果。点击:hov
,选相应项,可查看鼠标放上和移除css效果。Event Listeners
,用于找到元素的对应事件源码。步骤:点右上角“鼠标”图标并选中目标元素,然后出现click,在对应控件后面点击链接就能定位到js源码。
- Console窗口,显示当前页输出的日志。
- 可以直接在里面写一段与页面上下文无关的js并运行。右边齿轮可勾选显示日志时间戳等。
- NetWork窗口,查看请求的所有的各类资源(all–所有资源,XHR–所有ajax请求,…),查看每个资源报文头、执行时间和内容。
- 必须F5后页面资源才能被监控到。
- 第一排菜单依次是:“开启or关闭”功能,清空当前记录,摄像头开启则对每次请求进行截图,对请求记录进行分组,勾选
Preserve log
,F5后旧的请求记录不会被清空。勾选Disable cash
,请求时会重新获得最新资源。Offline
,模拟断网效果。- 点“XHR”筛选出所有ajax请求,然后点击相应项,可以查看“报文头、预览响应结果(
当结果是json时会格式化显示
)、响应内容、响应时间”。- 状态栏如
12 requests、858KB transferred 、Finish:31.9s、DOMConentLoaded:31.74s、Load:31.81S
。含义:页面共12个资源请求,文件大小是858KB,页面加载结束耗时31.9s,执行DOMConentLoaded事件(DOM载完)耗时31.74s,执行Load事件耗时31.81s。
- Sources窗口
- 在要调试的js处最左边打断点,触发代码后,F10进行一步一步调试js。
- 调试js时
Call Stack
(调用堆栈,是一个方法列表,按调用顺序保存所有在运行期被调用的方法)显示被调用的方法。Watch
,调试时监控自己添加到watch的变量。Scope
显示被使用变量,Local里是局部变量。- 点击主窗口状态栏左边
{}
可对当前页的html、css和js代码进行格式化显示。- 左边
Page
是当前页所有资源tree,可Ctrl+P
通过key搜到目标资源。- 左边
FileSystem
浏览到当前也所在文件夹,当你在Elements
中改动时会同步到源码中。
- Performance
Performance
性能分析:指分析有js动画的页面为啥卡顿。右边齿轮,可对cpu4倍或6倍降低(以人为降低js性能)。
点击黑“圆圈”,进行录制。过一段时间后点击停止。红色时段表示卡顿,点选可了解帧情况。
- Application
Application
的cookie,列出某个站点所有的cookie。可在此编辑某个cookie值。可清空某个站点所有cookie。Application
的Cache:离线化类应用主要用到本功能,如GMail的离线功能。把资源缓存下来。Application
的Frames,可快速保存站点资源。展开后右键保存。
- Security
Security
,站点安全方面信息,可看站点证书。另外,在网站输入域名查看更全面安全性。
- Audits审计
参考资料: