1、背景：在PC上调试H5页面很方便，但是在手机上就很麻烦了。这时，移动端就像一个黑盒子，查看或修改DOM、CSS、localStore等变量都非常困难。这时候远程调试就诞生了。2.weinre2.1什么是weinre？移动端运行的页面可以在PC端进行调试。2.2weinre可以做什么对应上面的菜单，weinre有5大功能Element：查看/修改dom，查看/修改domCSSResources：查看/修改localStorage，sessionStorageNetwork：查看网络请求Timeline：Console：查看控制台输出2.3weinre不能做的什么是JS调试2.4weinre原理目标页面（target）：要调试的页面，该页面内嵌了weinre的远程js，下面会介绍；调试客户端（client）：本地WebInspector调试客户端；调试服务器（代理）：在目标页面和调试客户端之间建立通信的HTTP服务器（目标和客户端不断向代理发送get/post请求）。其原理是客户端的任何操作命令都会发送给目标执行，目标的任何操作也会发送给客户端执行。2.5搭建环境&使用2.5.1：weinre是基于nodeJs程序，安装weinre包npminstall-gweinre2.5.2：启动weinre服务(agent[代理]服务)weinre--boundHost10.32.69.133--httpPort8888参数说明参考：http://people.apache.org/~pmu...如果显示如下内容，则表示服务已启动。2016-01-19T10:37:26.772Zweinre:startingserverathttp://10.32.69.133:88882.5.3:启动调试客户端，在浏览器中打开“http://10.32.69.133:8888”开始调试client2.5.4：创建Target创建页面，添加如下JS（表示从代理服务导入target/target-script-min.js）。进入运行界面，您可以随心所欲地操作。2.6多目标Weinre支持多目标，不同的目标通过debugid区分，目标js的完整格式：debugid参数用来区分各个targetd。如果未通过，请改用“匿名”。通常，IP地址用作调试ID。2.7操作界面2.7.1远程面板2.7.2元素面板A：查看、修改、删除Dom元素，目前不能添加DOM元素。B：查看、修改、删除DOM元素属性。目前不支持添加DOM元素属性。C：查看、修改、删除和添加CSS属性。2.7.3Resources面板查看、修改、删除localStorage/sessionStorage。测试发现：不能删除、修改、添加？？？2.7.4在Network面板查看XHR请求信息。虽然该面板中有各种类型的网络请求，但目前只能查看XHR请求记录。2.7.5时间轴面板查看目标中触发的事件时间信息（触发事件）。目前只支持两种事件：setTimeout/setInterval和用户自定义事件（在事件处理器中调用console.markTimeline('tag')函数指定）2.7.6Console面板用于执行JS语句和表达式,并显示控制台方法输出。参考：http://www.huolg.net/html5/we...http://people.apache.org/~pmu...weinre操作界面：http://people.apache.org/~pmu。..http://muellerware.org/papers…
