web移动端调试神器Eruda_第1页
全文预览已结束

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、web移动端调试神器eruda在web开发过程中，对html页面举行开发和调试的时候都会用到扫瞄器提供的调试工具，小编我最常用的就是chrome扫瞄器自带的开发者工具了，可以很便利的对js代码举行断点调试，log也很便利。但是在移动端的扫瞄器上举行开发就没有这么便利了，不管是ios的safari还是android的众多扫瞄器。在这里小编推举一个移动端的调试神器eruda。eruda 是一个专为手机网页前端设计的调试面板，类似 devtools 的迷你版，其主要功能包括：捕捉 console 日志、检查元素状态、显示性能指标、捕捉xhr哀求、显示本地存储和 cookie 信息、扫瞄器特性检测等等

2、。eruda的github地址: 废话不多说，我们挺直上代码介绍eruda的使用。用法eruda有两种办法。1）通过cdn用法：挺直在html页面中引入eruda的js文件 eruda.init(); 2）通过npm安装：npm install eruda -save在页面中加载脚本： eruda.init(); 我普通用法第一种方式（比较懒，呵呵）。初始化eruda之后在html界面上会浮现一个半透亮的齿轮按钮，点击一下就会弹出eruda的面板，再点击一下就会收起来，如下图所示。 挺直用法不带任何参数的初始化办法init()会加载eruda提供的所有面板，假如只需要部分面板需要在init()

3、中带上配置参数。这里先介绍一下eruda提供了哪些面板。console面板：捕捉console日志，支持log、error、info、warn、dir、time/timeend、clear、count、assert、table；支持占位符，包括%c自定义样式输出；支持按日志类型及正则表达式过滤；支持快捷指令加载underscore、jquery库；支持javascript脚本执行。elements面板：查看标签内容及属性；查看应用在dom上的样式；支持页面元素高亮；支持屏幕挺直点击选取；查看dom上绑定的各类大事。network面板：图表显示页面加载速度；查看页面各资源哀求时光（android

4、）；捕捉xhr哀求，查看发送数据、返回头、返回内容等信息。resources面板：查看并清除localstorage、sessionstorage及cookie；查看页面加载脚本及样式文件；查看页面加载。sources面板：查看页面源码；格式化html，css，js代码及json数据。info面板：输出url及user agent；支持自定义输出内容。snippets面板：页面元素添加边框；加时光戳刷新页面；支持自定义代码片段。features面板：扫瞄器常用特性检测；提供can i use，html5test快捷拜访。配置面板的代码如下： eruda.init( tool: 'console', 'elements' );

人人文库> 全部分类> 生活休闲 > 科普知识

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论