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

(总结一下自己调试的简单方法，方便定位问题，下面几种方式学习成本很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/
• 用手机扫一扫，即改即生效

在安卓设备上使用 Chrome 远程调试功能

你的网页内容在移动设备上的体验可能和电脑上完全不同。Chrome DevTools 提供了远程调试功能，这让你可以在安卓设备上实时调试开发的内容
步骤：

• 打开 USB 调试选项
  在安卓设备上，进入设置>开发者选项。
  注意：在安卓 4.2及以后的版本中，默认情况下开发者选项是隐藏的。要启用开发者选项，选择设置>关于手机然后点击版本号7次。
• 在开发者选项中，选中 USB 调试复选框。
• 在安卓上启用 USB调试之后会有一个警告，提示你是否要开启 USB 调试模式，选择 OK。
• 连接你的设备
• 在电脑端的 Chrome里，在地址栏输入chrome://inspect。进入后确认 Discover USB devices 已经勾选了
• 最后提示ok?点击ok，选inspect即可

vConsole && vconsole-webpack-plugin

1.vconsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

• 安装
  npm install vconsole
• 在开发项目中引入dist/vconsole.min.js

即可，更多参考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}),
        ...
    ]
    ...
}

vConsole参考： https://github.com/Tencent/vConsole/blob/dev/README_CN.md
Chrome调试： http://wiki.jikexueyuan.com/project/chrome-devtools/