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中引入

<script src="http://localhost:8080/target/target-script-min.js#anonymous"></script>

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



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


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和端口号</br>点击空白区域返回游戏';

        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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、系统自带调试功能 (一)、IOS系统 a、有真机(要求iOS 6 +) 1、iPhone开启web检查(设置 ...
    该帐号已被查封_才怪阅读 14,103评论 4 21
  • 随着手机等移动设备的普及,适配移动端的页面变得越来越有必要。这也意味着移动端的调试变得越来越频繁,那么就会发生以下...
    木白no1阅读 8,857评论 0 5
  • 移动端调试困难 很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机...
    小李不小阅读 13,463评论 0 2
  • 一、Python简介和环境搭建以及pip的安装 4课时实验课主要内容 【Python简介】: Python 是一个...
    _小老虎_阅读 11,162评论 0 10
  • 部分浏览器远程调试 各个浏览器远程调试及其所用工具如下表所示: ADB 在使用firefox和UC浏览器调试时,需...
    溪离欣洛阅读 6,218评论 0 4