让知识连接你我
投稿赚钱
当前位置: 首页 > 前端开发 > 移动端中使用调试控制台 eruda
  • 101
  • 微信分享

    扫一扫,在手机上查看

移动端中使用调试控制台 eruda

2019.09.07 10:00 249 浏览 举报

  使用

  通常移动端:在html代码 head中加入移动端校准控制台源代码并初始化:

  <head>
      <meta charset="UTF-8">
      ....
      <!-- 移动端调试控制台 -->
      <script src="https://cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script>
          <script>eruda.init();</script>
  </head>

  如下所示图:开启悬浮按钮即可看见控制台

96c7477c281d755f54c42f84783d0c57.jpg

03b5a9ff210ab2e4a73d81a039cac0b2.jpg

  假如是小程序,在onLaunch时开启debug,能够在真机中调出控制台:

  App({
      onLaunch: function (options) {
      wx.setEnableDebug({
      enableDebug: true
      });
      },
  });

  安装

  你能够根据npm来下载使用该工具:

  npminstall eruda--save

  然后在网页中加入下述脚本:

  (function () { var src ='node_modules/eruda/dist/eruda.min.js'; if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') !='true') return; document.write('');})();

  能够看见只有当url上带有eruda=true或本地存储active-eruda为true的时候,工具才会被读取并运行。当中设置面板有选项能够设置active-eruda使工具常驻,不用每一次都在url上添加eruda=true。

  注:该插件的文件gzip后大小约有50+kb,相比于项目页均js脚本量几kb来说或是太大,并不适宜在现网环境读取影响网页载入速度。

  功能面板简介

  Console面板

  该面板会替换console对象中的log,error,info,warn,dir,time,timeEnd方法以不同的款式提示出来,另外默认会根据onerror捕获全局错误(能够在设置面板关掉),搞出错误信息极其堆栈。确实,日志的清除与过滤同样是支持的,还能够直接在该面板输入js脚本并在全局作用域下运行。该面板还内置了一些快捷方便指令来快速运行一些有用的功能,比如在网页载入jQuery或underscore,使用正则表达式过滤log等。

  Elements面板

  查阅Dom状态对于校准工具自然是一个不可缺少的功能。根据该工具,你无需接入PC端校准工具就能轻松查阅DOM节点上的各个属性值,内容,使用的CSS款式。被查阅的元素也会在网页上高亮,能够使你快速掌握DOM元素的margin,padding。

  Network面板

  Network面板根据performance接口以图表的行式展示网页的读取速度。计划在resource timing api取得广泛应用时再加入各个资源的加载情况,不过目前它仅仅只能得到页面的加载速度。

  Resources面板

  该面板主要用来展示localStorage,cookie,页面脚本,样式,图片等资源,同时能够对其执行一些简单的操作,如清除指定的localStorage条目。

  Info面板

  很多时候会需要查看复制浏览器上的指定信息,比如通过JsBridge获取到的用户Id,用于后台数据查错。又比如,测试碰到某些页面错误时,我们首先做的一件事经常是:把链接发给我看看,然而APP里并没有复制链接的选项:( 还有,一个页面在不同环境下需要有不同的表现,项目H5页面经常需要在不同APP里有不同表现以及调用不同jsApi。靠什么来区分?UA。然而有时候对某个版本UA检测不准确就会造成页面出BUG,这时候如果有个方便的方法能够快速查看到出错者的浏览器UA就太好了。

  综上,Info面板默认会展示出url和user-agent两条信息,你也可以通过调用它的接口输出其它指定信息。

  Snippets面板

  Console面板可以执行js脚本,但在手机上输入代码体验实在不怎么样。利用该面板你可以添加一些方法以便于快速和多次触发它。Sinppets默认加入了两个脚本,为页面所有元素加border查看排版结构以及重刷页面。

  Features面板

  嗯,之前碰到过BUG,结果发现是APP的WebView没开启对localStorage的支持,所以有了该面板。它会检测一些常用的功能是否被浏览器所支持,不支持的话将以红色高亮进行显示。

  自定义插件

  Eruda本质上只是一个可拖拽的入口按钮加一个Tab组件,其中的每个面板都是一个独立的插件。所以,事实上你可以自行添加各种自定义的信息展示面板。这是一个很有用的特性,因为通用组件很难做到适应于各类需求,有很多时候你会想要去扩展它。比如,项目用于移动端测试环境切换的工具会在每个页面嵌入该插件用于不同环境的切换,同时显示ID便于查找单次请求所对应的完整HTTP记录


本文首次发布于开创者素材 ,转载请注明出处,谢谢合作!

相关文章推荐