iOS开发-iOS如何本地调试JS

前言

最近在排查问题时,遇到Html网页问题,总结下调试经验

Charles代理

HTTPS代理设置

关于 charleshttps 代理设置,这里简单说明下:

  1. 打开 Charles,选择上侧菜单栏,选择 SSL Proxying ,安装证书到手机 Mobile Device
    在这里插入图片描述
  2. 根据弹框提示,打开网址下载证书,并信赖,然后配置wifi在同一网络下,设置手动代理为下图所提示的地址,例如 192.168.3.4 端口号 8888
    在这里插入图片描述
  3. 配置需要代理的站点
    在这里插入图片描述
  4. 添加你需要抓包的站点
    在这里插入图片描述
    至此可以进行HTTPS的抓包

WKWebView的缓存机制

如果使用了 WKWebView 访问 html 资源,我们需要设置 URLRequest 实体的缓存机制为不使用缓存,这样每次才会加载 JS 等资源文件,例如如下代码

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let myURL = URL(string: "https://xxxxxxx/bindCard.html")
        let myRequest = URLRequest(url: myURL!, cachePolicy: .reloadIgnoringLocalAndRemoteCacheData, timeoutInterval: 10)
        webView.load(myRequest)
        
    }

如果不进行设置,在 Charles 中无法看到 html 相关的资源项。

本地映射

html 资源

有时候,对于 html 资源访问,如果想要修改其中的一个JS,我们可以把JS下载下来,修改之后,通过 Charles 代理来进行映射,这样达到调试的目的。

例如一个html资源,在 charles 抓包后,有如下内容
在这里插入图片描述

我们想要修改这个 bind-card.js,直接通过 URL 下载下来,修改放置到本地,然后我们需要访问这个 html 资源时,bind-card.js 文件从本地文件中去取。

  • 第一种方式是直接右键该JS,然后选择 Map Local
  • 第二种方式是选择 Tools->Map Local... 然后添加你的规则,这里我们使用第二种,先拷贝js的原始链接

在打开的 Map Local 窗口中,点击 add ,这里直接粘贴到 host 区域然后选择 port ,会自动填充大部分内容

在这里插入图片描述
这里 Port 使用 * 匹配,这里的 local Path 就是我们本地的 js 文件,这里可以先做简单的验证,例如修改加载时,弹框一个 hello world

你可以使用 alert ,这里我为了和上下文一致,使用的 layer.js 内容

        layer.closeAll()
        layer.open({
          content: 'hello world',
          skin: 'msg',
          time: 2, //2秒后自动关闭
        })

OK,再进行访问该网页,就可以看到 hello world 的弹框说明映射成功。

请求

对于 Post,get等请求,需要返回一个 json 数据的话,可以直接指定返回数据,同样这里我们设置 Map Local ,增加对 Post 请求路径的映射,Query 字段由于是动态参数,注意不要写死。

在这里插入图片描述
对于本地的路径,我们指定为返回的数据类型,如果是json类型,就指定为 .json ,内容为

{
    "code": 0,
    "message": "发送成功",
    "data": {}
}

然后再进行请求,就可以映射为本地的结果了。
在这里插入图片描述

远端映射

映射到远端

如果想和 Map Local 一样映射到远端服务器,操作也是一样,不同的是远端设置需要设置连接URL
在这里插入图片描述
这里可以填写你需要映射的网址到 Map to 栏,如果只想测试下,你可以用 Mocky 建立一个无论怎样都返回固定数据的请求地址。

映射到本地服务器

你说你不想一个一个映射了,直接映射到我本地服务器就好了,这样方便,也是可以的,对于非前端人员,搭建本地服务器可能有点费时间,我们可以直接使用最简单的方法,使用 WebStormCharles 的配合来完成。

  • OK,我们先取消所有的映射 Map LocalMap Remote,使用 Charles 先抓包你的请求 html 资源,右键选择 Save All,保存你的所有资源文件,这样保存才具有路径关系,使用Chrome保存的话没有path路径
    在这里插入图片描述

  • 将整个文件夹拖拽到 WebStorm 打开,然后选择上侧菜单栏->WebStorm->Perferences,设置端口号要小于 63342 ,然后勾选 Can accept external connections
    在这里插入图片描述

  • 然后选择右上角的 Edit Configurations ,在弹出的窗口中设置你的 Url
    在这里插入图片描述
    在这里插入图片描述

这里就是我们对应的 Url 地址了,当然也可以直接运行来调试。

  • 然后就是配置我们的 Map Remote 了,由于我们只在本地部署了 html 的相关source和js文件,响应的 post 请求并没有部署,所以路径上要更进一级,并且 Map from 的 path 需要在后面加 * ,才会匹配到所有的子路径,Map to 的不需要加 *
    在这里插入图片描述

  • 这样就可以直接映射到本地服务器了,如果有远端服务器也可以这样设置。这里只是举例说明如何映射服务器,其实本地服务器直接使用 Map Local 就可以了,如果不需要调试网页其他操作,这里不再阐述。

Safari的调试功能

需要手机打开 设置 -> Safari 浏览器 -> 高级 -> Web检查器 打开,然后在 mac 端我们打开 safari,选择 上方菜单栏 -> 开发者 就可以调试我们的网页了。
在这里插入图片描述
也支持替换 JS ,创建本地覆盖在这里插入图片描述
不过不太好用,这里不再阐述。

VConsole - 推荐使用

如果需要查看Web的日志输出,可以使用VConsole,开启之后,右下角会出现一个 VConsole 绿色按钮,点击可以查看所有日志输出和元素,通过vConsole.js 重写console方法,实现了类似于微信小程序的移动端调试效果。使用方法很简单

<script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js?v=3.2.0"></script>
<script>
    // init vConsole
    var vConsole = new VConsole();
    console.log('Hello world');
</script>

代码中,我们可以通过注入的方式,添加这个 script ,这样子就可以随时查看日志信息。

相关注入的逻辑,可以参考类似如下方案

  • 方案1
WKWebView *webview = wkWebView;
    NSString *js = [WKWebViewHybridJS hybridJS];
    [webview.configuration.userContentController addUserScript:[[WKUserScript alloc] initWithSource:js
                                                                                      injectionTime:WKUserScriptInjectionTimeAtDocumentEnd
                                                                                   forMainFrameOnly:NO]];
    [webview.configuration.userContentController addUserScript:[[WKUserScript alloc] initWithSource:@"var vConsole = new VConsole();"
                                                                                      injectionTime:WKUserScriptInjectionTimeAtDocumentEnd
                                                                                   forMainFrameOnly:NO]];
    
  • 方案2
[self.wkWebView evaluateJavaScript:@"navigator.userAgent" completionHandler:^(id _Nullable response, NSError *_Nullable error) {
//....
}];

具体不再阐述。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值