移动端真机调试的方法

最新推荐文章于 2025-06-03 15:35:05 发布

原创最新推荐文章于 2025-06-03 15:35:05 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#移动端 #真机调试

本文介绍了在移动端进行真机调试的两种方法：通过Eruda原生使用和使用vConsole。首先，确保手机和电脑在同一无线网络下，用VSCode的Live Server打开HTML文件，获取电脑的IPv4地址，并在手机浏览器中输入该地址访问页面。接着，可以利用Eruda或安装vConsole插件来实现更详细的调试功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

手机电脑需要在同一无线网下
以vscode为例，在vscode通过右键 open with live server 打开html文件，例：http://127.0.0.1:5500/index.html
打开cmd，输入ipconfig，复制 IPv4地址后的 IP 地址。例10.110.51.146
将浏览器地址栏的地址替换为http://10.110.51.146:5500/index.html
百度草料二维码，通过手机扫生成的二维码即可在手机上访问页面

Eruda

原生使用

<script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script>
<script>
  // 初始化
  eruda.init();
  console.log('Hello world');
</script>

npm

yarn add eruda --save
 
 // 开发测试环境下面使用vConsole进行调试
if (config.VCONSOLE) {
  const VConsole = require('vconsole');
  new VConsole();
}

// or

// 然后在index.html页面中加载脚本：
<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

vConsole

原生使用

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

### npm
```js
yarn add vconsole
 
然后设置个环境变量作为区分线上线下环境，比如：
 
import VConsole from 'vconsole';
 
const isDebug = true;
// 本地开发调试注入vConsole
if (isDebug) {
    new VConsole();
}