admin 管理员组

文章数量: 1087675

使用weinre调试手机页面

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

工作原理
weinre由三部分组成 1. debug server 核心组件，运行在服务端，负责与另外两部分通信。 2.debug client webkit核浏览器 ,与 debug server通信。 展现调试界面，允许你修改dom，查看网络信息等。 3. debug target.  待调试的页面。你需要在页面中嵌入一小段js。它将通过XHR方式与debug server通信，进行调试信息的收发。


安装

安装十分方便。以linux机器为例，首先你需要有node.js。之后运行 npm g-g intall weinre 即可。


运行 1. 启动debug server端 命令行下执行 
weinre --httpPort 8081 --boundHost 10.136.30.144
意思是监听10.136.30.144的8081端口
2. 启动debug client pc浏览器上访问 http://10.136.30.144:8081/ 会看到类似下面的页面

列出了weinre的文档及用于调试的url。 点击 http://10.136.30.144:8081/client/#anonymous， 看到如下调试界面。

告诉我们，目前没有targets接入。同时列出了client及server端信息。
3.  启动 target 在需要调试的页面中需要引入一段js 
<script src="http://10.136.30.144: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);
以上两种方式在步骤2中提到的文档页中有详细说明。 假设我们要调试的页面运行在10.136.30.144:3927 页面中引入js后，用手机浏览器打开待调试页面 http://10.136.30.144:3927/new
4. 开始调试 手机访问页面后，我们回到步骤2中所说的调试界面。发现此时，targets中多了一条，即是我们在步骤3中用手机打开的待调试页面。 点击该target，即可利用熟悉的调试界面进行调试了。

其它说明
1. 用手机连续访问多页面，这些页面都会在targets中列出，选中其中一个，即可进行调试。 2. 点击调试页面中的remote, 可以从调试页面切回targets列表。 3. 尽管文档上说client要在基本webkit核的浏览器上使用（ Google Chrome，  Apple Safari，  Other recent-ish WebKit-based browsers  ）， 但亲测firefox上貌似也能玩转。 4. 也是最重要的。server与target和client一定要能互联互通，这样才可以调试。
一些局限性 1. elements部分，可以查看dom，修改样式。但无法直接编辑dom 2. resource部分，localstorage可以查看，但cookie看不到。 3. network部分，只能看到异步加载的请求。（也许我用的方法有问题?） 4. cosole部分，可以看console log， 运行js。但无法像firebug那样报出js的错误，更不能加断点调试。 anyway， 即使是这样，也为我们的调试提供了一定程度的便利。总比闭起眼乱碰好的多。 特别是当你要调试iphone页面，手上又无mac book时，试试weinre吧。 啥？你连iphone都没有！？god bless you~

本文标签： 使用weinre调试手机页面

版权声明：本文标题：使用weinre调试手机页面 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1686731516a30459.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。