美文网首页热修复/热更新Mobile DevelopiOS 开发
JSPatch热修复入门指南和js断点调试

JSPatch热修复入门指南和js断点调试

作者: wu大维 | 来源:发表于2016-07-25 14:03 被阅读758次

    背景

    是否有过这样的经历:新版本上线后发现有个严重的bug,可能会导致crash率激增,可能会使网络请求无法发出,这时能做的只是赶紧修复bug然后提交等待漫长的AppStore审核,再盼望用户快点升级,付出巨大的人力和时间成本,才能完成此次bug的修复。

    一开始我以为JSPatch是React-Native中抽取出来的,后来发现和React-Native完全没关系。这个项目和JSPatch平台,oc转换工具等是原作者一个人写的,大神就是大神。

    使用JSPatch可以解决这样的问题,只需在项目中引入JSPatch,就可以在发现bug时下发JS脚本补丁,替换原生方法,无需更新APP即时修复bug。

    例子

    首先拷贝 JSPatch/目录下的三个文件 JSEngine.m/ JSEngine.h/ JSPatch.js到项目里即可。demo下载地址:JSPatchDemo

    //
    //  ViewController.m
    //  TestJSPatch
    //
    //  Created by wuwei on 16/7/20.
    //  Copyright © 2016年 wuwei. All rights reserved.
    //
    
    #import "ViewController.h"
    
    @interface ViewController ()<UITableViewDataSource,UITableViewDelegate>
    @property(nonatomic,strong)UITableView* mytableView;
    @property(nonatomic,strong)NSArray *dataSource;
    
    @end
    
    @implementation ViewController
    
    - (void)viewDidLoad
    {
        
        UITableView* tv = [[UITableView alloc]initWithFrame:self.view.bounds
                                                      style:UITableViewStylePlain];
        self.view.backgroundColor = [UIColor clearColor];
        self.mytableView = tv;
        self.mytableView.delegate = self;
        self.mytableView.dataSource = self;
        [self.view addSubview:self.mytableView];
        self.dataSource = @[@"aaaa",@"bbbbb"];
    }
    
    #pragma mark -- UITableViewDataSource
    
    - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
    {
        return 3;
    }
    
    - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
    {
        static NSString* i=  @"cell";
        UITableViewCell* cell = [tableView  dequeueReusableCellWithIdentifier:i];
        if (cell == nil ) {
            cell =[[UITableViewCell alloc]initWithStyle:UITableViewCellStyleDefault
                                        reuseIdentifier:i];
        }
        cell.textLabel.text = [NSString stringWithFormat:@"第%li行",(long)indexPath.row];
        return cell;
    }
    
    - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
    {
        // cell有三行,当我点击第三行的时候肯定会数组越界导致 crash
        //  还好我在JS里弥补了这个bug,详情请看JS里的处理
        NSString *content = self.dataSource[indexPath.row];
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:nil message:content delegate:nil cancelButtonTitle:@"确定" otherButtonTitles:nil, nil];
        [alert show];
    }
    
    @end
    
    //demo.js
    //用 defineClass()
    // 定义 Objective-C 的类,对类和实例方法进行动态替换。
    defineClass("ViewController", {  
                //instance method definitions
                tableView_didSelectRowAtIndexPath: function(tableView, indexPath) {
                var row = indexPath.row()
                if (self.dataSource().count() > row) {  // 加上判断越界的逻辑
                    var alertView = require('UIAlertView').alloc().init();
                    alertView.setTitle('Alert');
                    alertView.setMessage('数组下标没有越界');
                    alertView.addButtonWithTitle('OK');
                    alertView.show();
                }else{
                     var alertView = require('UIAlertView').alloc().init();
                     alertView.setTitle('Alert');
                     alertView.setMessage('数组下标越界');
                     alertView.addButtonWithTitle('OK');
                     alertView.show();
                }
                }
                }, {});
    
    
    //AppDelegate use
    
    // 执行本地js文件
    - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
        
        [JPEngine startEngine];
        NSString *sourcePath = [[NSBundle mainBundle] pathForResource:@"demo" ofType:@"js"];
        NSString *script = [NSString stringWithContentsOfFile:sourcePath encoding:NSUTF8StringEncoding error:nil];
        [JPEngine evaluateScript:script];
        
        return YES;
    }
    

    现在点击第3行时,不会崩溃了。因为didSelectRowAtIndexPath函数被js里面的函数取代了。

    当然,真正在项目中应该是从网络拉取,动态修改

    // 从网络拉回js脚本执行
     [NSURLConnection sendAsynchronousRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://cnbang.net/test.js"]] queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
            NSString *script = [[NSString alloc] initWithData:data encoding:NSUTF8StringEncoding];
            [JPEngine evaluateScript:script];
        }];
    

    原理
    JSPatch用iOS内置的JavaScriptCore.framework作为JS引擎,但没有用它JSExport的特性进行JS-OC函数互调,而是通过Objective-C Runtime,从JS传递要调用的类名函数名到Objective-C,再使用NSInvocation动态调用对应的OC方法。
    有兴趣的可以看作者原著:JSPatch 实现原理详解

    demo下载地址:JSPatchDemo

    与React Native的异同

    JSPatch可以动态打补丁,自由修改APP里的代码,理论上还可以完全用JSPatch实现一个业务模块,甚至整个APP,跟wax一样,但不推荐这么做,若想动态为APP添加模块,目前React Native给出了很好的方案,解决了上述三个问题:

    JS/OC不会频繁通信,会在事件触发时批量传递,提高效率。(详见React Native通信机制详解
    开发过程无需考虑OC的感受,遵从React框架的思想进行纯JS开发就行,剩下的事情React Native帮你处理好了。
    React Native连IDE都准备好了。

    工具

    JSPatchX (XCode 代码补全插件)
    JSPatch Convertor (OC->JS 代码自动转换工具)JSPatch平台
    JSPatch平台

    了解更多请看原著的WIKI 完善的文档请移步 Wiki

    JS 断点调试

    在 iOS8 下,JSPatch 支持使用 Safari 自带的调试工具对 JS 脚本进行断点调试:

    F7C514EB-81D8-40A1-9865-AE8B3FDFBCCD.png

    启动调试工具

    首先需要开启 Safari 调试菜单:Safari -> 偏好设置 -> 高级 -> 勾选[在菜单栏中显示“开发”菜单]

    接着启动Safari -> 开发 -> 选择你的机器 -> JSContext
    并且点击:显示扩展创建器
    即可开始调试。

    2DFE40A0-726A-47C4-A7DA-A5F5ABEC12FD.png

    连接真机调试时,需要打开真机的web检查器:设置 -> Safari -> 高级 -> Web检查器

    资源列表

    资源列表列出了 JSPatch 所有执行中的脚本文件,点开文件后可以对其进行断点调试。
    通过 [JPEngine evaluateScript:script]
    接口执行的脚本,在资源列表里都表示为 main.js

    通过 [JPEngine evaluateScriptWithPath:filePath]
    接口执行的脚本,在资源列表里会以原文件名表示。

    如果你都看到这里了,请给我点个赞吧,你的喜欢是我坚持原创的不竭动力。

    相关文章

      网友评论

      • LeeCen:出现这个问题: 控制台中打印,JP: 更新补丁出错: 解密 MD5 文件失败, 已重试次数: 1
      • 灿烂先森:很详细,学习了!
      • 李国安:学习了! 非常不错! 公司项目中也有用到 JSPatch,一直苦于JS调试!
      • 来宝:大神,请教个问题,关于JSPatch,我也看了其他的demo,很多是在JSPatch官网上注册appkey,然后 [JSPatch startWithAppKey:@"注册之后你的appkey"]; [JSPatch sync];这样使用,请问下有什么区别?
        来宝:@来宝 怎么用JS直接调OC里面写好的方法?
        来宝:@wu大维 明白啦,非常感谢详细的解答:watermelon:
        wu大维:@来宝 那是使用了JSPatch平台吧,JSPatch 需要使用者有一个后台可以下发和管理脚本,并且需要处理传输安全等部署工作,JSPatch 平台帮你做了这些事,提供了脚本后台托管,版本管理,保证传输安全等功能,让你无需搭建一个后台,无需关心部署操作,只需引入一个 SDK 即可立即使用 JSPatch。 好像是要收费的
      • wu大维:千里之行,始于此步。
      • ocarol:学习了:smile:

      本文标题:JSPatch热修复入门指南和js断点调试

      本文链接:https://www.haomeiwen.com/subject/meemjttx.html