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

系统管理员 2021-09-17 18:40 528阅读 0赞

### 1.  简介 ###

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

### 2.  使用 ###

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

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

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

效果:

手机上会出现这个齿轮

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70][]

点开:

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1][]

[Link 1]: https://github.com/liriliri/eruda/blob/master/doc/README_CN.md
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70]: /images/20210726/5f6b87df43ab437d86968bdffb2128b5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5kYW4xMTI3_size_16_color_FFFFFF_t_70 1]: /images/20210726/bce1cd887e014740a528b4ded4399afd.png