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:\Users\lenovo\AppData\Roaming\npm\node_modules\weinre\web\www）

这只是手机访问电脑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:\Users\lenovo\AppData\Roaming\npm\node_modules\weinre\web\www）

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 方可。。。

远程实时调试手机上的Web页面的更多相关文章

  1. Weinre 远程调试移动端手机web页面

    调试场景 1.调试页面在手机上.2.调试工具在PC的chrome3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi 一.安装 Weinre 1.Weinre是基于nodejs实现的,所以使用 ...

  2. Android设备上i-jetty环境的搭建-手机上的web服务器

    本文主要跟大家分享如何将一台Android设备打造成一个web服务器使用. 编译i-jetty 1.将源码download下来,http://code.google.com/p/i-jetty/dow ...

  3. iOS之safari调试iOS app web页面

    Overview 当下移动端开发过程中大量使用前段H5.js等等技术,而这些web页面的调试在Xcode控制台中不太明了,经常我们移动app运行了就是方法,但是不能显示响应的效果,这时候或许就是已经报 ...

  4. 外网配置花生壳动态域名解析实现外网访问本地iis及vs实时调试

    描述:假如已连外网,具备一台路由器的情况下在路由器设置页面配置花生壳动态域名解析,使得外网可以访问到本地iis 托管的web服务,模拟真实环境调试应用程序. 网络运营商ip的动态分配,通常网络提供商给 ...

  5. SpringBoot系列——Logback日志，输出到文件以及实时输出到web页面

    前言 SpringBoot对所有内部日志使用通用日志记录,但保留底层日志实现.为Java Util Logging.Log4J2和Logback提供了默认配置.在不同的情况下,日志记录器都预先配置为使 ...

  6. chrome远程调试真机上的app - 只显示空白页面

    chrome远程调试真机上的app - 只显示空白页面 这个是chrome需要的插件没办法自动下载导致的,怎么办你懂得,越狱... 调试起来感觉卡顿的厉害哇,有没有更好的方式?

  7. 【工具】PC端调试手机端 Html 页面的工具

    一.概述 有一个项目需要在手机端显示一个 web 页面,而每次把应用 launch 后,从手机端看比较麻烦,因此搜罗了几种在 PC 端调试手机端页面的工具. 二.工具 http://fonkie.it ...

  8. idea导入maven项目，web browser远程单步调试

    问题:之前用idea14.1.3导入maven项目后,maven的dependencies不能自动解决依赖,到处都是红色的红线,看着就受不了.虽然不影响命令行编译,但是看着实在是不爽.总结下面几小步: ...

  9. chrome远程调试真机上的app

    chrome远程调试真机上的app 看来要上真机了...

随机推荐

  1. cocos2dx 3.x(TexturePacker进行图片加密)

    游戏开发过程中要涉及到大量的图片,使用TexturePacker可以把小图合成大图.这是我们使用最多的功能,但是TexturePacker还带有对图片加密的功能.之前还是对加密不慎了解,所以写下来分享 ...

  2. 一种在视频OBJECT标签上放置均分四个区域的框选方法

    一般在视频区域中做框样式,作应由视频插件自己来实现,但是出于其它一些原因自己琢磨了一个使用HTML标签来实现框选区域的方法,按照行外应该属于笨方法,虽然有点笨,可能在其他方面有借鉴意义,在这里拿出来跟 ...

  3. FTP上传

    package cn.zto.util; import java.io.ByteArrayInputStream; import java.io.File; import java.io.FileIn ...

  4. 1029-c语言文法的理解

    <程序>→<外部声明>|<程序><外部声明> <外部声明>→<函数定义>|<声明> <函数定义>→< ...

  5. gradle基础的build文件模板_jetty

    group '组织名' version '版本号' /* 支持的插件 */ apply plugin: 'java' // 项目基础变成语言支持为java apply plugin: 'war' // ...

  6. C++之路进阶——codevs2933（诗人小G）

    2933 诗人小G 2009年NOI全国竞赛  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master     题目描述 Description 小G是一个出色的诗人 ...

  7. 10. 星际争霸之php设计模式--原型模式

    题记==============================================================================本php设计模式专辑来源于博客(jymo ...

  8. 【笔记】jquery append，appendTo，prepend，prependTo 介绍

    在jquery权威指南里面学习到这一章,很有必要介绍一下里面的内容: 首先是append(content)这个函数: 意思是将内容content加入到所选择的对象内容的后面 例如:$("di ...

  9. StructureMap使用方法（转）

    终于到了题目中的MVC使用StructureMap依赖注入的配置与实现了.在ASP.Net三层架构应用中StructureMap的是最老的IOC/DI工具,也就是依赖注入,很多线上的项目都使用了Str ...

  10. 什么是REST、RESTful

    1.REST 指的是一组架构约束条件和原则.满足这些约束条件和原则的应用程序或设计就是 RESTful. 2.REST 原则是分层系统,这表示组件无法了解它与之交互的中间层以外的组件.通过将系统知识限 ...