zoukankan      html  css  js  c++  java
  • 远程实时调试手机上的Web页面

    1. 安装
        需要Node.js平台, 先安装好后, 打开Node.js command prompt, 通过NPM来安装 weinre

    npm -g install weinre



    2. 启动
        安装完成后, 我们接着启动 weinre

    weinre -httpPort 8081 -boundHost -all-
    能打开这个地址就说明weinre启动成功了


        可以配置 .weinre/server.properties 让启动 weinre 变得更方便, 具体方法请参考官网, 配置好后, 以后想启动 weinre, 直接运行weinre命令即可, 无需每次都追加那些参数了.

    3. Instrumenting your web page to act as a debug target
        将如下脚本追加到你将要调试的页面上
        <script src="http://你的IP地址:8081/target/target-script-min.js#anonymous"></script>

    4. 折腾这么久, 快点让我远程调试吧
        在手机上打开要调试页面的地址

     



        在 weinre Access Points 中开始远程调试

    点击anonymous Access Points
    点击一下激活target



        终于可以调试了! 接下来随便怎么玩都可以了, 大家应该都很熟练了吧...


     
     
     以上为http://www.douban.com/note/289846168/
     
     
     
    测试过程中发现的问题及解决:
    1 .ipconfig看ip:10.62.0.173

    cmd下输入:weinre --httpPort 8080 --boundHost 10.62.0.173

    手机访问:http://10.62.0.173:8080/www/2.html
    电脑也访问:http://10.62.0.173:8080/www/2.html
    [注意:若是使用无线则需要是同一个热点。。手机和电脑都访问同一个网址。。](www是我建立的目录:C:UserslenovoAppDataRoaming pm ode_modulesweinrewebwww)

    这只是手机访问电脑ip的网址而已。。并没有将手机和电脑连接到一起调试,一开始以为这就行了,后来才发现是错的。


    2. 若:cmd下输入:weinre --httpPort 8080 --boundHost -all- [8080为端口号。。]
        【注意:若为weinre --httpPort 8080 --boundHost all,则报错weinre: unable to resolve boundHost address:all】

    则电脑直接访问 http://127.0.0.1:8080/client/
    访问文件:http://127.0.0.1:8080/www/2.html
    (本地路径:C:UserslenovoAppDataRoaming pm ode_modulesweinrewebwww)

    3.测试是否成功。。

    访问:http://localhost:8080/client/#anonymous
    然后顶部有一个:Targets:
                              若后面为none之类的信息代表没有完成。。。
                       a.手机访问(注意是谷歌或safari浏览器才可以):10.62.0.172:8081/www/1.html      (我的ip10.62.0.172:8081)
                       b.电脑访问:http://localhost:8080/client/#anonymous。。出现类似
                         10.200.108.11 [channel: t-5 id: anonymous] - http://10.62.0.173:8081/www/1.html
                        代表已经手机和电脑连上去了,主要:上面的文字颜色是蓝色,还需要鼠标点击一下,使其变成绿色,才代表可以最终调试手机上的页面。
                      c.变成绿色后,则点击elements选项卡,就会出现当前页面的html结构,进行调试。。console中输入alert('123'),手机上马上出现结果。。
     
     
     
    1.html内容:

    <!doctype html>
    <html>
    <head>
    <script src="http://10.62.0.173:8080/target/target-script-min.js#anonymous"></script>
    <script src="../target/target-script-min.js" /></script>
    </head>
    <body>
    <style>
    body{background:#ff7300}
    h3{font-size:50px;padding:100px;}
    </style>
    <h3>测试内容。。。。。</h3>
    </body>
    </html>

     
    补:有时会失败,即target下为none。
    cmd下重新输入命令,然后访问http://localhost:8080/,继续:debug client user interface: http://localhost:8080/client/#anonymous
    。。最终10.200.108.11 [channel: t-7 id: anonymous] - http://10.62.0.173:8080/www/1.html 方可。。。
  • 相关阅读:
    使用TransactionScope实现事务
    CYQ.Data 框架系列
    MVP
    DYCOM用于开发网络应用程序的通信部分功能的快速开发
    架构师要了解
    Entity Framework资源
    Sina Blogs
    关于TransactionScope出错:“与基础事务管理器的通信失败”的解决方法总结
    在西方的程序员眼里,东方的程序员是什么样的?
    net2.0事务学习
  • 原文地址:https://www.cnblogs.com/yuzhongwusan/p/4277453.html
Copyright © 2011-2022 走看看