(總結一下自己除錯的簡單方法，方便定位問題，下面幾種方式學習成本很easy，一起成長，共同進步)

用瀏覽器開啟頁面 F12/command+option+i

• 這時候會出現模擬手機的按鈕（只要是前端開發行業，估計這個都不用多說��）

連入同一環境開代理瀏覽器訪問

• 首先手機和電腦必須同一網路
• 手機連上電腦代理
• 在手機瀏覽器中輸入—同一環境下自己電腦IP：8080/#/路由
  eg: http://192.168.1.101:8080/
  這樣就可以邊改邊看效果

連入同一環境開啟代理瀏覽器訪問（掃碼）

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>

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}),
        ...
    ]
    ...
}