移动端调试上篇

前情

前端开发有分移动和PC，PC端调试有浏览器自带的开发者工具，移动端虽然也可以在PC浏览器端模拟调试，但是最终开发完还是需要去真机上调试的，而移动端浏览器是没有F12，也没有自带的调试工具的，这时候一切正常倒好，如果出问题那就真的是二眼一摸黑了，我们来看一看有哪些方式可以在真机上实现代码调试

移动端调试

调试方式1：vConsole调试面板

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

使用方式1

可以通过npm安装vconsole包来使用，关键代码如下：

js 复制代码

import VConsole from 'vconsole'; 
var vConsole = new VConsole();

使用方式2

通过script标签引入js文件使用，我们可以使用前端开源项目免费 CDN 服务，www.bootcdn.cn/vConsole/，关...

js 复制代码

<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.1/vconsole.min.js"></script>
<script>
var vConsole = new VConsole();
</script>

详细使用教程见 github.com/Tencent/vCo... ，在使用中对于接口的查看不是特别理想，你可以多打印一些日志，这样更利于你的代码调试，其实还有同类工具叫Eruda，它的仓库地址是：github.com/liriliri/er...，这里就不再介绍了，因为使用方式是类似的

调试方式2：weinre

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

使用步骤

通过npm全局安装weinre模块并启动服务器，端口号为8088
cmd 复制代码
```
npm install weinre -g
weinre --httpPort 8088 --boundHost=-all-
```

浏览器访问 http://localhost:8088

arduino 复制代码

我为了测试，特意使用一个vuetest的名称，同时记得把localhost换成你自己电脑的ip

![2025-09-09-13-51-53-image.png转存失败，建议直接上传图片文件](.\2025-09-09-13-51-53-image.png)

打开http://你电脑的ip:8088/client/#你上面定义的名称，默认为anonymous,我这里是vuetest，通过Elements查看元素，Resources查看本地存储，Console查看日志打印，Network查看网络请求

调试方式3：spy-debugger

一站式页面调试、抓包工具。远程调试任何手机浏览器页面，任何手机移动端webview（如：微信，HybridApp等）。支持HTTP/HTTPS，无需USB连接设备，和前面二款工具的区别是，使用spy-debugger无需在页面中嵌入代码，spy-debugger会拦截所有html页面请求注入weinre所需要的js代码，只需要配好手机代理即可。

使用方式

通过npm全局安装spy-debugger模块并启动服务器,默认会自动启动浏览器打开调试窗

cmd 复制代码

pnpm add spy-debugger -g
spy-debugger

下面是安装和运行的界面，因为spy-debugger已经有一段时间没有更新了，如果你的node版本比较新，会有一些警告，都是API过时的警告，但是不影响使用，运行成功浏览器会自动打开http://127.0.0.1:59334页面

设置手机的HTTP代理，代理IP地址设置为PC的IP地址，端口为spy-debugger的启动端口(默认端口：9888) ,通用代理配置方式如下，具体你可以网上搜索查看你所用手机的代理修改方式

Android设置代理步骤：设置 - WLAN - 长按要设置代理的网络再松开进入网络详情 - 代理 - 手动（如果长按不行的话，在网络的右边有个可点击区域，点击可以进入网络详情，在网络详情里找到代理来修改网络代理） iOS设置代理步骤：设置 - Wi-FI - 长按要设置代理的网络再松开进入网络详情 - 配置代理-手动

手机安装证书。注：手机必须先设置完代理后再通过(非微信)手机浏览器访问网址：s.xxx，或者扫描下面二维码，下载安装证书（手机首次调试需要安装证书，已安装了证书的手机无需重复安装)，iOS新安装的证书需要手动打开证书信任%25EF%25BC%258CiOS%25E6%2596%25B0%25E5%25AE%2589%25E8%25A3%2585%25E7%259A%2584%25E8%25AF%2581%25E4%25B9%25A6%25E9%259C%2580%25E8%25A6%2581%25E6%2589%258B%25E5%258A%25A8%25E6%2589%2593%25E5%25BC%2580%25E8%25AF%2581%25E4%25B9%25A6%25E4%25BF%25A1%25E4%25BB%25BB "http://s.xxx%EF%BC%8C%E6%88%96%E8%80%85%E6%89%AB%E6%8F%8F%E4%B8%8B%E9%9D%A2%E4%BA%8C%E7%BB%B4%E7%A0%81%EF%BC%8C%E4%B8%8B%E8%BD%BD%E5%AE%89%E8%A3%85%E8%AF%81%E4%B9%A6%EF%BC%88%E6%89%8B%E6%9C%BA%E9%A6%96%E6%AC%A1%E8%B0%83%E8%AF%95%E9%9C%80%E8%A6%81%E5%AE%89%E8%A3%85%E8%AF%81%E4%B9%A6%EF%BC%8C%E5%B7%B2%E5%AE%89%E8%A3%85%E4%BA%86%E8%AF%81%E4%B9%A6%E7%9A%84%E6%89%8B%E6%9C%BA%E6%97%A0%E9%9C%80%E9%87%8D%E5%A4%8D%E5%AE%89%E8%A3%85)%EF%BC%8CiOS%E6%96%B0%E5%AE%89%E8%A3%85%E7%9A%84%E8%AF%81%E4%B9%A6%E9%9C%80%E8%A6%81%E6%89%8B%E5%8A%A8%E6%89%93%E5%BC%80%E8%AF%81%E4%B9%A6%E4%BF%A1%E4%BB%BB")

安卓手机安装证书需要去手机设置里搜索"证书"，再找到从存储设备安装证书，找到你下载好的证书安装即可 ios安装证书需要去手机设置里找到通用-VPN与设备管理-找到配置描述文件，点击安装，安装验证后再去设置里找到通用-关于本机-信任证书设置，找到刚刚安装的证书，开启信任

用手机浏览器访问你要调试的页面，回到电脑浏览器打开的调试窗，点击targets下的对应项即可开始当前页的调试（如果targets下没有，可以尝试刷新手机页面或者刷新当前页面，如果前面配置正确话，此时就能看到了）

通过Elements查看元素，Resources查看本地存储，Console查看日志打印，Network查看网络请求（如果觉得这个网络抓包不好用，可以通过切换到请求抓包页查看网络请求）,至于TimeLine选项我也没用过，如要有知道怎么用的期待你的留言分享

总结

对于移动端开发比较棘手的就是没有像PC web一样有强大的浏览开发工具栏，对于查看日志，请求调试问题是必不可少的，此文就总结了我平时用的一些移动端调试方法，每种方式各有优缺点，我个人用的比较多的是方式一，在页面上引入vconsole/eruda，但我觉得它不是最佳的，但它无脑简单，哈哈哈......，我个人觉得spy-debugger是比较理想的，是无浸入式的，但是看这个库已经4年没有任何更新了，有点小失落，个人测试了目前还不影响使用，至于weinre已经是直接废弃了，我在测试的时候有一些不稳定，不推荐使用，如果是你，你会选择哪一种方案了？期待你的留言分享，发表你的看法和观点吧！