移动端开发调试 - 更优雅的调试方式vconsole / eru

本文志在实现：同样是一套代码，在生产上，默认不会使用、访问到vconsole/eruda等调试库，但当调整url参数时，即可使用到，此举有利于生产调试bug

移动端的H5开发有两大调试利器，暂时来说是用得比较爽的

• eruda

  
  image.png

• vconsole

  
  image.png

npm方式引入似乎太过于重

$ npm install eruda --save
$  npm i vconsole

那就外链了？

eruda:

<script src="//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script>
<script>eruda.init();</script>

or 

<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

然后eruda提供了一个更为优雅的方式：

(function () {
    var src = '//cdn.jsdelivr.net/npm/eruda';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

即当前端拼接了eruda=true参数的时候，才会引入对应的js文件

同理，找个vconsole的 CDN

(function () {
        var src = "https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js";
        if (!/vconsole=true/.test(window.location)) return;
        document.write("<scr" + 'ipt src="' + src + '"></scr' + "ipt>");
        document.write("<scr" + "ipt>var vConsole = new VConsole();</scr" + "ipt>");
      })();

然后在访问的地址，对应添加eruda=true或者vconsole=true即可

在这提供个自己的网站供大家试试

https://yingtai.tech/online_clinic/

然后在网址上，添加?vconsole=true

https://yingtai.tech/online_clinic/?vconsole=true

即可看到vconsole

如使用eruda配置也是这样子的做法
添加?eruda=true

https://yingtai.tech/online_clinic/?eruda=true

即可看到eruda

具体使用手册，看官网吧

将这个apply后，往后的h5开发，只要有问题，就调整网址参数，即可在线看问题而不影响其他生产对象，完美！

在此基础之上，继续思考，如果能根据打包环境.env里的参数进行配置，当为RELEASE时，则加参才load出vconsole，当非RELEASE，则默认加载vconsole进行调试，于是乎完整版如下：

<script>
      (function () {
        var src = "https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js";

        if ('<%= process.env.REACT_APP_ENV %>' !== 'RELEASE') {
          document.write("<scr" + 'ipt src="' + src + '"></scr' + "ipt>");
          document.write("<scr" + "ipt>var vConsole = new VConsole();</scr" + "ipt>");
        } else {
          if (!/vconsole=true/.test(window.location)) return;
          document.write("<scr" + 'ipt src="' + src + '"></scr' + "ipt>");
          document.write("<scr" + "ipt>var vConsole = new VConsole();</scr" + "ipt>");
        }
      })();
      
    </script>

巧技在于webpack打包时，在index.html里读取得到环境变量，即process.env.REACT_APP_ENV。这种就类似于jsp模板语法，可以简单改成这样

  <% if (process.env.REACT_APP_ENV !== 'RELEASE') { %>
    <script src="<%= BASE_URL %>vconsole.min.js"></script>
  <% } else { %>
  // do your thing
  <% } %>