原生app的h5如何调试,一文解答。🔥🔥🔥

415 阅读1分钟

下载安装软件

我们可以使用Charles,抓到app原生内嵌h5的http的请求,让快速排查问题,让开发简单。

抓包代理设置

  • charles代理设置

第一步: 如何抓包

启动代理服务器

1.这里简单操作进行设置,Proxy ---> Proxy Settings默认端口是8888,根据实际情况可修改。 可以设置抓包数据类型,包括http与socket数据,可以根据需要在proxies栏下勾选。

2.手机链接时就可通过局域网ip + Proxy Settings默认端口是8888, 这时charles就可以抓到手机的请求了。

设置代理服务器:

第一:Proxy ---> Proxy Settings默认端口是8888 image.png

image.png

手机连接charles的代理服务器

查看电脑ip

image.png

打开手机连接的当前的wifi,设置代理。

  • 主机名: 电脑ip
  • 端口: 代理端口 8888

iwEcAqNqcGcDAQTRAkAF0QUABrCaO436xZK2HgXxHmC4bfAAB9MAAAAAy3pCoQgACaJpbQoAC9IAAIC0.jpg_620x10000g.jpg

  • 最后抓包如下

image.png

第二步: 本地代码调试

找到对应的抓包的js资源,css资源,点击右键选择Map Remote,将资源替换成本地。 image.png

正则表达式写法 image.png