推荐一款移动端调试神器（eruda）

1. 简介

Eruda github地址: 戳这里
Eruda 是一个专为手机网页前端设计的调试面板，类似 DevTools 的迷你版，其主要功能包括：
1) 捕获 console 日志、
2) 检查元素状态、
3) 捕获XHR请求、
4) 显示本地存储和 Cookie 信息等等。
5) 详细功能戳 git 地址
简单的说就是谷歌能实现的手机上基本都能实现

2. 使用

git 上面有详细的使用方法, 我只说说我怎么配置的, 我用的vue-cli3 ,只需要下面两句代码就ok了

ps : 开发的时候用, 打包上线一定要记得注释这两句代码哦

<script src="https://cdn.jsdelivr.net/npm/[email protected]/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="https://cdn.jsdelivr.net/npm/[email protected]/eruda.min.js"></script>
    <script>eruda.init();</script>
  </body>
</html>

效果:

手机上会出现这个齿轮

点开:

跟谷歌一模一样, 是不是非常 good !

推荐一款移动端调试神器（eruda）

1. 简介

2. 使用

猜你喜欢