通过 Chremo 浏览器调试手机页面(IOS 和 Android)

当前位置: 首页 » 文章 » 通过 Chremo 浏览器调试手机页面(IOS 和 Android)

分类: 文章 748阅读阅读模式

一、调试 Android 设备

1、在 Android 设备中开启开发者模式(一般在设置 - 关于手机或通用-连续点击 5 次版本号就会开启)

2、将设备连接到 PC ,在 Chrome 浏览器地址栏输入:chrome://inspect/#devices

3、Android 设备会提示是否授权调试,允许调试后,如下图1的出现手机自带浏览器和谷歌浏览器的访问的链接,直接点击 inspect 开始调试吧。

4、调试画面如下图2

备注1:如果出现 页面空白 或者 404 那么恭喜你,需要翻墙

或使用如下解决办法:

在 C:\Windows\System32\drivers\etc\hosts 文件加入

  1. 61.91.161.217 chrome-devtools-frontend.appspot.com
  2. 61.91.161.217 chrometophone.appspot.com

错误如下图3/4(请点击放大):

备注2:Android4.4 开始支持开发者工具调试,老版本Android检测不到webview

 

 

二、调试 IOS 设备

1、在 Iphone 的 设置 - safari - 高级 - web检查器(Safari preferences) - 开启后连接电脑。

2、问“要信任该电脑?”,点击信任后在电脑安装并打开 iTunes 。

3、在电脑安装 ios_webkit_debug_proxy (传送门) 和 RemoteDebug iOS WebKit Adapter (传送门)

3.1、安装 ios_webkit_debug_proxy 和 RemoteDebug iOS WebKit Adapter 前,需要安装 scoop (传送门) 下载并安装

3.2、打开命令提示符依次输入执行下面几行命令

  1. scoop bucket add extras  ios、
  2. scoop install ios-webkit-debug-proxy
  3. npm install -g vs-libimobile
  4. npm install -g remotedebug-ios-webkit-adapter

 

4、使用以下命令启动

  1. remotedebug_ios_webkit_adapter --port=9000

启动成功将会出现上面图1画面。如果启动失败,请参考第 5 点。

 

5、启动失败后跳过第 4 点,命令提示符中执行下方代码

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

然后在 chrome://inspect/#devices 页面中的 port forwarding 加入 9221 端口,启动成功将会出现上面 图1 画面。

或者直接访问提示的 9221 或 9222 端口 http://127.0.0.1:9221/,出现如下图5 则表示成功。

 

 

 

 

 

相关文章

评论一下

暂无评论