移动端开发调试是一个比较麻烦的事情，本篇文章将介绍使用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="///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 !== '生产环境域名') { // 若当前域名不是生产环境域名，直接写入erudadocument.write('<script src="///eruda/1.4.2/eruda.min.js" ><\/script><script>eruda.init();<\/script>')} else {/* 线上环境需使用开关开启调试 */if (localStorage.getItem(`eruda`) === '1') {document.write('<script src="///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] = 0avatarEls[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>
