vue项目移动H5的页面调试

移动H5的页面调试

1、eruda 直接在html中外链引入初始化;然后重新运行项目即可看到

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

如果是在vue项目中话，可以做成活的，如下所示

 mounted() {
    if (this.$route.query.test) {//如果路径传参中有test且为true则手动在head写入script标签，并引入文件
      let script = document.createElement("script");
      script.id = "erduaId";
      script.src = "//cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js";
      document.getElementsByTagName("head")[0].appendChild(script);
      setTimeout(() => {
        let callScript = document.querySelector("script[id='erduaId']");
        if (callScript) {
          let scriptTwo = document.createElement("script");
          scriptTwo.text = `eruda.init();`;
          scriptTwo.id = "initId";
          document.getElementsByTagName("head")[0].appendChild(scriptTwo);
        }
      }, 3000);
    }
  },
  beforeDestroy() {
  	//在页面销毁之前删除相关的script标签，以防影响其他的h5页面
    let callScript = document.querySelector("script[id='erduaId']");
    if (callScript) {
      document.head.removeChild(callScript);
    }
    let callScriptTWo = document.querySelector("script[id='initId']");
    if (callScriptTWo) {
      document.head.removeChild(callScriptTWo);
    }
  },

2、就是真机调试，目前我知道的仅适用于安卓，ios可以自行搜索一下，首先需要一根数据线连接手机和电脑，手机需打开开发者模式，允许USB调试，USB调试功能上选MDI,然后打开如下浏览器

打开这个网址 edge://inspect/#devices，最后在手机端打开一个H5页面，等待浏览器与手机响应，就会出现如下链接，有时在专属App内无法看到响应，可能是用的内核过于古老，可以把链接通过浏览器打开进行调试

3、还有一种方式是vconsole,不过这种方式有点重，不建议使用