什么是远程调试?

说白了,就是可以通过PC端【F12开发者工具】查看并调试移动端的页面内容,如html、css、js、Network资源等。

重要的事情说三遍:weinre所占有的端口不需要和监听页面的端口一致,比如说weinre使用了http://10.110.1.26/:8080端口,然后我监听的页面是运行在http://10.110.1.26/:8081端口也没关系的。

重要的事情说三遍:weinre所占有的端口不需要和监听页面的端口一致,比如说weinre使用了http://10.110.1.26/:8080端口,然后我监听的页面是运行在http://10.110.1.26/:8081端口也没关系的。

重要的事情说三遍:weinre所占有的端口不需要和监听页面的端口一致,比如说weinre使用了http://10.110.1.26/:8080端口,然后我监听的页面是运行在http://10.110.1.26/:8081端口也没关系的。

超爽的事情说三遍:远程调试可以配合热编译使用

超爽的事情说三遍:远程调试可以配合热编译使用

超爽的事情说三遍:远程调试可以配合热编译使用

(PS:最终效果图在本页面底部)


官方网站

http://people.apache.org/~pmuellr/weinre/docs/latest/Installing.html

安装(需要Nodejs和Npm环境)

weinre is also deployed on https://npmjs.org/package/weinre so that you can install it via:

sudo npm -g install weinre

打开CMD ,输入以下命令开启服务

weinre --boundHost -all-

打开localhost:8080 出现以下界面说明安装成功了

Weinre还提供了下面的启动参数:

--help : 显示Weinre的Help

--httpPort  [portNumber] : 设置Weinre使用的端口号, 默认是8080

--boundHost  [hostname| ip address | -all-] : 默认是'localhost', 这个参数是为了限制可以访问Weinre Server的设备, 设置为-all-或者指定ip, 那么任何设备都可以访问Weinre Server。

--verbose  [true | false] : 如果想看到更多的关于Weinre运行情况的输出, 那么可以设置这个选项为true, 默认为false;

--debug  [true | false] : 这个选项与--verbose类似, 会输出更多的信息。默认为false。

--readTimeout  [seconds] : Server发送信息到Target/Client的超时时间, 默认为5s。

--deathTimeout  [seconds] : 默认为3倍的readTimeout, 如果页面超过这个时间都没有任何响应, 那么就会断开连接。

更多参数可以访问http://people.apache.org/~pmuellr/weinre/docs/latest/Running.html


如何进行远程调试?必须先让手机端能正常访问上PC端本地的网站。

请参考这篇文章:http://www.cnblogs.com/CyLee/p/6037732.html

并且必须成功才可以进入下一步

在开启的weinre服务页面中,有这样一段脚本引入代码

将其放入调试的页面中即可,

但请注意这里的地址

是ip地址,并不是localhost,

是ip地址,并不是localhost,

是ip地址,并不是localhost;

接着,找到weinre服务页面中的另一个页面

进入这个页面后,如下图所示,默认的Targets为none  这说明还没有任何页面访问

这时候,手机登陆已经加入<script>标签的页面,targets发生了变化,就说明成功了

紧接着打开顶部的【elements】栏目即可看到熟悉的控制台界面了。

当鼠标经过DOM元素时,手机端会出现调试效果。

可以在console中调试javascript代码

以上!!!

远程调试 Weinre的更多相关文章

  1. 远程调试weinre的使用

    一.用途 *鉴于在浏览器调试移动端页面无法准确反映移动端实际情况并无法高效调试,故常常使用远程调试工具通过电脑连接手机进行调试,常用远程调试方式: 1.chrome连接安卓机远程调试 2.Mac连接苹 ...

  2. 使用weinre远程调试

    1.调试环境: 1)使用nodejs搭建调试服务器: 先安装node,然后使用npm安装weinre,在node.js安装目录输入以下命令 npm install weinre 2)需要wifi环境和 ...

  3. grunt、Browsersync服务及weinre远程调试

    一.grunt server服务 前端开发时,经常需要把静态文件映射成web服务,传统的做法是丢到apache,但太重太不友好了.开发angular的时候,官方的chrome插件对file:///的支 ...

  4. Cordova 5 架构学习 Weinre远程调试技术

    手机上的页面不像桌面开发这么方便调试.能够使用Weinre进行远程调试以方便开发.本文介绍windows下的安装与使用. 安装 使用npm安装.能够执行: ###npm config set regi ...

  5. Mobile Web 调试指南(2):远程调试

    原文:http://blog.jobbole.com/68606/ 原文出处: 阿伦孟的博客(@allenm ) 第一篇中讲解了如何让手机来请求我们开发电脑上的源码,做到了这步后,我们可以改完代码立即 ...

  6. chrome 远程调试(转)

    http://www.tuicool.com/articles/ZJfeAzi 由于 appspot.com被墙,一般调试不成功. 随着智能手机的普及,移动设备的浏览器功能越来越强大,我们用手机上网时 ...

  7. 移动端调试 weinre

    weinre 是基于 Node 的工具,因此使用如下命令安装 weinre $ npm install -g weinre 用上面的命令将 weinre 安装到全局,然后就可以使用 weinre的命令 ...

  8. 发现一款移动web端远程调试工具weinre , 哈哈!

    之前调试一直用的是chrome的远程调试,虽然效果很不错,但是在调试cordova,微信时多有不便. 在git上找工具时发现了这个:weinre,使用方法非常简单 附上git地址: https://g ...

  9. 很有用的mobile web application远程调试工具 weinre

    在移动web应用中,因为没有类似chrome和firebug的调试工具,调试起来比在PC上相对麻烦一些,有时候仅仅能重复进行改动比对,但使用weinre我们能够轻松做到远程调试的功能. 什么是wein ...

随机推荐

  1. django邮件相关设置

    EMAIL_HOST = 'smtp.mxhichina.com' # 阿里云企业邮箱 EMAIL_HOST_PORT = 25 # 邮箱服务器端口 EMAIL_HOST_USER = '****** ...

  2. MongoDB 刷新几次就报错

    官方: MongoDB.Driver 在页面上 速度刷新几次,就会抛错? 为何? Service 层  Autofac

  3. 轻量级的REST中间件

    轻量级的REST中间件 纯净的REST中间件,绝对的轻量级,不需要安装任何三方控件 基于HTTPS.SYS和WEBSOCKET通信,支持海量并发 支持跨越DELPHI6~DELPHI10.2.2的开发 ...

  4. synchronized 线程同步-类级别锁定

    1.demo 说明:代码中通过 printNum 方法传入参数判断 a.b 分别对 num 这个参数的值进行了修改. package demo1; import sun.applet.Main; pu ...

  5. hibernate反向工程 (eclipse和myeclipse)【转】

    myeclipse下hibernate反向工程: 1.选择myeclipse hibernate视图 2.建立与后台数据库的连接 1).configure database driver: 2).添加 ...

  6. http://blog.csdn.net/a9529lty/article/details/6454145

    http://blog.csdn.net/a9529lty/article/details/6454145

  7. MySQL : ERROR 1042 (HY000): Can't get hostname for your address

    摘自: http://www.siutung.org/post/506/ 使用Navicat for MySQL连接远程的MySQL服务器,却提示:Can't get hostname for you ...

  8. 【笔记】探索js 的this 对象 (第三部分)

    了解完函数的调用区域是如何影响this 对象的,还有this 的各种绑定方式以及各种绑定方式的优先级后 最后一部分,来了解一下this 的一些例外情况 1.被忽略的this 例如在使用bind 方法时 ...

  9. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-如何修改代码字体

    工具-选项   TwinCAT,PLC Environment,Text editor,然后在文本区域中修改字体     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i. ...

  10. vue - package.json

    描述:包管理信息(npm || yarn) npm 和 yarn 站在了对立面. 不过我还是首推 yarn.