摘要：可以在上调试运行在移动端上的页面。启动调试客户端在浏览器中打开即可启动调试客户端创建创建个页面，并加入以下表示从代理服务中引入。
一、背景：
H5页面在PC上调试起来很方便，但是在手机上却很麻烦，此时移动端就像一个黑匣子，查看或修改DOM、CSS，localStore等变的很困难。
这个时候远程调试就孕育而生了。
Weinre是单词缩写，全称是网页远程审查（Web Inspector Remote），发音同winery [ˈwaɪn(ə)ri]。可以在PC上调
试运行在移动端上的页面。
对应上面的菜单，weinre有5大功能
Element： 查看/修改dom，查看/修改 dom CSS
Resources：查看/修改 localStorage, sessionStorage
Network：查看网络请求
Timeline：
Console：查看控制台输出
2.3 weinre不能做什么JS调试
2.4 weinre原理目标页面（target）：被调试的页面，页面已嵌入weinre的远程js，下文会介绍；
Debug客户端（client）：本地的Web Inspector调试客户端；
Debug服务端（agent）：一个HTTP Server，为目标页面与Debug客户端建立通信（target和client不断的向agent发生get/post请求）。
原理就是Client的任何操作命令都会发给target执行，同样target的任何操作也会发给client执行。
npm install -g weinre2.5.2：启动weinre服务 （代理【agent】服务）
weinre --boundHost 10.32.69.133 --httpPort 8888
参数说明参考：http://people.apache.org/~pmu...
如果显示下面内容则说明服务启动了。
2016-01-19T10:37:26.772Z weinre: starting server at http://10.32.69.133:88882.5.3：启动调试客户端
在浏览器中打开”http://10.32.69.133:8888“即可启动调试客户端
2.5.4：创建Target创建个页面，并加入以下JS（表示从代理服务中引入target/target-script-min.js）。
进入操作界面就可以尽情操作了。
2.6 多targetsweinre支持多targets的，不同target通过debug id区分的，target js的完整格式：
debug id参数就是用来区分各targetd ,如果不传的话用"anonymous"代替，一般用IP地址作为debug id。
A：查看，修改，删除Dom元素，目前还不能增加DOM元素。
B：查看，修改，删除Dom元素属性，目前不支持增加DOM元素属性。
C：查看，修改，删除，增加 CSS属性。
查看，修改，删除localStorage/sessionStorage。
测试发现：不能删除，修改，增加？？？
查看XHR请求信息，虽然该面板中有各种网络请求的类型，但是目前只能查看XHR请求记录。
2.7.5 Timeline面板查看target中触发的事件时间信息（触发事件）。目前只支持两种事件：setTimeout/setInterval和用户指定的事件（通过在事件处理函数中调用console.markTimeline("tag")函数指定）
2.7.6 Console面板用来执行JS语句和表达式，以及展示console的方法输出。
参考：http://www.huolg.net/html5/we...
http://people.apache.org/~pmu...
weinre操作界面：http://people.apache.org/~pmu...
http://muellerware.org/papers...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112200.html
摘要：可以在上调试运行在移动端上的页面。启动调试客户端在浏览器中打开即可启动调试客户端创建创建个页面，并加入以下表示从代理服务中引入。 一、背景： H5页面在PC上调试起来很方便，但是在手机上却很麻烦，此时移动端就像一个黑匣子，查看或修改DOM、CSS，localStore等变的很困难。这个时候远程调试就孕育而生了。 二、weinre 2.1 什么是weinre Weinre是单词缩写，全称...
摘要：可以在上调试运行在移动端上的页面。启动调试客户端在浏览器中打开即可启动调试客户端创建创建个页面，并加入以下表示从代理服务中引入。 一、背景： H5页面在PC上调试起来很方便，但是在手机上却很麻烦，此时移动端就像一个黑匣子，查看或修改DOM、CSS，localStore等变的很困难。这个时候远程调试就孕育而生了。 二、weinre 2.1 什么是weinre Weinre是单词缩写，全称...
摘要：在做移动端开发的时候想必大家都会遇到一个问题调试，大部分情况下利用的模式都能解决，不可避免的会有极少部分机型不兼容的问题，一个个打太麻烦也不直观。今天的主角登场了。是一个通过监听本机及项目端口的一个监听服务，能够实时的和真机响应互动。 在做移动端H5开发的时候想必大家都会遇到一个问题——调试，大部分情况下利用chrome的debug模式都能解决，不可避免的会有极少部分机型不兼容的问题，...
摘要：在做移动端开发的时候想必大家都会遇到一个问题调试，大部分情况下利用的模式都能解决，不可避免的会有极少部分机型不兼容的问题，一个个打太麻烦也不直观。今天的主角登场了。是一个通过监听本机及项目端口的一个监听服务，能够实时的和真机响应互动。 在做移动端H5开发的时候想必大家都会遇到一个问题——调试，大部分情况下利用chrome的debug模式都能解决，不可避免的会有极少部分机型不兼容的问题，...
阅读 2289·2023-04-26 00:01
阅读 794·2021-10-27 14:13
阅读 1810·2021-09-02 15:11
阅读 3380·2019-08-29 12:52
阅读 527·2019-08-26 12:00
阅读 2567·2019-08-26 10:57
阅读 3405·2019-08-26 10:32
阅读 2846·2019-08-23 18:29
