blog icon indicating copy to clipboard operation
blog copied to clipboard

使用chrome inspect调试ios safari浏览器和webview中的页面

Open mrdulin opened this issue 7 years ago • 6 comments

工具: https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter 翻墙工具 - 终端需要翻墙,为了brew update; chrome需要翻墙,为了chrome://inspect/#devices

remotedebug-ios-webkit-adapter是一个调试协议适配器,可以使用VS Code, Chrome DevTools, Mozilla Debugger.html,或者其他兼容Chrome调试协议的工具,来调试Safari浏览器中,Webview中的页面。

测试环境: Google Chrome 版本 63.0.3239.132(正式版本) (64 位) Google Chrome 版本 66.0.3329.1(正式版本)canary (64 位) iPhone 6s - ios 10.2 Mac OSX

步骤: https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter#getting-started

照着官网的步骤来一遍,打开ios safari web inspector,打开osx Safari - 开发 - 找到手机 - 用于开发,手机上信任该电脑,最后运行:

remotedebug_ios_webkit_adapter --port=9000

一、调试ios Safari浏览器中的页面

打开chrome://inspect/#devices,勾选Discover network targets,添加host和端口

终端输出:

ios Safari浏览器中被调试的页面:

二、调试cordova或者ios客户端UIWebviewWkWebview中的h5页面 - 未测试通过

相比调试Safari浏览器中的页面,有时候更迫切的需求是调试webview中的页面,类似使用chrome inspect调试Android app webview中的页面。

ios app打Debug包可以使用Mac OSX Safari的Web inspector来调试webview中的页面,但是用remotedebug-ios-webkit-adapter + chrome inspect没有inspect到webview中的页面。

Build Configuration - Debug

mrdulin avatar Jan 23 '18 12:01 mrdulin

您好!请问一下,我按照文档步骤操作之后一切都很正常但是就是不显示设备是什么原因呢。。 查阅了好多文档也没搞清楚,环境:mac mojava + ios12 + chrome60 2018-10-31 4 10 42

2018-10-31 4 11 01

chuanner avatar Oct 31 '18 08:10 chuanner

@chuanner

关于这个问题,我之前提了一个issue:

https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter/issues/84

没解决方案,后来也没时间关注这个了,不好意思。

mrdulin avatar Oct 31 '18 08:10 mrdulin

关于调试ios上的webview,好像苹果不允许对webview进行调试。

AnathanPham avatar May 08 '20 07:05 AnathanPham

没出现设备的可以检查下在Discover network targets里对应的端口号有没有设置对,这里的9000应该和remotedebug_ios_webkit_adapter --port=9000命令中的一致 image

Juice007 avatar Jun 24 '21 12:06 Juice007

新浪微博图床失效

mrdulin avatar Jun 24 '21 12:06 mrdulin

使用GitHub图床替换新浪微博图床

mrdulin avatar Jul 04 '21 01:07 mrdulin