天天看點

移動端真機調試的方法Eruda

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