Chrome开发者工具使用教程笔记

一、command+l打开 control+shift+I
二、Chrome含有八大组工具:
1、可以看到HTML,css,DOM对象,可以编辑这些内容更改页面显示效果。 ???如何更改 右键
command + f 搜索DOM树中指定内容
辅助功能:
Add Attribute: 在标签中增加新的属性;
Force Element State: 有时候我们为页面元素添加一些动态的样式,比如当鼠标悬停在元素上时的样式,这种动态样式很难调试。我们可以使用 Force Element State 强制元素状态,便于调试。
Edit as HTML: 以HTML形式更改页面元素;
Copy XPath: 复制XPath;
Delete Node: 删除DOM节点;
Break On: 设置DOM 断点。…………………………………………………………右键得到
右侧框元素:
Styles: 显示用户定义的样式,比如请求的default.css中的样式,和通过Javasript生成的样式,还有开发者工具添加的样式;
Computed: 显示开发者工具计算好的元素样式;
Event Listeners: 显示当前HTML DOM节点和其祖先节点的所有JavaScript事件监听器,这里的监听脚本可以来自Chrome的插件。可以点击右边小漏斗形状(filter)选择只显示当前节点的事件监听器。
DOM Breakpoints: 列出所有的DOM 断点;
Properties: 超级全面地列出当前选中内容的属性,不过基本很少用到。
2、 network 看页面向服务器请求的资源、资源的大小以及加载资源花费的时间、加载不成功的资源,http的请求头,返回内容等 ???network用处 查看加载速度的瓶颈在哪里
Name/Path:资源名称以及URL路径;
Method:HTTP请求方法;
Status/Text:HTTP状态码/文字解释;
Type: 请求资源的MIME类型;
Initiator解释请求是怎么发起的,有四种可能的值:
    1. Parser:请求是由页面的HTML解析时发送的;
    2. Redirect:请求是由页面重定向发送的;
    3. Script:请求是由script脚本处理发送的;
    4. Other:请求是由其他过程发送的,比如页面里的link链接点击,在地址栏输入URL地址。
Size/Content:Size是响应头部和响应体结合起来的大小,Content是请求内容解码后的大小。资料 Chrome Dev Tools - “Size” vs “Content”
Time/Latency:Time是从请求开始到接收到最后一个字节的总时长,Latency是从请求开始到接收到第一个字节的时间;
Timeline:显示网络请求的可视化瀑布流 ,鼠标悬停在某一个时间线上,可以显示整个请求各部分花费的时间。
3、sources主要用来调试js。 async 异步
HTTP request and response headers
Resource preview:可行时进行资源预览;
HTTP response: 未处理过的资源内容;
Cookie names and values: HTTP请求以及返回中传输的所有Cookies;
WebSocket messages: 通过WebSocket发送和接收到的信息;
Resource network timing: 图形化显示资源加载过程中各阶段花费的时间。
4、timeline 完整分析加载页面时花费的时间,allthing 。capture捕获 ???事件显示时间的顺序
timeline的排序比较复杂,单击timeline之后,选择根据start time、response、end time、duration、latency中的一项来排序
5、profiles 分析web应用 页面的执行时间以及内存使用情况 ………… 找到之后,看到三个方面 的选项,heap snapshot 堆快照
6、resource 对本地缓存( indexedDB、Web SQL 、Cookie、应用程序缓存、Web Storage) 中的数据进行确认及编辑
7、audits 分析页面加载过程,进而提供减少页面加载时间、提升响应速度的方案, audits 审核;
8、Console 显示各种警告与错误信息,提供shell用来和文档、开发者工具交互 shell壳、命令解析器,区分于核
三、一些单词的含义
  1. Record Network Log: 红色表示此时正在记录资源请求信息;
  2. Clear: 清空所有的资源请求信息;
  3. Filter: 过滤资源请求信息;
过滤资源类型包括:Documents,Stylesheets,Images,Scripts,XHR,Fonts,WebSockets,Other
在XHR请求中,可以在一个请求上右键选择“Replay XHR”来重新运行一个XHR请求。
还可以copy as cURL 复制网络请求作为curl命令的参数,
  1. Use small resource raws: 每一行显示更少的内容;
  2. Perserve Log: 再次记录请求的信息时不擦出之前的资源信息;
  3. Disable cache: 不允许缓存的话,所有资源均重新加载。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值