移动端开发调试工具——eruda

移动端开发调试是一个比较麻烦的事情，本篇文章将介绍使用eruda来完成移动端开发调试。

一、直接使用：

在前端项目的index.html中直接通过js写入eruda工具

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>******</title>
  </head>
  <body>
    <div id="app"></div>
    <script language="javascript">
      document.write('<script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js" ><\/script><script>eruda.init();          <\/script>')
    </script>
  </body>
</html>

这样就会在移动端出现调试工具了，当然，项目中，我们只希望在开发环境和测试环境使用该工具，

所以，下面我对eruda的引入作了一些限制，已使我们在开发环境和测试环境直接暴露调试工具。这里我设置了在生产环境通过点击logo头像9次来开启/关闭调试工具，以供不时之需！！！

二、开发环境、测试环境直接开启调试，生产环境通过特定开关打开调试工具

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>******</title>
  </head>
  <body>
    <div id="app"></div>
    <script language="javascript">
      /* 非线上环境直接开启调试 */
      if (window.location.hostname !== '生产环境域名') { // 若当前域名不是生产环境域名，直接写入eruda
        document.write('<script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js" ><\/script><script>eruda.init();<\/script>')
      } else {
        /* 线上环境需使用开关开启调试 */
        if (localStorage.getItem(`eruda`) === '1') {
          document.write('<script src="//cdn.bootcss.com/eruda/1.4.2/eruda.min.js" ><\/script><script>eruda.init();<\/script>')
        }
      }
    </script>
  </body>
</html>

app.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    let avatarEls = document.getElementsByClassName('avatar-hack-hook') // 获取打开eruda调试工具开关的dom元素
    console.log('当前logo头像个数:', avatarEls.length)
    let timesObj = {}
    for (let i = 0; i < avatarEls.length; i++) {
      if (avatarEls[i]) {
        let propName = `times${i}`
        timesObj[propName] = 0
        avatarEls[i].addEventListener('click', function () {
          timesObj[propName]++
          console.log('click 9 times to open or close eruda >>>' + timesObj[propName] + ' times')
          if (timesObj[propName] % 9 === 0) {
            if (localStorage.getItem(`eruda`) !== '1') {
              console.log('***********open eruda***********')
              localStorage.setItem('eruda', '1')
            } else {
              console.log('***********close eruda***********')
              localStorage.removeItem(`eruda`)
            }
          }
        })
      }
    }
  }
}
</script>

<style lang="less">
  @import '~@/style.less';
</style>

移动端开发调试工具——eruda

一、直接使用：

二、开发环境、测试环境直接开启调试，生产环境通过特定开关打开调试工具

index.html

app.vue

猜你喜欢