Web移动端调试利器eruda的使用

2018/12/29 10:40
阅读数 198

在日常的移动端开发时,一般都是试用chrome浏览器的移动端模式进行开发和调试,只有在chrome调试完成,没有问题了才会上到真机测试,移动端开发的一大问题就在于此,每次当我们以为改好的时候,就需要打一次包放在手机上,如果不满足条件,又需要再次打包,如此反复,直到调整好为止,这样既费时,又让我们前端人员苦恼。那么有没有一款类似于chrome调试工具的东西呢,答案显然是有的,这里我像大家推荐一款名为eruda的调试工具,废话不多说,走起。

Eruda github地址:  https://github.com/liriliri/eruda/blob/master/doc/README_CN.md

Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、显示性能指标、捕获XHR请求、显示本地存储和 Cookie 信息、浏览器特性检测等等。

牛逼强大的功能:

  1. 按钮拖拽,面板透明度大小设置。

  2. Console面板:捕获Console日志,支持log、error、info、warn、dir、time/timeEnd、clear、count、assert、table;支持占位符,包括%c自定义样式输出;支持按日志类型及正则表达式过滤;支持快捷命令加载underscore、jQuery库;支持JavaScript脚本执行。

  3. Elements面板:查看标签内容及属性;查看应用在Dom上的样式;支持页面元素高亮;支持屏幕直接点击选取;查看Dom上绑定的各类事件。

  4. Network面板:捕获请求,查看发送数据、返回头、返回内容等信息。

  5. Resources面板:查看并清除localStorage、sessionStorage及cookie;查看页面加载脚本及样式文件;查看页面加载图片。

  6. Sources面板:查看页面源码;格式化html,css,js代码及json数据。

  7. Info面板:输出URL及User Agent;支持自定义输出内容。

  8. Snippets面板:页面元素添加边框;加时间戳刷新页面;支持自定义代码片段。

快速上手

  通过cdn来使用  

    <script src="//cdn.bootcss.com/eruda/1.5.2/eruda.min.js"></script>
    <script>eruda.init();</script>

  通过npm安装

    npm install eruda --save

    <script src="node_modules/eruda/eruda.min.js"></script>
    <script>eruda.init();</script>

    注意:

      全局引入js文件对于移动端略大(压缩之后还100kb),因此建议使用脚本按根据页面需要按需引入,或者通过url参数控制是否加入调试器。

      (function () {

        var src = 'node_modules/eruda/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>');
     })();

  初始化:

  • container:用于插件初始化的dom容器,如果不存在,则会以创建时候的div默认为容器,并且将该div至于html根节点下面。
  • tool: 需要加载的插件的面板参数,默认则全部加载。// value是数组类型

  实例:    

    let el = document.createElement('div');
    document.body.appendChild(el);

    eruda.init({

      container: el,
      tool: ['console', 'elements'],
      useShadowDom: true
    });

  
  那么假如你现在就想已经跃跃欲试,可以在某个页面的控制台输入下面的代码。

    (function () {

      var script = document.createElement('script');

       script.src="//cdn.jsdelivr.net/npm/eruda";

      document.body.appendChild(script);

      script.onload = function () { eruda.init() }

    })();    

  至此,eruda的基本介绍和使用就到这里结束了,更复杂的还请大家去eruda官网细细品味,谢谢大家~

原文出处:https://www.cnblogs.com/love769111984/p/10194394.html

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部