一、概述
F12开发者工具可用于查看HTML元素、响应事件、网络状态……测试人员和前端开发常用来快速定位调试分析问题。
调试用到最多的功能通常就四个:元素(Elements)、控制台(Console)、源代码(Sources)、网路(Network)
Elements:可用于查看或修改HTML元素的属性、CSS属性、监听事件、断点;
Console:一般用于执行一次性代码,查看JS对象,查看调试日志信息或异常信息;
Sources:查看HTML、CSS、JS的源代码,调试JS代码;
Network:查看URL、status、type、size、time、waterfall,弱网模拟
二、细说 1.元素(Elements)查看、修改元素代码
通过箭头图标选择页面中的元素,可查看对应的元素属性(properties),双击可以修改(修改只会对当前页面渲染生效)。
还有些功能,见名知意。
2.控制台(Console)查看JS对象及其属性;执行JS语句;查看控制台日志:当网页的JS代码中使用了console.log()函数时,该函数输出的日志信息会在控制台中显示。
3.源代码(Sources)?
?tree-源文件、页面代码设置断点、右侧断点设置栏((继续)运行、单步跳过、单步进入等)
4.网络(Network)网络请求设置(请求开关、清除列表、过滤条件等)、下方的请求信息表
?列表就是要分析的对象了,可以看到URL,响应状态码,响应数据的类型、大小和时间,如果请求过多,可用filter(漏斗图标)进一步筛选,支持正则表达式搜索。
waterfall能分割重要的请求耗时,鼠标移动到相关区域时可以看到,各种请求阶段耗时在页面上有简单的数据标识,在性能分析时可帮助判断(以后深入了再说)。
三、其他用途复制某些页面上不可复制的文字;
下载不能保持的图片;
(都是避开站点的限制,找到他们的本源所在,然后编辑操作,原理差不多)
……
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #手机f12开发者工具 #F12简结前端开发测试