【干货】前端移动端调试技巧

精选原创

mb66062e5f7b71d 2025-04-08 14:26:05 ©著作权

文章标签 前端 html5 chrome github 移动端 文章分类 HarmonyOS 后端开发

©著作权归作者所有：来自51CTO博客作者mb66062e5f7b71d的原创作品，请联系作者获取转载授权，否则将追究法律责任

前端移动端调试技巧

前言
一、spy-debugger + Charles 移动端/webview内嵌/微信H5调试

(一)、安装 spy-debugger

第1步：全局安装 spy-debugger

(二)、安装 Charles 与相关证书（这个过程此处省略）
(三)、测试使用，启动spy-debugger

二、腾讯vConsole、web-console

第1步：安装插件
第2步：使用
第3步：支持使用插件

三、Eruda调试

一、安装插件

四、如何调试淘汰的IE浏览器

第1步：找到合适的Window设备安装Edge浏览器
第2步：通过命令使用IE模式调试网页程序

⚠️⚠️文前推荐一下👉
前端必备工具推荐网站(图床、API和ChatAI、智能AI简历、AI思维导图神器等实用工具):
站点入口：http://luckycola.com.cn/

前言

在前端开发的过程中，调试可能是我们日常工作中最常用却又常被忽视的部分。一个高效的调试流程能够极大地减少我们解决问题的时间，同时提升代码的质量。本文将分享一些鲜为人知但非常实用的前端调试技巧，希望能对你的开发工作有所帮助。

一、spy-debugger + Charles 移动端/webview内嵌/微信H5调试

PC端可以用F12进行console等进行调试，但移动端App中使用webview就无法进行实时调试，针对这种情况
github官网：https://github.com/wuchangming/spy-debugger

(一)、安装 spy-debugger

第1步：全局安装 spy-debugger

sudo npm install spy-debugger -g

spy-debugger 证书
其实spy-debugger的代理是基于node-mitmproxy模块实现的，这里安装的证书其实是node-mitmproxy的证书，标题写spy-debugger证书是为了和Charels证书区分开来避免混淆。

● 电脑安装证书

第1步： 在命令行中执行spy-debugger启动spy-debugger服务，启动成功后，检查你的用户目录目录～，会发现多了一个node-mitmproxy文件夹，这个文件夹内放的就是代理需要的证书。

我Mac电脑完整的路径是：

【干货】前端移动端调试技巧_移动端

【干货】前端移动端调试技巧_html5_02

● 接下来需要在手机安装此证书(安卓为例)

第1步：首先需要将node-mitmproxy.ca.crt上传到手机上，可以通过live-server 在node-mitmproxy.ca.crt文件所在的目录下启动这个服务。如果你还没有live-server命令，可以通过以下命令进行安装：

sudo npm i -g live-server

在/Users/gaolu07/node-mitmproxy目录下执行live-server命令

【干货】前端移动端调试技巧_前端_03

**第2步：**在手机浏览器上访问这个服务，输入我电脑的IP地址和端口进行访问，⚠️手机和电脑必须是连接同一个WiFi网络才可以访问。

点击node-mitmproxy.ca.crt文件进行下载安装

【干货】前端移动端调试技巧_移动端_04

下载下来，在浏览器下载中心中长按查看下载的目录

【干货】前端移动端调试技巧_github_05

找到手机设置-》搜索受信任的凭据，然后从手机存储安装

【干货】前端移动端调试技巧_html5_06

【干货】前端移动端调试技巧_chrome_07

选择CA证书，按照刚刚找到的路径找，点击信任安装

【干货】前端移动端调试技巧_前端_08

【干货】前端移动端调试技巧_github_09

此时，spy-debugger的前期准备工作就已经全部完成了

(二)、安装 Charles 与相关证书（这个过程此处省略）

参考文章：

(三)、测试使用，启动spy-debugger

第1步：启动命令

// 启动spy-debugger服务 
spy-debugger

也可以使用-e参数设置Charles作为外部代理服务

// 启动spy-debugger服务，并设置外部代理为Charles的服务 
spy-debugger -e http://127.0.0.1:8888

【干货】前端移动端调试技巧_chrome_10

上述命令表示启动spy-debugger调试服务，并将所有的资源请求都转发到Charles的代理服务上。其实我们打开Charles程序的时候，它实际上是在本地启动了一个http的服务，监听在8888端口上。

【干货】前端移动端调试技巧_前端_11

第2步：在浏览器打开http://127.0.0.1:59365/client/
第3步：在京东App里随便找一个H5页面打开，或者在手机浏览器上打开 https://m.jd.com/
第4步：此时在浏览器上的Remote选项卡上就可以看到，连接的终端了

-第5步：我们可以在Elements选项上进行页面元素的选择和调试，可以发现我们鼠标放到元素上，手机端上会实时看到选中效果

【干货】前端移动端调试技巧_github_12

第6步：我们还可以在Console选项卡下查看代码输出的console信息，我们也可以这里输入页面要执行的代码
第8步：此时我们发现所有的请求都被转发到了Charles上

二、腾讯vConsole、web-console

腾讯vConsole是与框架无关的一个轻量、可拓展、针对手机网页的前端开发者调试面板。
功能特性：
● 日志(Logs)： console.log|info|error|…
● 网络(Network)： XMLHttpRequest, Fetch, sendBeacon
● 节点(Element)： HTML 节点树
● 存储(Storage)： Cookies, LocalStorage, SessionStorage
● 手动执行 JS 命令行
● 自定义插件

第1步：安装插件

npm安装: npm install vconsole
yarn安装: yarn add vconsole
cdn安装:

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
  <script>
    // VConsole 默认会挂载到 `window.VConsole` 上
    var vConsole = new window.VConsole();
  </script>

第2步：使用

import { createApp } from 'vue'
import App from './App.vue'
import VConsole from 'vconsole';
 
// 判断是否是pc设备
const isPc = () => {
    const userAgentInfo = navigator.userAgent;
    const Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    let flag = true;
    for (let v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
}
 
//如果不是生产环境并且不是pc设备那么就显示调试
if (process.env.NODE_ENV != "prod" && !isPc()) {
    console.log(process.env.NODE_ENV);
    const vConsole = new VConsole();
}


  // vConsole.destroy(); // 销毁vConsole实例

【干货】前端移动端调试技巧_前端_13

第3步：支持使用插件

使用插件： vConsole.addPlugin(plugin)
参数plugin: 一个 VConsolePlugin 对象。
返回true或false 代表成功或者失败
移除插件：vConsole.removePlugin(pluginID)
参数pluginID: 插件的 plugin id。

var myPlugin = new VConsolePlugin('my_plugin', 'My Plugin');
// 使用
vConsole.addPlugin(myPlugin);
// 移除
vConsole.removePlugin('my_plugin');

使用demo： https://wechatfe.github.io/vconsole/demo.html

vConsole开源地址：https://gitee.com/Tencent/vConsole#https://gitee.com/link?target=http%3A%2F%2Fwechatfe.github.io%2Fvconsole%2Fdemo.html

web-console开源地址：https://github.com/whinc/web-console?tab=readme-ov-file

三、Eruda调试

Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获 XHR 请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。

一、安装插件

● Eruda开源地址：https://github.com/liriliri/eruda?tab=readme-ov-file
● Eruda官网：https://eruda.liriliri.io/

npm install eruda --save-dev

【干货】前端移动端调试技巧_github_14

【干货】前端移动端调试技巧_前端_15

值得注意的是这两款工具在Element的调试支持上，Eruda比vConsole更强大和完善，它可以像浏览器应用选择调试也可以查看对应样式，而vConsole不支持。

【干货】前端移动端调试技巧_html5_16

四、如何调试淘汰的IE浏览器

我们都知道由于现代浏览器发展的原因，IE浏览器截止至IE11后已经停止维护和更新了，但是由于历史IE浏览器的市场规模原因，还存在着大量的IE浏览器的使用者存在（主要集中在体制内等场景），所以对于大规模拥有网站应用等大型互联网公司来说，调试和排查IE浏览器存在的问题仍然有需求存在，但是由于设备原因却很难找到合适的IE浏览器设备或应用。
下面是一种使用Edge浏览器可行的模拟IE浏览器排查问题和方案：