9102 还不能调试移动真机吗

移动终端调试困难

很多时候我们在开发移动终端的时候，都是先用手机模拟器在PC端进行调试，没有问题之后才会在移动终端的浏览器上进行测试。这个时候，如果没有问题，大家都会开心。然而，一旦出现问题，由于缺乏可视化界面，我们很难解决。与PC端不同，我们可以直观地更改样式或调试断点。有时候在移动端，我们要借助alert进行调试，但这种调试方式效率极低。在许多情况下，这取决于经验或排斥。甚至，我们还得归结到浏览器的实现。

那么，有什么方法可以让我们像调试PC终端一样直观地调试移动终端的适配呢？本文旨在为大家提供移动终端的调试方法，希望能为大家打开一扇新的大门。

本文将给出三种实机调试方法，大家可以选择自己喜欢的一种~

一种移动终端真实机的调试方法

Chrome实机调试weinre调试spy-debugger调试简要说明每种方法的优缺点：

第一款： chrome真机调试有一个很大的局限性，那就是只能调试手机上的chrome浏览器，但是这些浏览器并不适用于UC和QQ，所以在调试兼容性问题的时候没有帮助，但是最大的优点就是：简单快捷。

第二种： weinre调试方法，安装应用不复杂，适合全平台调试，即任何手机的任何浏览器都可以调试，但手机和电脑需要在同一个网段下。

第三种类型，spy调试器，安装起来有点复杂。间谍调试器集成了weinre，但它还增加了一个包抓取工具，这是最方便使用的。

让我们从如何使用这三种调试方法的具体介绍开始：

1.chrome实机调试

手机下载chrome浏览器，通过USB连接PC，开启手机USB调试模式。

然后在PC上打开chrome浏览器，在地址栏输入： chrome 3360//inspect，勾选' discovery usb device '。然后在手机上浏览网页，可以看到下面的页面。单击“检查”进行调试。(由于我的工作电脑加了一个域，因为这个方法不能用，如果有和我一样情况的童鞋，可以考虑用另外两种调试方法。)

2.weinre实机调试

Weinre(WebInspector Remote)是一个基于Web Inspector(Webkit)的远程调试工具。借助网络，运行在移动设备上的远程页面可以直接在PC上调试。

本地服务器：可以使用http-server、tomcat等。也可以使用编译器集成服务

Weinre安装全球安装： npm安装-g weinre

部分安装： npm安装weinre

激活： weinre-http端口8090-绑定主机-所有-

在部分安装的情况下，node_modules/。bin/

相信前端童鞋会用到npm包管理工具。我不会扩展这个工具。如果没有安装npm，我会自己安装。

weinre启动参数：的说明

HttpPort:设置Wninre使用的端口号。默认值为8080 boundhos 3360[主机名| IP |-all-] :默认值为“localhost”。调试[真|假] :该选项类似于-verbose，将输出更多信息。默认值为false。读取超时[秒] :服务器向目标/客户端发送信息的超时时间，默认值为5s。死亡超时[秒] :默认为读取超时的3倍。如果页面在此时间后没有响应，连接将被断开。8080端口被广泛使用，所以我选择指定8090端口。

weinre启动后，我们在浏览器中输入localhost:8090，出现如下界面，表示已经启动成功。

单击调试客户端用户界面进入调试页面。

当前目标中的内容为空。

现在，我们需要做另一个操作，向我们要调试的页面添加一个脚本。

script src=' http :3358 localhost 33608090/target/target-script-min . js # anonymous '/script切记用您的IP地址替换localhost。

然后，我们在本地启动一个服务器，可以是集成IDE的服务器，也可以是http-server。我使用http服务器。启动后，我们在手机上访问要调试的网页。然后你会发现记录被添加到目标下。

此时，我们可以单击元素进行调试。

当您修改样式时，它将立即在手机上生效，您还可以查看控制台信息。唯一的问题是你不能调试断点。

最后，调试完成后，别忘了删除嵌入的脚本。

除了这个方法，还介绍了在手机上保存一段Js代码。当一个页面需要调试时，点击执行JS，但是现在浏览器出于安全考虑不再支持这个方法。默认方法是搜索，而不是执行，所以不可取。

3 .间谍调试器真实机器调试

最后，再次介绍间谍调试器方法。这样，我们就不再需要自己添加和删除脚本了。

间谍调试器内部集成了weinre，通过代理拦截html自动注入weinre所需的所有js代码。它简化了weinre向每个调试页面添加js代码的需要。间谍调试器的原理是拦截所有html页面并请求注入weinre所需的js代码。让页面调试更方便。

特征：

页面调试包抓取操作简单，支持HTTPS。间谍调试器内部集成了weinre、node-mitmproxy和AnyProxy。自动忽略原生App发起的https请求，只拦截webview发起的https请求。对使用SSL锁定技术的本地应用程序没有影响。它可以与其他代理工具一起使用(默认情况下使用anyproxy)。间谍调试器的安装和使用1。安装：全局安装npm install -g间谍调试器

2.启动：间谍调试器

3.设置手机的HTTP代理

代理的地址是PC机的IP地址，代理的端口是间谍调试器的启动端口(默认端口是9888)。

指定端口：间谍调试器-p 8888

安卓设置步骤：设置-无线局域网-长按选择网络-修改网络-高级-代理设置-手动

IOS设置代理步骤：设置-WLAN-选择网络-HTTP代理手动

4.手机安装证书(node-mitmproxy CA根证书)

步骤1:生成证书：

在/Users/XXX/node-mitm proxy/directory(Mac)下生成CA根证书。

间谍调试器initCA步骤2:安装证书：

将node-mitmproxy文件夹下的node-mitmproxy.ca.crt发送到手机，点击安装。

间谍调试器启动接口。同样，手机刷新页面后，目标中也会有记录

用我曾经玩过的京斗游戏的页面展示效果。当我们在手机上选择一个元素时，可以在电脑上看到相应的信息，这样就可以看到是什么风格不兼容可能导致UI异常。同样，我们也可以在控制台中看到JS的日志信息，这对移动调试非常有帮助。

摘要：

Chrome inspect的应用场景有限。weinre易于安装，在使用过程中需要添加和删除脚本。如果调试页面较多，则不适用。间谍调试器安装起来有点复杂，但是使用起来非常愉快。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。