chrome的F12(开发者工具)介绍

在这里插入图片描述

  • 右上角菜单
  • 高亮显示页面重绘: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审计

参考资料:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值