分享每一天-Eruda 一个被人遗忘的调试神器

Eruda 一个被人遗忘的调试神器

工具推荐 1969 0 创建时间：2020-10-26 12:06:01

调试工具 eruda

#### Eruda是什么？
  Eruda是什么？Eruda 是一个专为前端移动端、移动端设计的调试面板，类似Chrome DevTools 的迷你版（没有chrome强大 这个是可以肯定的），其主要功能包括：捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie信息、浏览器特性检测等等。

虽说日常的移动端开发时，一般都是在用Chrome DevTools浏览器的移动端模式模拟各种手机型号来进行开发和调试，确保功能/页面展示等都没有问题了，才会提交测试；

但是前面都讲了，只是模拟、模拟，当下手机品牌可算是千千万，手机中各种类浏览器，甚至APP都有自己不一样的特色 腰间盘突出，有的还特别突出，有病我们得给它治啊，不然测试、产品、需求、领导都不会放过我们，比如下图场景。

#### 如何使用？

它支持npm方式的，这个是不是很开心？？
外链，没错，就是外链的形式引入，对于它，我觉得npm的方式没有什么太大意义，直接以外链的引入更方便，也能减少项目资源包的大小，更便于控制是否要加载这个资源。

##### 方式一，默认引入：

```javascript
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>
```

##### 方式二，动态加载：

```javascript
__DEBUG__ && loadJS('http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js', ()=>{
  eruda.init();
});
```
##### 方式三 ，指定场景加载：
//比如线上 给自己留一个后门，
//我们一般的做法是喜欢给某个不起眼的元素，添加一个点击事件，要点它十次、八次以后才开启 debug 模式；

```javascript
;(function () {
    var src = 'http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();
```

##### 方式四 ，npm：

```javascript
 npm install eruda --save
```

结尾：

以上就是今天给大家带来的分享，工作中用了蛮久，挺方便的，对于定位移动端的疑难杂症问题、甚至留下后门定位线上问题都有很大帮助，如文中有理解不到位之处，欢迎留言指出。
  关注:![](http://www.seedblog.cn/uploads/article/2020-10-26/AbZ4cUISbtVd5ZqPy5Biy2gc6Kpq9LwMp1PqjhP5.png)

线上问题我们一般的做法是喜欢给某个不起眼的元素，添加一个点击事件，要点它十次、八次以后才开启 debug 模式；

上面二维码确实是真实的官方Demo，不用担心有套路,也有链接： https://eruda.liriliri.io/

Github 地址:https://github.com/liriliri/eruda

Eruda 一个被人遗忘的调试神器

商品推荐

广告推荐

推荐文章