codetc - 网站开发技术 首页 前端 查看内容

浏览器自带开发工具的秘密

2014-9-27 23:34| 发布者: CODETC| 查看: 7873| 评论: 0|来自: w3cfuns

性能

禁用浏览器缓存

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

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 页试试。

文章来源 CODETC,欢迎分享,转载请注明地址: http://www.codetc.com/article-1-1.html
123

最新评论

 作为游客发表评论,请输入您的昵称

返回顶部