zoukankan      html  css  js  c++  java
  • 使用weinre调试手机页面

      

     

    介绍Weinre

     Weinre(WeInspector Remote),是一种远程调试工具。功能与Firebug及chrome调试器类似,可以帮助我们即时更改页面元素、样式,调试JS等。

    weinre由三部分组成
    1. debug server
    核心组件,运行在服务端,负责与另外两部分通信。
    2.debug client
    webkit核浏览器,与debug server通信。展现调试界面,允许你修改dom,查看网络信息等。
    3. debug target. 

    待调试的页面。你需要在页面中嵌入一小段js。它将通过XHR方式与debug server通信,进行调试信息的收发。

    安装Weinre

    执行:sudo npm install -g weinre(mac的)

     

    安装完之后,还需要监听服务器,我的IP是 10.58.184.219

    执行:

    weinre -boundHost 10.58.184.219  -httpPort 8081 

    通过Weinre调试页面

    首先你访问:http://10.58.184.219:8081/ ,会看到下面的页面,列出了weinre的文档及用于调试的url。

    然后点进去:http://10.58.184.219:8081/client/#anonymous,会发现并没有Targets,同时列出了client及server端信息。

    启动target

    在调试页面加一段js:

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

    当然,如果要调试的页面很多,不方便在每一页都直接插入上文的代码。可以浏览器“书签”的方式保存一下面一段js,以动态方式插入script  

    javascript:(function(e){e.setAttribute("src","http://10.136.30.144:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);
    

    因为我要调试的demo运行在http://10.58.184.219:9080/BrowsersyncExample/

    页面中引入js后,用手机浏览器打开待调试页面 http://10.58.184.219:9080/BrowsersyncExample/

    当我们用手机访问这个调试页面 http://10.58.184.219:9080/BrowsersyncExample/时,浏览器上会出现

    切换到Elements时就是这样

    这个时候就跟谷歌审查元素的模式是一模一样了。

    参考文章:http://www.cnblogs.com/tugenhua0707/p/4681482.html#_labe1

                  http://blog.csdn.net/qmhball/article/details/45848215

                  http://www.3fwork.com/b403/001049MYM000079/

  • 相关阅读:
    DP(动态规划)学习心得
    hloj#402 护卫队解题讨论
    hloj#168“倒牛奶”解题讨论
    贪心:畜栏预定
    区间问题
    离散化
    差分
    浏览器的工作原理幕后揭秘的部分笔迹摘要
    python之阶乘的小例子
    关于python中urllib.urlencode的时候出错:UnicodeEncodeError: ‘ascii’的记录
  • 原文地址:https://www.cnblogs.com/wanliyuan/p/5707211.html
Copyright © 2011-2022 走看看