admin管理员组文章数量:1665468
前言
Google Chrome 浏览器是目前开发者最常用的浏览器,其具有稳定性、快速和安全性的特点,并创造出简单且有效率的用户界面,在全球桌面浏览器中大约有66%的占有率。
1、打开调试
通过按 Command+Option+I (Mac) 或 Control+Shift+I(Windows、Linux),打开 DevTools。
1.1 开始调试
https://googlechrome.github.io/devtools-samples/debug-js/get-started
1.2 修改html内容,Css样式
1.3 步骤
1、设置代码行断点
2、检查变量值
3、监视表达式
4、在 Code Editor 中,将第 31 行 var sum = addend1 + addend2 替换为 var sum = parseInt(addend1) + parseInt(addend2)
5、按 Command+S (Mac) 或 Control+S(Windows、Linux)以保存更改
6、点击 Deactivate breakpoints 其将变为蓝色,表示处于活动状态。 在完成此设置后,DevTools 会忽略您已设置的任何断点。
1.4 调试按钮介绍
Pause/Resume script execution:暂停/恢复脚本执行(程序执行到下一个断点停止) F8
Step over next function call:执行到下一步的函数调用(执行但不进入)F10
Step into next function call:进入当前函数(一步一步执行每一行代码)F11
Step out of current function:跳出当前执行函数 Shift F11
step:与Step into next function call一样 F9
Deactive/Active all breakpoints:关闭/开启所有断点(不会取消) Ctrl F8
Pause on exceptions:异常情况自动断点设置(Exception 断点)
1.5 断点类型
断点类型 | 您想要在以下情况下暂停时可使用此断点类型... |
代码行 | 在确切的代码区域中。 |
条件代码行 | 在确切的代码区域中,且仅当其他一些条件成立时(判断、循环)。 |
DOM | 在更改或移除特定 DOM 节点或其子级的代码中。 |
XHR | 当 XHR 网址包含字符串模式时。 |
事件侦听器 | 在触发 click 等事件后运行的代码中。 |
异常 | 在引发已捕获或未捕获异常的代码行中。 |
函数 | 任何时候调用特定函数时。 |
1.5.1 其中DOM断点,分三种
Subtree modifications 子节点内容的的修改删除新增(子节点的属性修改不会触发,当前节点的修改不会触发)
Attributes modifications 当前节点的属性修改删除新增
Node Removal 当前节点被移除
1.5.2 XHR 断点
2、检查动画
使用 Chrome DevTools 动画检查器检查和修改动画。
使用方法
1、转到 Styles 窗格(位于 Elements 面板上),然后按 Animations 按钮
2、打开 Command Menu,键入 Drawer: Show Animations
- 通过打开动画检查器捕捉动画。检查器会自动检测动画并将它们分类为多个组。
- 通过慢速播放、重播或查看动画源代码来检查动画。
- 通过更改动画时间、延迟、持续时间或关键帧偏移修改动画。
演示
https://daneden.github.io/animate.css/
修改动画
- 动画持续时间。
- 关键帧时间。
- 开始时间延迟。
4、找出无用的JavaScript、Css
有时候往往用几个样式或方法就会引用一个大的Css或JavaScript,加载时会把整个文件下载下来,其实没必要。
1、无用代码减缓加载速度
2、用户通过移动网络加载,会消耗用户流量
所以通过Coverage Tab,找出无用的JavaScript、Css。打开Coverage Tab
分析code coverage
注意:查找未使用的代码相对容易。但是,重构代码库以使每个页面仅提供所需的JavaScript和CSS可能很困难,重构需谨慎!
4、网络面板(Network)
网络面板记录页面上每个网络操作的相关信息,包括详细的耗时数据、HTTP 请求与响应标头和 Cookie等等。
- Status. HTTP返回状态码
- Type. 文件类型
- Initiator. 造成这次请求的原因
- Time. 耗时
- Waterfall. 瀑布图(请求的不同阶段)
4.1 模拟无网络、慢网络环境
4.1.1 禁用缓存 Disable cache
4.1.2 筛选类型
XHR:大部分情况表示ajax请求
JS请求
CSS请求
4.1.3 过滤关键字(Filter)
请求url
文件名
4.1.4 Perserve log
默认情况下,页面发生跳转之后,之前的请求url地址等信息都会消失,勾选perserve log后之前的请求都会被保留
4.2 分析加载耗时原因并优化
4.2.1 慢速在第一个字节 (TTFB)
TTFB是“最初的网络请求被发起”到“从服务器接收到第一个字节”所花费的毫秒数)
原因:
1、客服端和服务器连接很慢。
2、服务器响应缓慢。在本地托管服务器,以确定是连接速度慢还是服务器速度慢。如果在本地服务时仍然获得较慢的TTFB,则服务器速度很慢,否则连接慢。
解决:
1、如果连接速度慢,请考虑将您的内容托管在CDN上或更改托管提供商。
2、如果服务器运行缓慢,请考虑优化数据库查询,实现缓存或修改服务器配置。
4.2.2 花费很多时间在下载
原因
1、客户端和服务器连接慢
2、很多内容需要下载
解决:
1、考虑将您的内容托管在CDN上或更改托管提供商。
2、通过优化您的请求获取更少的内容。
3、图片压缩,能用代码实现就不要用图片。
eg:
http://www.xin7tian/
结论:
1、视频资源加载的东西较多,加载后会缓冲
2、图片加载比较耗时
4.2.4 查看图片大小和尺寸
4.2.5 Ctrl+Shift+P Command+Option+P (Mac) 搜索调试工具
5、扩展程序
Chrome DevTools构建为可扩展的。因此,如果DevTools缺少所需的功能,则可以找到现有的扩展。
5.1 AdBlock 拦截广告
开启前:
开启后:
将广告图片替换为你喜爱的图片:
5.2 Axure RP
5.3 JSONView
5.4 Xdebug helper
Xdebug 支持 PHPStorm, Eclipse with PDT, Netbeans and MacGDBp等开发工具
版权声明:本文标题:Google Chrome浏览器使用技巧 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1730044060a1220580.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论