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/

Laya 调试工具——Weinre_第1张图片
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库文件了。


Laya 调试工具——Weinre_第2张图片

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

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

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

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

Laya 调试工具——Weinre_第3张图片

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

如果Target下显示指示移动设备的IP地址说明连接成功。点击Console按钮切换页面就可以看到输出打印
Laya 调试工具——Weinre_第4张图片

如果Target下显示none则没有连接成功,需要检查IP地址和端口是否正确。
Laya 调试工具——Weinre_第5张图片
weinre_7.png

你可能感兴趣的:(Laya 调试工具——Weinre)