一、前言

在进行移动端开发时，一般都是在 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的话，我就要重新上传代码，这个看起来好麻烦啊。但是还可以展示一下具体操作。

①上传代码到服务器之后，就有一个线上链接，如 http://demo.polyv.net/oujiale/demo/vod/flashdemo.html

②扫码，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模拟调试

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

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

②在地址栏，输入一个网址，如 https://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

探索链接