前端优化-移动设备的性能分析

在移动设备上调试网页

浏览器可以模拟相关设备的分辨率、像素比、网络、cpu情况等。在很多时候，我们还是会在某些设备上碰到一些性能、渲染或其他问题需要真机调试。

准备工作

我们可能需要做一些准备

• 一台安卓设备
• 一根usb连接线
• 在你的pc上安装chrome浏览器
• 在你的安卓设备上安卓chrome浏览器

开发者模式

拿出我们的安卓设备，我们需要开启设备的开发者模式。进入设置–系统设置–关于手机，点击版本号7次开启开发者模式。不同的手机可能进入路径不同，请看设备说明书或者网络搜索。

允许使用usb调试

开启开发者模式的设备。让我们使用usb连接线把安卓设备连接到pc,你会看到 是否允许usb调试的 询问，请点击是。

连接调试设备

在pc上打开Chrome 浏览器，并在地址栏输入 chrome://inspect回车。稍等几秒，我们就可以在Remote target 下看到我们的设备，如下图。

如果你在Remote target里看不到你的设备，你可能需要检查一下开发者模式是启开发、是否允许usb调试。有一些设备，你可能还需要自己安装设备的驱动程序。

开始调试

一切准备就绪，让我们开始真机调试吧。拿出我们的安卓设备，打开chrome并输入v2ex.com。我们的Remote target 列表好像有一些变化。

刚刚我们在手机端输入的v2ex.com出现在了remote target 下。点击一下inspect试试

跳出了chrome devTools工具，并且还有实时的屏幕同步-预览。现在我们可以像在pc上调试一样去调试我们网页在设备上的表现了。请保持你的设备屏幕激活，锁屏状态下无法实时同步屏幕。

遗憾的是，目前只支持在手机chrome上使用这个功能。很多手机自带的浏览器、微信浏览器并不支持。

ios上调试

调试ios设备比起安卓设备会复杂许多。

1. 在你的ios设备上开启 web inspect。 设置–> safari –> 高级 – > web 检查器(Settings > Safari > Advanced > Web Inspector)
   https://github.com/google/ios-webkit-debug-proxy

2. 安装 ios_webkit_debug_proxy

   brew update
   brew unlink libimobiledevice ios-webkit-debug-proxy
   brew uninstall --force libimobiledevice ios-webkit-debug-proxy
   brew install --HEAD libimobiledevice
   brew install --HEAD ios-webkit-debug-proxy

3. 安装最新版 adapter

   npm install remotedebug-ios-webkit-adapter -g

4. 连接你的Ios设备和mac,并在ios设备上选择信任。

5. 运行 adapter 命令 remotedebug_ios_webkit_adapter --port=9000
6. 在ios里打开safari,输入地址v2ex.com
7. 打开chrome,输入 chrome://inspect,在 Discover network targets添加localhost:9000
8. 使用时记得关闭代理软件并且保证手机和电脑处一并一局域网。
   
   一切看起来都和安卓一样~。