Google Chrome浏览器使用技巧

前言

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.com/

结论：

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等开发工具