zoukankan      html  css  js  c++  java
  • 移动端调试工具-Weinre

    java版本安装和调试

    首先需要下载 weinre, weinre目前支持Windows与MacOS, 本文中以Windows版为例。

    下载地址:http://people.apache.org/~pmuellr/weinre/builds/1.x/1.6.1/

    点击weinre-jar-1.6.1.zip下载。

    然后确保你的电脑已经搭建好了java环境。即安装了jdk。这里就不多说了,在网上搜个jdk,一步步安装及ok。

    在下载的weinre.jar所在文件夹中运行以下命令:

    java -jar weinre.jar --httpPort 8081 --boundHost -all-

    这行命令会在本机上启动weinre的Debug服务端,端口为8081。打开Chrome或Safari,访问localhost:8081,就可以看到weinre的基本信息。

    这里的端口号,你可以随意更改,我电脑上的8081端口不可用,所以我使用1070端口就可以。

    由于此版本的weinre在chrome下有问题,因此只能使用safari才能打开。

    打开之后,就会有一个"debug client user interface",它是weinre的Debug客户端,点击进入后可以看到目前被测试的目标网页。

    如何让我们的网页成为目标网页并且可以被localhost:8081上的weinre检测到呢?很简单,只要往网页面上添加一个js文件就可以了。如果本机的IP为192.168.0.5,那么就添加如下的js文件:

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

    当你在移动设备上打开添加了这个脚本的网页后,你就可以在safari的Debug 的客户端的里检测到它了。

    点击"debug client user interface"就进入到了调试页面。

     之后我们就能在Elements与Console中调试移动端的页面了。

    注意:如果看到targets下面为none,就刷新几次,就会出现了。

    Weinre的新版本调试

    第一种方法:

    目前国外有提供PhoneGap的weinre的远程服务,用户可以访问下述网址使用户在线远程调试。

    http://debug.build.phonegap.com/

    <script src="http://debug.build.phonegap.com/target/target-script-min.js#anonymous"></script>

    这段代码,引入到你的移动端项目的html页面中就行了。但是这种方式,需要你的网速比较好,不然会有点慢。

    第二种方式:

    1. 首先保证你安装了nodejs环境,如果没有,先去https://nodejs.org/下载安装。

    2. nodejs v0.10已经集成了npm,所以可以直接使用npm安装weinre,在cmd中敲:npm install weinre -g。

    3. 安装完成后,你会在目录C:UsersAdministratorAppDataRoaming pm ode_modules下看到weinre,这便是它的主目录了。

    4. 在cmd中运行weinre --boundHost -all-,就会启动weinre服务。然后在浏览器中输入cmd中显示的地址:IP地址和端口号。

    我这里是:http://10.18.221.16:1070

    默认情况是:localhost:8080.

    你可以设置成自己电脑上的ip地址和任意没有使用的端口号。

    使用此命令启动weinre:weinre --boundHost ip --httpPort 端口号

    后面的步骤,跟上面的方式是一样的。

    此方法,在chrome和safari中都可以使用。

    注意:如果在调试页面中,没有显示完整页面上的元素,请刷新一下网页,然后选择那个链接,最后再点击element,就可以看到页面上完整的元素了。

    虽然使用weinre进行调试时,会有突然断开,有时需要刷新多次才能连上,有时需要重新安装才能连上等一系列的问题,但是没有它,你根本无法进行页面调试。期待它的改进,然后希望博友能够推荐更好的调试工具,当然你必须知道怎么使用,才推荐。

    加油!

  • 相关阅读:
    GJM : Unity的profiler性能分析【转载】
    GJM :Unity UI 之 UGUI 开发
    GJM:笔记记录
    GJM : UGUI 缩放循环拖动展示卡牌效果
    GJM :HTC Vive VRTK.Package 踩坑之路(一)
    GJM :Mono 介绍
    GJM :Unity3D 介绍
    GJM : C# 介绍
    GJM : 通用类型系统(Common Type System CTS)
    GJM :SQL Server中常用的SQL语句
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4430213.html
Copyright © 2011-2022 走看看