KonishiLee's Blog

关于在 Mac 上用 Chrome 调试手机页面

背景

相信很多前端开发在 Mac 上都调试过手机页面吧,不过还停留在系统自带的 Safari?

这里回答是:“NO!”。因为 Google 公司有一个很好的库 ios-webkit-debug-proxy
专门针对这个问题。

所以这里我也来讲一讲 ios-webkit-debug-proxy 的使用方式。

安装

Homebrew

需要安装 ios-webkit-debug-proxy 之前必须要先安装一下 Homebrew,如果不知道怎么安装的,可以参照我前面写的一篇《前端开发者Mac配置(一)》

ios-webkit-debug-proxy

brew install ios-webkit-debug-proxy

安装好了之后这里需要去更新一下 libimobiledevice

1
2
brew uninstall --force libimobiledevice ios-webkit-debug-proxy
brew install --HEAD libimobiledevice ios-webkit-debug-proxy

连接手机

这里需要先设置一下手机

English:Settings > Safari > Advanced > Web Inspector = ON
中文:设置 > Safari > 高级 > Web 检查器 > 打开

启动代理

接下来在 terminal 中执行以下代码

1
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

调试地址

1
http://localhost:9221 # 终端连接设备

查看可调试页面,这里就是列出你可以调试的页面(跟后面的地址有关系)

1
http://localhost:9222 #是否可以访问

打开调试地址

1
chrome-devtools://devtools/bundled/inspector.html?ws=localhost:9222/devtools/page/1

注意:这里 page 后面跟的 1 就是 http://localhost:9222 里面的列表序号!

成功完成以下的步骤,基本上就可以在 Chrome 上调试手机页面了。

如果喜欢这个分享,就帮忙买杯咖啡吧