资讯专栏INFORMATION COLUMN

我的webview调试工具

jaysun / 2174人阅读

摘要:详见调试调试浏览器页面在设置高级里检查器打开连接随便打开一个页面在开发的选项中,可以检查到打开的页面,点开就可以对该页面进行进一步的调试。

本人工作平台mac,以下全部针对mac平台 Charles http抓包

proxy>proxy settings 设置代理端口

手机设置代理连到端口上

手机里的所有请求都能被charles抓到

https抓包

proxy>SSL proxy settings 设置要代理的域名,默认端口443

proxy>proxy settings 设置代理端口

手机连到端口上

手机浏览器打开
https://charlesproxy.com/getssl

下载安装证书

接着可以访问配置域名的具体请求

拦截请求,修改返回数据

连接上代理,访问页面

右击域名,点击breakpoints

再次访问页面

charles会停留在返回数据界面,等待进一步操作

Spy-debugger

spy-dbugger是一款一站式页面调试、抓包工具。使用方便,一行命令就能启动。详见Spy-debugger

safari调试ios webview 调试iPhone浏览器页面

iphone在设置>safari>高级web检查器打开

iphone连接mac

iphone safari 随便打开一个页面

在mac safari 开发>xxx的iPhone选项中,可以检查到iphone safari打开的页面,点开就可以对该页面进行进一步的调试。

调试app webview

原材料:simulator、app、mac safari

simulator在设置>safari>高级web检查器打开

在xcode simulator中安装app,如何在simulator安装app。我是直接拿到源码在xcode里build

这个时候在simulator打开app里的webview就会被mac safari检查到。

safari在开发>simulator中,就能看见你打开的webview

safari是默认支持surce map的,所以你还可以对源码进行断点调试

(记得webpack devtool设置成为"source-map",如果是"cheap-module-source-map"或者其他设置,要么断点位置不对,要么就是直接看不到源码,这个涉及到不同devtool在不同浏览器中的表现,下次更)

ios_webkit_debug_proxy

如果你觉得safari调试用的不习惯,还是喜欢chrome调试,就需要ios-webkit-debug-proxy

安装启动
#安装
brew install ios-webkit-debug-proxy

#启动
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html

(note:启动的时候,要先打开simulator,再启动ios-webkit-debug-proxy

访问页面

simulator打开一个app的webview

chrome浏览器打开http://127.0.0.1:9221

点击要打开的页面

如果下方有"block"提示,点击页面后,去控制台再点击一下页面链接

如果页面没有出现,需要重启一下app,只有页面走网络传输的时候,才能被监听到,需要让页面再传输一次,被监听到

接下来就可以用你熟悉的调试界面查看webview了

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86954.html

相关文章

  • 干货|app自动化测试之Andriod WebView如何测试

    摘要:使用进行测试需要开发人员配合打开一个的开关。真机测试时,必须在应用中打开调试开关。点击想要调试的下方的链接,就可以查看这个页面的源代码了。通过源代码就可以查看并确定元素定位表达式了。 ...

    shinezejian 评论0 收藏0
  • Cordova应用的JavaScript代码和自定义插件代码的调试

    摘要:首先打开安卓手机的调试模式,然后用数据线连接到电脑上。打开开发者工具,这里我就能看到我正在运行应用的三星手机,,状态处于已连接状态。 我之前写过三篇Cordova相关的技术文章。当我们使用Cordova将自己开发的前端应用打包安装到手机上后,可能会遇到需要调试Cordova应用的时候。 本文就介绍Cordova应用的调试步骤。 如果大家读过之前我写的文章,就知道Cordova应用在移动...

    LiangJ 评论0 收藏0
  • APP漏洞自动化扫描专业评测报告(下篇)

    摘要:上篇中篇回顾通过收费情况样本测试后的扫描时间漏洞项对比以及扫描能力这几个方面对阿里聚安全漏洞扫描腾讯金刚审计系统百度移动云测试中心以及进行了对比分析。我推测百度对于此类漏洞的检测规则是判断是否有这个函数。 上篇、中篇回顾:通过收费情况、样本测试后的扫描时间、漏洞项对比以及扫描能力这几个方面对阿里聚安全[1]、360App漏洞扫描[2]、腾讯金刚审计系统[3]、百度移动云测试中心[4]以...

    zone 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<