移动端远程调试 - Weinre

Weinre可以debug手机浏览器或者原生应用嵌入的WebView, 支持Android和ios. 强大吧;
还支持调试微信中页面, 不用微信那坑人开发者工具.
下面看一下我在Mac是怎么玩的.

1. 安装

1
2
3

sudo npm -g install weinre
ipconfig getifaddr en0
weinre --httpPort 8088 --boundHost 172.19.3.78

2. 浏览器中输入http://172.19.3.78:8088即可看到以下页面:

3. 在你的需要调试的页面加入下面的js引用, 手机上访问需要调试的web页面(最后的#anonymous标题与PC端对应)：

1	<script src="http://172.19.3.78:8088/target/target-script-min.js#anonymous"></script>

PC端浏览器访问http://172.19.3.78:8088/client/#anonymous页面，可以看到以下效果:

虽然没有生成预览图, 但该有的都有了

4. 参考:

5. 浏览器判断

<script type="text/javascript">
    var browser = {
        versions: function() {
            var u = navigator.userAgent,
                    app = navigator.appVersion;
            return {
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
                weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
                qq: u.match(/\sQQ/i) == " qq" //是否QQ
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    };

    //判断是否webKit内核
    if (browser.versions.webKit && browser.versions.android) {
        alert("is webKit");
    }
    //判断是否移动端
    if (browser.versions.mobile || browser.versions.android || browser.versions.ios) {
        alert("移动端");
    }
</script>

2019-12-23