调试那些事儿之移动端调试本文会给出作者经过实践的移动端调试的方法，总有一款是适合你的~，从模拟调试到远程调试，从熟悉到不

一、前言

在进行移动端开发时，一般都是在 pc 端使用手机模拟器进行调试的，没有问题后，我们就会进一步在手机端进行真机调试，一旦在真机上测试出现问题，又没有 pc 端可视化的界面，不方便去查看控制台是否有报错，然后进行做出及时的调整。

本文会给出作者经过实践的移动端调试的方法，总有一款是适合你的~，从模拟调试到远程调试，从熟悉到不熟悉。

二、移动端调试方法

1、Chrome 模拟手机调试

1.1 如何使用？

第 1 步：在浏览器上打开你要调试的网页。这里就直接使用掘金的网站来演示了，这可是硬广，哈哈哈。

第 2 步：右键点击页面上的空白地方，点击右键菜单上的检查。我这边一般都是直接按 F12 键，能用快捷键，当然用快捷键啦。

第 3 步：打开 Chrome 开发者工具之后，点击左上角的手机图标。不想手动点击怎么办，没关系，使用快捷键「Ctrl + Shift + M」，你问我怎么知道的，这里就要赞一下 Chrome 浏览器，具体看图。

第 4 步：点击之后，就是使用手机模拟器来显示页面，但是掘金显示的界面，看起来好像是手机端界面。留意一下下图框柱的内容。

点击后，就是使用手机端浏览器来显示页面了，但现在显示的页面还是和电脑端一样的。

第 5 步：为了保险起见，我还是使用快捷键「F5」，刷新页面。一开始我还觉得刷新页面之后，会有所调整，看起来掘金做了自适应。「Tips：切换到手机模拟器，最好还是刷新一下页面」

第 6 步：可以进行选择切换设备，调整手机尺寸，缩放比例，限制网络流量和 CPU 占用率

1.2 何时使用？

建议在日常移动端开发过程中，进行使用 chrome 模拟进行开发，因为其容易使用与速度快（电脑的性能与网速还是比手机强不少的），而且开发者也能快速把功能与布局实现。但是有些情况，使用 Chrome 模拟手机调试的话，如直播播放器加载的是 m3u8，Chrome 模拟手机调试的话，还是无法播放视频，需要使用真机调试。

1.3 特别 Tips

①切换到手机模拟器，最好还是刷新一下页面

②使用 Chrome 模拟手机调试，出现报错的话，可以使用真机去调试，有可能是不支持 Chrome 模拟手机的情况

2、Chrome 真机调试

2.1 能做什么？

虽然模拟开发很强大，但是我们在 chrome 上模拟的移动版网页，在真机运行的时候，总会遇到一些边边角角的问题，这时，我们就要使用真机调试了。笔者建议，使用模拟开发完毕之后，如果在 android 手机上测试遇到了问题(无论使用什么浏览器)，首先拿 chrome 来看一下，如果在手机 chrome 上也遇到了同样的问题，那么使用chrome的调试是非常便捷的，应当首选其调试。

2.2 如何使用？

敲黑板 - 前提：是首次使用的时候，需要有科学网上冲浪，你懂得

你需要有：一台 android 手机，一台电脑「windows」，一根 android usb 线。

第 1 步：可以在 android 手机上安装 Chrome 浏览器，当然手机自带的浏览器也行，但是举个栗子吧，比如我的红米手机，在自带的浏览器调试，发现点击按钮之后，好像没有效果，简单来说就是没有 Chrome 浏览器没有流畅吧

第 2 步：需要打开手机的开发者模式，一般android手机都是以下路径打开开发者模式，设置->关于手机->版本号连按5次，之后设置菜单中会多出一个开发人员选项，进入将其中的"USB调试"打开即可，但是我使用的红米手机就有点不一样，我们不一样。参考链接：小米/MIUI如何进入开发者选项模式并打开USB调试

第 3 步：将手机与电脑通过 USB 线连接，弹出对话框"是否允许 USB 调试"，选择确定

第 4 步：打开手机上的 Chrome，并进入需要调试的页面，这里可以分情景讨论，按需查看。

情景1：不发布到线上，同一局域网内调试

前提：测试项目用的手机和编写项目的电脑在同一局域网，同一局域网：手机和电脑同时连上同一个 wifi

①获取到电脑 ip 地址，快捷键「win + R」，输入 cmd，打开命令行窗口，输入 ipconfig ，拿到电脑 ip 地址：192.168.2.43

②本地开启服务器，我这边是使用 VSCode 的 Live Server 插件，开启本地服务器，默认的端口号：5500

将网址改成 http://+自己的ip地址:5500，在电脑 Chrome 浏览器打开，看是否页面是否出现，如，我本地项目的网址是：http://127.0.0.1:5500/live/flashdemo.html，那在移动端调试的网址，需要改成 http://192.168.2.43:5500/live/flashdemo.html

③扫码，Chrome 浏览器上调试，个人觉得在移动端调试，最好可以通过扫码，然后在浏览器打开，这样用户体验感觉更好，伪产品经理的感受，哈哈哈。

情景2：上传代码到服务器调试，有具体的网页链接

这种情景的话，个人感觉没有上一种情景方便，因为有可能在本地修改了代码，基于情景2的话，我就要重新上传代码，这个看起来好麻烦啊。但是还可以展示一下具体操作。

①上传代码到服务器之后，就有一个线上链接，如 demo.polyv.net/oujiale/dem…

②扫码，Chrome 浏览器上调试

第 5 步：新开chrome的tab，输入chrome://inspect/，进入调试页面。此时，我们发现，chrome检测到了我们的手机，与我们手机chrome上运行的网页

简单介绍下一些功能：

可以在这里输入手机要打开的url，然后点击open，手机上显示的当前页面就会改变
inspect 表示开始调试当前页面，会打开调试面板(重要)
focus tab 表示让手机显示当前这个连接
reload 表示重新加载页面，也就是刷新
close 表示关闭当前手机显示的页面

第 6 步：点击inspect，弹出chrome调试工具，可以开心的在电脑上的 Chrome 浏览器调试啦

2.3 何时使用？

①在 Chrome 模拟手机调试遇到了问题，切换到真机上调试

②在发布到外网能访问的服务器上之前，用真机调试查看项目的功能和布局

2.4 特别 Tips

①首次使用的时候，需要有科学网上冲浪，你懂得

②记得开启手机上的开发者模式

③如果在第 6 步之后，点击 inspect 后，弹出来的面板是一片空白，这是因为，首次使用改功能时，必须是可以连接外网的(可以翻了个墙)。初始化后，成功显示了调试工具面板的话，以后就不用了。还是回到第 1 个 Tips

④点击inspect按钮页面空白，加载不成功处理办法，这个我没有实践过是否可行，不过遇到的可以试一下

3、微信开发者工具调试

3.1 能做什么？

微信作为移动互联网的重量级应用，很多微信开发者都需要在微信中开发web应用。这时，调试就变成了一件痛苦的事情，还好，微信团队提供了微信调试工具，可以方便我们调试，在微信中访问的页面。

3.2 如何使用？

第 1 步：下载微信开发者工具，并安装。微信开发者工具下载地址

第 2 步：这里可以分情景讨论，按需查看。

情景1：使用url模拟调试

这种方式比较简单，但是有局限性

①选择开发模式为公众号网页调试

②在地址栏，输入一个网址，如 juejin.im/timeline，这种…

还有一种情况就是，微信开发者工具提示“未绑定网页开发者”，微信开放社区给予回复是，开发者工具出于安全考虑，如果网页是需要 oauth 授权的，是要求登陆开发者工具的用户是该网页的开发者。

情景2：USB 远程调试，Chrome 浏览器或者手机内置浏览器打开网页

遇到上面这种提示“未绑定网页开发者”的情况，可以采用 USB 远程调试，跟 Chrome 真机调试类似，所以省略掉一些步骤截图

①可以在 android 手机上安装 Chrome 浏览器，当然手机自带的浏览器也行

②需要打开手机的开发者模式

③将手机与电脑通过 USB 线连接，弹出对话框"是否允许 USB 调试"，选择确定

④打开手机上的 Chrome，并进入需要调试的页面

⑤按下图中箭头从上往下操作，打开远程调试工具，你会发现你的手机名称显示在 Devices 上

⑥点击inspect，弹出调试工具，可以开启你的调试之旅啦，看起来跟 Chrome 浏览器的远程调试差不多

情景3：USB 远程调试，微信上打开网页，可以看下 微信开发者工具官方文档，这里面操作步骤更详细，这里也展示下文档中的移动端调试的操作

①安装0.5.0或以上版本的微信 web 开发者工具

②确认移动设备是否支持远程调试功能

打开微信 web 开发者工具，选择“移动调试”tab，点击验证移动设备是否支持。随后使用移动设备扫描弹出的二维码，在设备上即可获得支持信息。

③打开移动设备中的 USB 调试功能，具体操作可以借助搜索引擎，找到开启手机开发者选项

④安装移动设备 USB 驱动，这个我不知道，需不需要安装，我这边好像没安装过，是直接使用的

⑤打开 X5 Blink 内核的 inspector 功能

直接在手机微信上打开 debugx5.qq.com 这个网址

如下图，勾选“是否打开 TBS 内核 Inspector 调试功能”，并重启微信。

⑥按下图中箭头从上往下操作，打开远程调试工具，你会发现你的手机名称显示在 Devices 上

⑦你会看到 com.tencent.mm 的字样，点击inspect，弹出调试工具，可以开启你的调试之旅啦

3.3 特别 Tips

①了解更多，可以看下微信调试工具官方文档

②遇到上面这种提示“未绑定网页开发者”的情况，可以采用 USB 远程调试

③调试微信上的网页，需要在手机微信上打开 debugx5.qq.com 这个网址，打开 TBS 内核 Inspector 调试功能

4、uc 浏览器调试

4.1 能做什么？

如果上面的提及的浏览器均已调试无误，可偏偏只在UC浏览器上调试出现了问题，我们该怎么办呢？别着急，我们的UC也有调试方法。可以使用单独的UC开发者工具进行调试。但是根据本人实际使用，并不是特别好用，但UC开发者工具也算良心， 我们只在UC上遇到问题时，建议使用 。

4.2 如何使用？

你需要有：一台android手机，一台windows电脑。

这里就不详细描述使用步骤了，具体可以查看[聊一聊系列]聊一聊移动调试那些事儿，然后搜索「4 UC浏览器」

目前没有遇到 UC 浏览器调试出现问题，当遇到的时候，再回来补充。

5、vConsole 调试「是在手机端调试，不是在 PC 端调试」

5.1 能做什么？

腾讯出品的 Web 调试面板，相信不少前端小伙伴都用过。vConsole 会在你网页中加一个悬浮的小按钮，可以点击它来打开关闭调试面板，并查看 DOM、Console、Network和 本地存储 等信息。基本可以满足普通前端开发的需求。

5.2 如何使用？

第 1 步：通过 npm 安装或者直接在需要的页面引入线上 CDN 的 js 文件

npm install vconsole

第 2 步：通过 new VConsole() 的方式初始化 vConsole

<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

第 3 步：在手机 Chrome 浏览器上调试

6、weinre「不需要 USB 调试，但是需同一局域网」

6.1 能做什么？

weinre是一款很不错的网页检查工具，可以通过在本地启动一个 weinre 服务，并向手机网页嵌入一段 js 脚本来实现和电脑的通信，已达到类似浏览器开发工具那样的的调试效果，它的操作界面和 vConsole 差不多，主要包括查看 DOM、Console、Network 等，只不过这一切是在电脑上操作，而不是在手机上。

它可以调试所有浏览器。其原理是在要调试的页面上加上一段js，再由这段js，支持电脑与手机的调试与调用。由于weinre的原理是注入js，微信等内置浏览器也可以使用weinre进行调试。

6.2 如何使用？

第 1 步：安装 weinre

// 全局安装
npm install –g weinre

// 局部安装
npm install weinre

第 2 步：启动 weinre 服务，绑定到localhost，8090 端口号可以修改，但避免使用8888，8080 等其他软件常占用端口，不能使用80

weinew启动参数说明:

httpPort: 设置Wninre使用的端口号，默认是8080
boundHost: [hostname | Ip | -all-]: 默认是 ‘localhost’.
debug [true | false] : 这个选项与–verbose类似，会输出更多的信息。默认为false。
readTimeout [seconds] : Server发送信息到Target/Client的超时时间，默认为5s。
deathTimeout [seconds] : 默认为3倍的readTimeout，如果页面超过这个时间都没有任何响应，那么就会断开连接。

weinre --httpPort 8090 --boundHost -all-

运行上面这行代码，开启了 8090 端口

第 3 步：按照提示打开 http://localhost:8090/ ，发现服务已经启动了

第 4 步：点击debug client user interface，进入调试页面，当前的targets中内容为空。

第 5 步：需要在我们要调试的页面中，引入那个生成的 JS，注：将localhost换成你的电脑的 IP 地址

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script src="http://192.168.2.43:8090/target/target-script-min.js#anonymous"></script>
        <h1>待调试的页面</h1>
    </body>
</html>

第 6 步：在本地开启一个服务器，可以是 VSCode 的 Live Server 插件，或者是 http-server。启动之后，在手机端访问要调试的网页，然后就会发现 targets 下面增加了记录。

第 6 步：点击 Elements 进行调试，可以查看控制台信息和修改样式，会在手机端生效，局限的地方就是不能进行断点调试

6.3 特别 Tips

①weinre 是不能进行断点调试，这是一个局限性

②在调试结束之后，别忘记删除嵌入的script

调试那些事儿之移动端调试