移动端真机调试的方法

雨点打透心脏的1/2处 2021-09-20 02:16 356阅读 0赞

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

# 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();
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，356人围观）

还没有评论，来说两句吧...

相关阅读

相关移动端的调试方法

![在这里插入图片描述][148a9ac9abcd43e6b50b79402d35905b.png] [148a9ac9abcd43e6b50b79402d35905b.p

比眉伴天荒/ 2022年09月08日 03:34/ 0 赞/ 175 阅读

相关移动端真机调试指南

导语：随着移动设备的普及以及微信庞大的用户量，移动端的需求也随之爆发式增长，平时我们使用 Chrome 进行手机模拟页面开发，但模拟终究是模拟，不可避免的还是需要真机调试，下面

灰太狼/ 2022年05月20日 02:04/ 0 赞/ 478 阅读

相关移动端真机调试

转载自[https://segmentfault.com/a/1190000018613578][https_segmentfault.com_a_11900000186135

刺骨的言语ヽ痛彻心扉/ 2022年02月27日 02:50/ 0 赞/ 299 阅读

相关 9102了，你还不会移动端真机调试？

移动端调试困难很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题，皆大欢喜。但

悠悠/ 2022年02月01日 02:15/ 0 赞/ 249 阅读

相关 vscode 移动端真机测试项目

1、安装 live server 插件 2、vscode右下角会有 Go Live 标识点击 3、cmd ipconfig 查询自己电脑的ip地址 4、复制地址替换端口前

àì夳堔傛蜴生んèń/ 2022年01月29日 23:19/ 0 赞/ 487 阅读

相关真机调试

1.安装开发证书：开发账号：[https://developer.apple.com/ios/manage/overview/index.action][https_dev

深藏阁楼爱情的钟/ 2021年12月14日 15:47/ 0 赞/ 535 阅读

相关 vue移动端的真机测试

Vue2.0 在 package.json 文件里加入 --host 0.0.0.0，需要重新运行 npm run dev { "name"

爱被打了一巴掌/ 2021年09月29日 19:46/ 0 赞/ 333 阅读

相关移动端真机调试的方法

1. 手机电脑需要在同一无线网下 2. 以vscode为例，在vscode通过右键 open with live server 打开html文件，例：http://127.

雨点打透心脏的1/2处/ 2021年09月20日 02:16/ 0 赞/ 357 阅读

相关 9102 了，你还不会移动端真机调试？

移动端调试困难很多时候，我们在进行移动端开发时，都是先在PC端使用手机模拟器进行调试，没有问题后，我们才会在手机端的浏览器进行测试，这个时候，如果没有出现问题

朱雀/ 2021年09月18日 15:56/ 0 赞/ 345 阅读

相关 web真机调试快捷方法

1、打开笔记本wifi,点击移动热点 2、开启后,可右键转设置,查看热点密码 ![在这里插入图片描述][20200713223905202.png] 3、手机连接热点

绝地灬酷狼/ 2021年07月24日 11:08/ 0 赞/ 358 阅读