移动端网页开发调试神器Eruda的介绍与使用技巧

;(function () {
 var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
 if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') !== 'true') return;
 document.write('<scr' + 'ipt src="/UploadFiles/2021-04-02/' + src + '">

eruda.init();里面可以传入要初始化哪些面板，默认加载所有。
这样使用方式没有错，但是如果Eruda要跟着发布到线上的话，那我们要删除这段代码？因为这样会不管你需不需要调试Eruda都会立即加载，在页面出现Eruda的图标。我的目标是，Eruda可以保留在页面里，无论什么环境，只要我们想呼唤它出现的时候它才出现，不需要它的时候它只是一段不会生效的普通代码。
我想到的办法是：首先把上述引入代码的src放到if里，同时把localStorage改为sessionStorage，active-eruda参数也可以改个更短的名字，改后的代码如下：


;(function () {
 if (!/eruda=true/.test(window.location) || sessionStorage.getItem('eruda') !== 'true') return;
 var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
 document.write('<scr' + 'ipt src="/UploadFiles/2021-04-02/' + src + '">

这段代码的意思是如果URL中有参数eruda=true或者sessionStorage中eruda的值为true才加载Eruda。这样的好处是，我们需要调试的时候可以在网页URL后面加个参数即可，不需要调试的它不会加载。
然而，这在开发阶段可以这样做比较好，但是在线上环境可能要加URL参数比较麻烦。于是我想到了在页面中点击某个元素10次再加载Eruda，点击10次或者更多次，然后在sessionStorage中写入eruda=true，然后刷新当前页。相反，再点击10次关闭Eruda。用这样比较隐藏的方式开启或关闭Eruda，这样线上环境也可以自由开启或关闭Eruda了。
例子：假如有这样的一个页面，里有一个标题文字


<h2>——规则详情——</h2>
<div>
.....
</div>


那么我们可以在h2标签上绑定一个click事件，加入方法名叫showEruda


<h2 onclick="showEruda">——规则详情——</h2>
<div>
.....
</div>

<script>
var count = 0;
function showEruda () {
 if (count >= 10) { 
 var erdua = sessionStorage.getItem('erdua');
 if (!erdua || erdua === 'false'){
  sessionStorage.setItem('eruda', 'true')
 } else {
  sessionStorage.setItem('eruda', 'false')
 }
 location.reload()
 }
 count++
}
</script>


这样点击规则详情10次就可以唤起Eruda了，再点击10次就关闭Eruda，反正我觉得这样挺好的。
不知道大家都是怎么用的呢？
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。