性能

禁用浏览器缓存

每个浏览器都可以禁用网页的缓存，确保资源每次都从服务器加载。

Chrome ，设置小齿轮里找，“General”-> “Disable cache”。

IE 菜单栏的“Cache 缓存”下面。

Opera，点击网络标签清除缓存，选择“网络选项”-> “禁用所有缓存”

Firebug，网络标签 -> 下拉菜单“禁用浏览器缓存”

在任何浏览器呼出清除缓存对话框，Ctrl + Shift + Delete（Windows），Shift + Cmd + Backspace（Mac）。

排序网络请求找到瓶颈

在网络标签按顺序显示每个请求的资源，点击每列的标题可以重新排序。

大部分的浏览器在网络标签共享公共字段，你可以通过文件名；域名；资源类型；HTTP 状态；方法和资源大小这些字段排序。

在 IE 中，文件名和域名字段合并了。

Chrome 更进一步，点击“Timeline”字段显示额外的排序选项：

• Start Time 默认选项，按每个请求开始时间排序
• Response Time 按网络请求获得响应的时间排序
• End Time 按请求完成时间排序
• Duration 按请求完成花费时间排序
• Latency 浏览器初始请求到接收响应的时间总和。以等待时间排序，可以看看哪个资源占用了大量时间等待响应。等待时间依赖于用户距服务器的距离，设置 Content Delivery Networks （CDN）可以改善此时间。合并 CSS 和 JavaScript 文件，图像拼接可以减少资源请求数，因此减少总延迟。

网络时间轴导出为 HAR 文件

HAR（HTTP 存档）文件可以用于各种性能分析技术和调试。测试提 bug 时可以附上 HAR 文件 - 开发人员可以在本地运行 HAR 数据查找问题原因。

我们可以用 Chrome 开发工具导出网络标签时间轴，右键点击网络输入，选择“Save as HAR with Content”。

Firebug 需要另安装插件 Net-export，此工具由 Firebug 开发主管和 HAR 格式创造者开发。

chromeHAR 是个在线工具，提供跟 Chrome 一样的时间轴界面，功能类似。

检查 DOMContentLoad 和 Load 事件

Chrome 和 Safari （以及 Firebug 网络面板）的网络时间轴显示网页加载有多快，用一条线标记 DOMContentLoaded 和 load 事件触发的时机。

当浏览器解析文档完毕（但是其他资源比如图像，样式表可能未下载完毕）DOMContentLoaded 触发，它用蓝线标识。

当所有初始资源（图像，样式表，JavaScript）加载完毕，load 事件触发一次，它用红线标识。

当两个事件同时触发，标识线是紫色的。

在 Safari ，标识线是虚线。

重发送 XHR 请求

如果希望重发送 XHR 请求，但不想刷新页面或重触发事件，可以右键点击资源，选择“Replay XHR”（Firebug 叫“Resend”）。

测量渲染性能和 FPS

Chrome 提供了帧率时间轴，可以逐帧调试网站。

要创建帧时间轴，首先打开 Chrome 开发工具，选择“Timeline”标签，底部黑色的圆形代表“record 记录”，按下开始时间轴记录，按第二次停止记录。记录的同时，你可以跟网页正常交互，帧模式会记录所有帧的行为。

时间轴图表每一条代表单帧动画，不同的颜色表示如下： 蓝色表示加载任务，黄色表示脚本任务，紫色表示渲染任务，绿色表示绘制任务，白色区域代表空闲时间。

时间轴图表下面是网页性能的瀑布图，帧显示在标题列，标题单元格还包含画这帧花费的毫秒数；相应的动作也记录在左侧。

你可以拖动两个灰色的鼠标滑块，改变你想检查的帧的数量。

悬停在时间轴的标题行显示帧的持续时间；FPS 数值；CPU 时间和与帧交互的合计时间。

悬停在左侧的记录上面，可以看到每个任务的持续时间；还有其它有用信息。如果有页面相关的部分，则会高亮，有些任务被分组了，点击瀑布图的箭头查看。

移动端

开发工具调试 IOS

把 IOS 设备连接到可用的 Mac，打开 Mac 和 IOS 设备的 Safari 。

找到 Safari 的“Develop 开发”菜单，第一个菜单分隔线的后面应该是你要连接的 IOS 设备的名字。在子菜单选择你想调试的页面。

Safari 的开发工具将以弹出窗口的式出现，你可以调试移动设备的站点了。

开发工具调试 Android

你可以用Mac 上的 Chrome Canary 开发工具调试安卓设备上的公共和本地网站，你可以在手机上访问 Chrome 开发工具的广泛的特性集。

首先，需要在安卓设备安装 Chrome BETA 。

然后，需要下载 ADB 插件扩展，安装到 Chrome Canary 上。从未在 Google Play 商店下载过的话，需要拖拽文件到扩展页 （chrome://extensions/）。

确保已经在 chrome://flags 里面打开“Enable Developer Tools experiments 启用开发工具实验”。

手机用 USB 线插到电脑上，在手机找到“设置”，选择“开发人员选项”，确保“USB 调试”选上。如果它已经选上，而你以前从未用过 USB 调试，取消选择，重选一次，确保它有此计算机的 MAC 地址。

现在到安卓上的 Chrome BETA ，点击菜单图标和“Settings 设置”，确保“Enable USB Web debugging 启用 USB Web 调试”启用。打开新标签。

在 Chrome Canary ，点击 ADB 插件图标，点击“Start ADB”，需要重启浏览器。

访问检查页（chrome://inspect ），找到设备（需要 Chrome Canary 28 +），找到要调试的标签。点击页面 URL 右侧的“Inspect 检查”链接。

弹出“Settings 设置”窗口，点击“Experiments 实验”标签，启用“Reverse Port Forwarding ”，你需要关闭窗口重启开发工具，“Port Forwarding”标签出现之前，再点“Inspect 查看”链接。

在 Port Forwarding 标签，输入想转发的端口（例如 9000），地址，应该可以映射到本地的电脑了。现在，在移动设备输入 localhost:端口号（如 localhost:9000），本地的站点应该加载到移动设备上了，并且可以调试了。

扩展

覆盖地理位置

在 Firefox ，位置 API 可以像 Chrome 一样覆盖，需要 Geolocater 扩展 。

安装后到“Tools”工具菜单，“Geolocater”，“Manage 管理”，在这你可以通过浏览地图或搜索位置，直接添加“伪造的”地理位置。你可以覆盖先前预设的地理位置。可以到 html5demos for Geolocation 页试试。