使用eruda.js调试移动端页面

简介

Eruda是一个专为前端移动端、移动端设计的调试面板

类似Chrome DevTools的迷你版
其主要功能包括：捕获console日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和Cookie信息、浏览器特性检测等等。

直接引入

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

在vue-cli 4.x中，仅测试环境使用。参考：vue-cli2升级成vue-cli3 / 分环境引入文件

npm

比如在vue-cli脚手架搭建的单页面应用中使用

• 安装：npm i eruda --save

• 修改src/main.js文件

// ...
import eruda from 'eruda'
// ...
// 开发环境下
if (process.env.NODE_ENV === 'development') {
  const ua = navigator.userAgent
  // 是安卓、iphone 或者 ipad，才显示
  if (ua.match(/Android/i) !== null || ua.match(/iPad|iPod|iPhone/i) !== null) {
    eruda.init()
  }
}

• 移动端打开页面，在网页右下角会出现一个齿轮的图标