手机简单调试方法---备忘

(总结一下自己调试的简单方法，方便定位问题，下面几种方式学习成本很easy，一起成长，共同进步)

用浏览器打开页面 F12/command+option+i

• 这时候会出现模拟手机的按钮（只要是前端开发行业，估计这个都不用多说��）

连入同一环境开代理浏览器访问

• 首先手机和电脑必须同一网络
• 手机连上电脑代理
• 在手机浏览器中输入—同一环境下自己电脑IP：8080/#/路由
  eg: http://192.168.1.101:8080/
  这样就可以边改边看效果

连入同一环境打开代理浏览器访问（扫码）

• 首先手机和电脑必须同一网络
• 在电脑上的网址需要写成http/https+代理地址+8080:/….
  eg:
  由http://localhost:8080/#/punishment
  ||
  改成http://10.253.107.235:8080/#/punishment
• 把上面地址转成二维码
  生成二维码两种方式
  1.谷歌插件https://github.com/aTool-org/chrome-qrcode
  2.草料二维码生成器https://cli.im/
• 用手机扫一扫，即改即生效

vConsole && vconsole-webpack-plugin

1.vconsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。
* 安装
npm install vconsole
* 在开发项目中引入dist/vconsole.min.js

<script src="path/to/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

即可，更多参考https://github.com/Tencent/vConsole/blob/dev/README_CN.md
* 在项目中的console就可以在手机中展示

2.vconsole-webpack-plugin

主要放在配置项里，也是基于vConsole开发的
* 安装
npm install vconsole-webpack-plugin –save-dev
* 使用
1.webpack.conf.js 文件配置里增加以下插件配置即可

// 引入插件
var vConsolePlugin = require('vconsole-webpack-plugin'); 

module.exports = {
    ...

    plugins: [
        new vConsolePlugin({
            filter: [],  // 需要过滤的入口文件
            enable: true // 发布代码前记得改回 false
        }),
        ...
    ]
    ...
}

2.package.json 文件配置：

scripts: {
    "dev": "webpack -w --debug",
    "prod": "webpack -p"
}

3.webpack.conf.js 配置：

// 引入插件
var vConsolePlugin = require('vconsole-webpack-plugin'); 

// 接收运行参数
const argv = require('yargs')
    .describe('debug', 'debug 环境') // use 'webpack --debug'
    .argv;

module.exports = {
    ...

    plugins: [
        new vConsolePlugin({enable: !!argv.debug}),
        ...
    ]
    ...
}

更多内容 ：https://www.jianshu.com/u/f250f42cc28d

博客： https://lixiaoyu2017.github.io/