blog
blog copied to clipboard
使用chrome inspect调试ios safari浏览器和webview中的页面
工具:
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
客户端UIWebview
,WkWebview
中的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
您好!请问一下,我按照文档步骤操作之后一切都很正常但是就是不显示设备是什么原因呢。。
查阅了好多文档也没搞清楚,环境:mac mojava + ios12 + chrome60
@chuanner
关于这个问题,我之前提了一个issue:
https://github.com/RemoteDebug/remotedebug-ios-webkit-adapter/issues/84
没解决方案,后来也没时间关注这个了,不好意思。
关于调试ios上的webview,好像苹果不允许对webview进行调试。
没出现设备的可以检查下在Discover network targets里对应的端口号有没有设置对,这里的9000应该和remotedebug_ios_webkit_adapter --port=9000
命令中的一致
新浪微博图床失效
使用GitHub图床替换新浪微博图床