<div class="blogpost-body" id="cnblogs_post_body">
<p>现在、将来，用移动设备上网越来越成为主流。但对于开发者们来说，移动web的调试一直是个难题，前期可以使用模拟器来协助调试，但到了真机调试阶段就让人非常头痛。而Weinre就是解决这难题的利器。 </p>
<p> Weinre的本意是Web Inspector Remote，它是一种远程调试工具。功能与Firebug、Webkit inspector类似，可以帮助我们即时更改页面元素、样式，调试JS等，下面就简单介绍下如何使用。下面以以Windows系统为例：</p>
<p> <strong> 一、首先确保你的电脑已经搭建好了java环境。</strong>即：安装了jdk。这里就不多说了，在网上搜个jdk，一步步安装及ok。</p>
<p> 二、<strong>安装及运行Weinre</strong></p>
<p><strong> 1、</strong>下载：<a href="http://ishare.iask.sina.com.cn/f/23607399.html">http://ishare.iask.sina.com.cn/f/23607399.html</a> ，这里直接下载jar包，下载好之后放在一个文件夹里就行不需任何处理。</p>
<p> <strong> 2、</strong>运行cmd，在weinre所在文件夹的<strong>地址栏</strong>输入代码：java -jar weinre.jar --httpPort 8081 --boundHost -all- （如下图）：</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-80f182393b017943da5463b22d149199.gif" width="600"></p>
<p> <strong> 3、</strong>回车后会出现相应信息(注意：在调试过程中不要关闭cmd)：</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-e418efe340784eaab5e664cdf4bae6d1.gif" width="600"></p>
<p> <strong>4、</strong>打开本地浏览器，（使用webkit内核浏览器(chrome、safari)）访问<strong> http://localhost:8081/</strong>，不出意外的话可以看到weinre的基本信息。</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-49fb8110e7a63283f412f4d433984af1.gif" width="600"></p>
<p> <strong>5、</strong>上图中的"debug client user interface"是weinre的Debug客户端，点击进入后可以看到目前还没有被测试的目标网页。</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-8a40abfcb329a0743f075b932595ac75.gif" width="600"></p>
<p> 三、<strong>添加Debug Target</strong></p>
<p> 为了让需要调试的页面被weinre检测到，需要添加Debug Target，有两种方法：<br> <strong>1、</strong>Target Script </p>
<p> 该方法需要在调试的页面中增加一个<strong>js</strong>：</p>
<div class="cnblogs_code">
<pre class="blockcode"><script src="http://192.168.0.106:8081/target/target-script-min.js#anonymous" type="text/javascript"><br></script></pre>
</div>
<p> 添加后在移动设备中访问该页面即可，如果调试的页面比较少可以使用这个方法，如果多的话推荐第二种方法</p>
<p> <strong>2、</strong>Target Bookmarklet<br> 该方法是将一段js保存到移动设备的书签中，可以在 http://localhost:8081/ 找到这段js：</p>
<div class="cnblogs_code">
<pre class="blockcode">javascript:(function(e){e.setAttribute("src","http://localhost:8081/target/target-script-min.js#anonymous");document.getElementsByTagName("body")[0].appendChild(e);})(document.createElement("script"));void(0);</pre>
</div>
<p> 我将这段js保存到名为Debug书签中，然后使用移动设备访问我想要调试的页面，比如说 http://iinterest.net，最后点击Debug书签就OK了。</p>
<p> <strong> 四、真机调试。</strong></p>
<p> <strong> 1、</strong> 移动设备须有有<strong>wifi无线连接</strong>，且和电脑在同一网段，（确保本机安装了<strong>服务器</strong>，可以到网上搜<strong>xampp</strong>或<strong>wamp，</strong>）把要调试的<strong>页面</strong>放在服务器中相应的文件夹中,我安装的是xampp,所以放在htdocs目录下。在手机的页面中打开本页面的地址，如：http://192.168.0.102/index.html 。回到http://localhost:8081页面，点击“debug client user interface:”链接进入weinre的Debug界面，如果成功添加了Debug Target，这里可以看到它。</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-b2e11a64381ec3878a2e4bd682d8a09f.gif" width="600"></p>
<p><strong> 2、</strong>接下来我们就可用自己熟悉的方式调试页面了，并且调试结果会实时显示在移动设备上</p>
<p><img alt="" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-67aeb778505b9483543c34db2e092098.gif" width="700"></p>
<p> </p>
<p><strong>MAC系统更为简单，不用命令行，直接运行app即可启动weinre，接下来的步骤和windows一样。</strong></p>
<p> </p>
<p> </p>
<p> </p>
<h1 clas |
|
转播
