1. 简介
Eruda github地址:戳这里Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：1) 捕获 console 日志、
2) 检查元素状态、
3) 捕获XHR请求、
4) 显示本地存储和 Cookie 信息等等。
5) 详细功能戳 git 地址简单的说就是谷歌能实现的手机上基本都能实现
2. 使用
git 上面有详细的使用方法, 我只说说我怎么配置的, 我用的vue-cli3 ,只需要下面两句代码就ok了
ps : 开发的时候用, 打包上线一定要记得注释这两句代码哦
<script src="/npm/eruda@1.5.4/eruda.min.js"></script>
<script>eruda.init();</script>
vue/public/index.html
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, mine-scalable=0"><link rel="icon" href="<%= BASE_URL %>favicon.ico"><title></title><script>(function (window, document) { // 移动端自适应var docEl = document.documentElement;var viewEl = document.querySelector('meta[name=viewport]');var dpr = window.devicePixelRatio || 1;var scale = 1 / dpr;function layout () {var rem = docEl.clientWidth * 100 / 750;docEl.style.fontSize = rem + 'px';}viewEl.setAttribute('content', 'width=device-width,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale + ',user-scalable=no');layout();window.addEventListener('resize', layout);window.addEventListener('pageshow', function (e) {if (e.presisted) {layout();}});})(window, document);</script></head><body><div id="app"></div><!-- built files will be auto injected --><script src="/npm/eruda@1.5.4/eruda.min.js"></script><script>eruda.init();</script></body></html>
效果:
手机上会出现这个齿轮
点开:
跟谷歌一模一样, 是不是非常 good !
