移動端開發除錯工具——eruda
阿新 • • 發佈：2019-01-06
移動端開發除錯是一個比較麻煩的事情，本篇文章將介紹使用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 '