Laya 调试工具——Weinre

开发游戏避免不了调试，如果游戏的运行环境是移动设备的话，安卓可以使用Chrome inspect调试，IOS如果没有Mac咋办？
使用inspect的时候有没有试过手机拿到手上的时候断开连接，放到桌上的时候又断开连接，连接不稳定咋整？
可以用Weinre啊，虽然不能断点，但是连接稳定啊。

安装weinre

首先确定电脑上安装了nodejs和npm。然后全局安装Weinre

npm install -g weinre

然后Weinre启动服务

weinre --httpPort 8080 --boundHost -all-

服务启动成功了会输出

使用Weinre调试

浏览器打开http://localhost:8080/

weinre_0.png

这里说了需要在index.html中引入

但是一单引入这句话之后不管需不需要调试，都会加载库文件

避免这次请求可以在游戏启动之后动态引入库文件。我封装了一下

export default class debugUitls {
    /**
    * 进入游戏时初始化调试状态
    */
    static initDebugState() {
        if (!laya.net.LocalStorage.getItem('debug') || !Number(laya.net.LocalStorage.getItem('debug'))) {
            
        } else {
            var ipDar = laya.net.LocalStorage.getItem('debugIp');
            if (!ipDar || ipDar.indexOf('.') < 0 && ipDar.indexOf(':') < 0) {
                this.openInputDialog();
                return
            }

            var node = document.createElement("script");
            node.setAttribute('src', "http://" + ipDar + "/target/target-script-min.js#anonymous");
            document.body.appendChild(node);
        }
    }

    /**
    * 创建一个输入调试IP和端口号的输入框
    */
   static openInputDialog() {
        var container = document.createElement('div');
        var inputConta = document.createElement('input');
        var mask = document.createElement('div');
        var tips = document.createElement('div');

        mask.setAttribute('style', 'position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; background: #000; opacity: 0.6;');
        mask.addEventListener('click', function () {
            var ipStr = document.getElementById("inputConta")['value'];
            container.parentNode.removeChild(container);

            if (ipStr) {
                var node = document.createElement("script");
                node.setAttribute('src', "http://" + ipStr + "/target/target-script-min.js#anonymous");
                document.body.appendChild(node);
                laya.net.LocalStorage.setItem('debugIp', ipStr);
            }
        });

        tips.setAttribute('style', 'position: absolute; width: 100%; text-align: center;font-size: 22px;top: 150px;color: #FFFFFF; font-weight: 700;');
        tips.innerHTML = '进入调试模式，输入IP和端口号
点击空白区域返回游戏';

        inputConta.setAttribute('style', 'position: absolute; width: 200px; height: 32px; left: 50%; top: 50%; margin-left: -100px; margin-top: -16px;');
        inputConta.setAttribute('type', 'text');//输入框的类型
        inputConta.setAttribute('name', "input");//输入框的名字
        inputConta.setAttribute('id', "inputConta");//输入框的id

        container.appendChild(mask);
        container.appendChild(tips);
        container.appendChild(inputConta);
        document.body.appendChild(container);
    }

    /**
    * 开启或者关闭调试状态
    */
   static setDebugState() {
        if (!laya.net.LocalStorage.getItem('debug') || !Number(laya.net.LocalStorage.getItem('debug'))) {
            laya.net.LocalStorage.setItem('debug', '1');
            this.openInputDialog();
        } else {
            laya.net.LocalStorage.setItem('debug', '0');
            laya.net.LocalStorage.removeItem('debugIp');
        }
    }
}

比较简单，就是动态创建一个script标签，然后打开一个输入页面将电脑的IP地址和开启服务的端口号输入进入就行。然后点击空白地方关闭输入页面就自动引入Weinre库文件了。

调用方法：
我这里使用LocalStorage记录了一个debug和debugIp分别表示是否需要开启调试和IP地址，只需要关心这两个变量即可。

        debugUitls.setDebugState();
        debugUitls.initDebugState();

代码接入后需要在移动设备上验证是否成功。

判断有没有连接成功
在电脑浏览器打开的http://localhost:8080/

点击箭头指示连接打开如下页面

如果Target下显示指示移动设备的IP地址说明连接成功。点击Console按钮切换页面就可以看到输出打印

如果Target下显示none则没有连接成功，需要检查IP地址和端口是否正确。

weinre_7.png