weinre

“真机远程调试”（remote inspect web on real device），是指用桌面电脑（PC或MAC）远程连接上移动设备，通过类似Chrome浏览器开发人员工具的界面，来调试移动设备上运行的网页 https://github.com/jieyou/remote_inspect_web_on_real_device?utm_campaign=email_admin&utm_source=trigger-email&utm_medium=email 总览表格 方法 关键点 实现难度（综合考虑搭环境、软件、硬件成本，分数 小 为佳） 调试效果（综合考虑仿真效果、能调试的项等，分数 大 为佳） 可用的桌面设备 可用的移动设备及可调试的浏览器 简要步骤 Chrome模拟器 非真机，只是模拟 0 2（新版本加入了模拟网络链接的功能，故上调评分） PC、MAC 无 GO weinre 安装较为繁琐 3 2 PC、MAC 全部 GO spy-debugger (简化weinre配置，支持https) 需要桌面设备和移动设备同一网段 2 2 PC、MAC 全部 GO 调试Android上的Chrome 需要翻墙 2 4 PC、MAC Android上的Chrome GO 调试Android APP里的webview 需要翻墙 3 4 PC、MAC Android

方法：adobe shadow \ opera远程调试\ weinre adobe shadow: 我们经常使用Firefox的firebug或者Chrome的开发人员工具进行Web调试页面，JavaScript，DOM元素和CSS样式的调试。但是，当我们为移动Web站点或应用进行调试时，这些工具就很不方便，因为不知道在手机上或者pad看到的效果是怎样的？ 解决方案一： adobe shadow 我们先来安装Adobe Edge Inspect CC 下载地址： https://creative.adobe.com/products/inspect?promoid=KFKMN （tips：下载前要先安装Adobe Creative Cloud才能下载到Adobe Edge Inspect CC http://html.adobe.com/edge/inspect/ ） 下载后打开Adobe Edge Inspect CC，双击任务栏图标就会提示安装chrome插件，或者自行安装插件，插件地址： https://chrome.google.com/webstore/detail/adobe-edge-inspect-cc/ijoeapleklopieoejahbpdnhkjjgddem?hl=zh-TW 安装完成windows客户端后在手机端安装apps： IOS: https:/

第一种 调试Debug：Mobile Web调试工具Weinre 现在、将来，用移动设备上网越来越成为主流。但对于开发者们来说， 移动web的调试一直是个难题，前期可以使用模拟器来协助调试，但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。 　 　　 Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等，下面就简单介绍下如何使用。下面以 以Windows系统为例： 　 　一、首先确保你的电脑已经搭建好了java环境。 即：安装了jdk。这里就不多说了，在网上搜个jdk，一步步安装及ok。 　　二、 安装及运行Weinre 　　　　1、 下载： http://ishare.iask.sina.com.cn/f/23607399.html ， 这里直接下载jar包， 下载好之后放在一个文件夹里就行不需任何处理。 　　　　 2、 运行cmd，在weinre所在文件夹的 地址栏 输入代码： java -jar weinre.jar --httpPort 8081 --boundHost -all- （如下图）： 　　　　 3、 回车后会出现相应信息(注意：在调试过程中不要关闭cmd)： 　　　　 4、 打开本地浏览器，（

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

使用 weinre 调试手机页面 很久之前折腾过 chrome 的调试工具,感兴趣可以看下这个: chrome 调试手机网页 可是局限性太大了： 需要是 Android+chrome 需要运行在 Android 的 chrome 上才可以，如果进行微信/其他平台的 H5 开发并不能很好的调试 有墙！实力劝退 使用 weinre 就不存在那么多限制了，下面的操作是在 window+Andoid 和 window+iOS 都试过，亲测 OK！.其他 PC 平台应该也是大同小异 下载 weinre #全局安装weinre npm install -g weinre 验证是否安装成功 weinre -v # 看到下面的输出就代表安装成功了 运行 weinre weinre --boundHost 192.168.0.105 --httpPort 9999 注：192.168.0.108 最好改成自己的 IP 地址 9999 为端口号，随便指定都行 这里如果不指定 IP 地址，weinre 默认会运行在 localhost:8080 上，如果是运行在 locaohost 上，那调试的终端在手机上，那就没办法找到对应的链接了。 所以一定要指定IP 运行服务后的样子，这会占用一个终端，这个不要退出，退出就不能用了。根据提示， 打开 192.168.0.105:9999 > 打开后会看到：

一、安装 首先确保你的电脑上有node环境，然后使用cnpm或npm 安装 windows下 npm install weinre - g -- registry = https : / / registry . npm . taobao . org mac下 sudo npm install weinre - g -- registry = https : / / registry . npm . taobao . org 安装成功后会提示安装的位置（留意这个地址，下文还会用到） 【nodejs安装】 1 、下载nodejs nodejs官网下载 网址：https://nodejs.org/en/，点击进入后如下图 左边的LTS是正式版，右边的Current是测试版，一般开发常用的就是LTS正式版。 nodejs中文网下载 网址：http://nodejs.cn/，进入后点击下载，如下图 选择相应的版本下载。 2 、安装 双击安装包，一路下一步，指定安装路径，我的安装位置：C:\Program Files\nodejs 3 、配置环境变量 1.右键我的电脑-属性-高级系统设置-高级-环境变量，打开环境变量设置窗口 2.在下面的系统变量中找到Path，点击编辑–编辑文本，在后面加入nodejs的安装目录，我这里就是C:\Program Files\nodejs 3.然后打开cmd

一、业务场景 前端本地开发的场景中，我们需要频繁的改动代码，并需要实时看到效果，并且在一些开发场景中，我们需要将特定的请求代理到特定的IP、本地文件等，所以使用fiddler或whistle等本地、真机抓包调试工具是非常必要的。 二、为什么使用whistle 在历史的长河中，我们是使用fiddler+willow再搭配小米wifi 进行本地和真机抓包调试的，无可厚非，fiddler的抓包和代理的功能十分强大，但在使用的过程中，有个很蛋疼的缺点就是内存泄漏！！fiddler挂一整天，内存就被吃完了，然后电脑变得巨卡无比，即使加了个内存条也是治标不治本，这时候只能使用重启fiddler大法来解决，但是，长期的折磨使我萌生了有没有工具可以替代fillder的想法。于是乎，我发现了whistle。试用了一段时间后，发现它能替代fiddler完成我们日常的开发工作，并且在某些方面whistle做的更好，下面就分享一下whistle的使用实践。 三、安装启动 1. 安装 npm install -g whistle //也可以使用tnpm w2 -h //帮助信息 2. 启动 w2 start -p 8899 //不设置端口默认使用8899 更多命令： 安装启动 启动完成后在chorme下打开 127.0.0.1:8899 可以看到这么一个页面： 但是现在还无法抓包，需要为浏览器设置代理。 3