美文网首页npm依赖包管理工具真机调试
02-移动端调试工具-Weinre真机调试

02-移动端调试工具-Weinre真机调试

作者: EndEvent | 来源:发表于2017-07-03 09:08 被阅读121次

    之前做移动前端调试页面的时候就是简单的使用Chrome模拟器调试,能满足基本基本的需求;如果是涉及到真机调试Chrome根本没办法操作,此时可以使用Web Inspector(Webkit)的远程调试工具Weinre;Weinre可以在PC端直接调试运行在移动设备上的远程页面,在PC端可以即时修改目标网页的HTML/CSS/Javascript,调试过程可实时显示移动设备上页面的预览效果,并同步显示设备页面的错误和警告信息,可以查看网络资源的信息,不支持断点调试。

    1、安装

      // 要安装了node
      $ npm -g install weinre     // windows没有sudo命令
    

    $ sudo npm -g install weinre //sudo是权限管理指令(在linux)
    Weinre也从最初的Java移植到了当前的NodeJS版本

    2、运行weinre

        // 指定自己本机的IP地址 
       $ weinre --boundHost 192.168.1.103  
    

    通过命令行查询ip
    window: $ ipconfig
    linux/unix: $ ifconfig

    3、在浏览器中预览可以看到下面页面内容

      // 命令行中可以看到提示信息
      浏览器中输入 http://192.168.1.103:8080
    
    浏览器中预览

    4、手机上访问需要调试的web页面,然后在页面底部插入脚本:

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

    手机端要调试,必须有服务器,手机端可以访问到服务器的页面。另外手机和电脑都是在同一个局域网中!


    手机端访问调试页面

    5、PC端浏览器访问http://192.168.1.103:8080/client/#anonymous,可以看到以下效果

    连接成功,调试

    相关文章

      网友评论

        本文标题:02-移动端调试工具-Weinre真机调试

        本文链接:https://www.haomeiwen.com/subject/gyieqxtx.html