位置: 编程技术 - 正文

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

编辑:rootadmin

推荐整理分享移动端网页开发调试神器Eruda的介绍与使用技巧(移动端网页开发技术),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:移动端网页开发教程,移动端网页开发教程,移动端网页开发技术,移动端网页开发技术,移动端网页开发用什么单位,移动端网页开发工具,移动端网页开发工具,移动端网页开发工具,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

众所周知,我们在做移动端Web开发的一大痛点就是,在真机运行下无法查看console.log日志和其他信息如网络请求、显示本地存储等信息。如果网页是运行在手机浏览器中还算好,可以把网址在电脑上打开查看console信息,但是如果是做APP的内嵌H5页面,那就只能靠开发阶段在浏览器模拟环境中尽量没有Bug,但是,一旦H5上线后报错那就比较麻烦了,而且还依赖APP环境才能跑的网页,更加难以查找问题。如果让移动端也拥有类似Chrome DevTools工具那岂不是很愉快么?

vConsole便是这样一款很棒的移动端DevTools工具,由大厂企鹅出品。但本文把他定位为男二号,今天的主角男一号是:Eruda!vConsole的同类。如果你不知道怎么在移动端调试网页,那么本篇文章对你很有帮助,如果你是vConsole的用户,那么你也可尝试一下Eruda,如果你是移动端网页开发骨灰级玩家,那么可以选择低调的忽略本文。

Eruda是谁?

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

GitHub地址为: (本地下载),颜值和技能都很棒的Erdua:

详细介绍可以戳这里产看,我就不赘述了

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

使用技巧

这才是本文重点。Eruda的基本使用方法推荐使用CDN和可配置参数的形式,在页面引入如下代码:

eruda.init();里面可以传入要初始化哪些面板,默认加载所有。

这样使用方式没有错,但是如果Eruda要跟着发布到线上的话,那我们要删除这段代码?因为这样会不管你需不需要调试Eruda都会立即加载,在页面出现Eruda的图标。我的目标是,Eruda可以保留在页面里,无论什么环境,只要我们想呼唤它出现的时候它才出现,不需要它的时候它只是一段不会生效的普通代码。

我想到的办法是:首先把上述引入代码的src放到if里,同时把localStorage改为sessionStorage,active-eruda参数也可以改个更短的名字,改后的代码如下:

这段代码的意思是如果URL中有参数eruda=true或者sessionStorage中eruda的值为true才加载Eruda。这样的好处是,我们需要调试的时候可以在网页URL后面加个参数即可,不需要调试的它不会加载。

然而,这在开发阶段可以这样做比较好,但是在线上环境可能要加URL参数比较麻烦。于是我想到了在页面中点击某个元素次再加载Eruda,点击次或者更多次,然后在sessionStorage中写入eruda=true,然后刷新当前页。相反,再点击次关闭Eruda。用这样比较隐藏的方式开启或关闭Eruda,这样线上环境也可以自由开启或关闭Eruda了。

例子:假如有这样的一个页面,里有一个标题文字

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

这样点击规则详情次就可以唤起Eruda了,再点击次就关闭Eruda,反正我觉得这样挺好的。

不知道大家都是怎么用的呢?

总结

标签: 移动端网页开发技术

本文链接地址:https://www.jiuchutong.com/biancheng/369677.html 转载请保留说明!

上一篇:ES6 javascript的异步操作实例详解

下一篇:ES6 javascript中Class类继承用法实例详解

  • 本期应补退税额和期末未缴税额
  • 租厂房土地使用税
  • 增值税申报表上的销售收入
  • 用友软件80端口被占用解决方法
  • 税款所属期什么意思
  • 企业破产时下列受偿等级最高的是
  • 小规模纳税人小微企业免税销售额
  • 最新的税收政策
  • 暂估入库冲回的会计分录
  • 企业员工福利费管理制度内容
  • 加工成本属于什么会计科目
  • 教育经费税前扣除标准
  • 科目余额表期初借贷一定要相等吗
  • 工程发票包括哪些
  • 领钱签字表格模板图片
  • 没有发票的固定资产可以税前扣除吗
  • 租金和物业费怎么计算
  • 自产产品用于集体福利按什么价格入账
  • 补提以前年度摊销
  • 增值税税差调整原因
  • 期间费用核算内容不应该包括
  • windows11怎么设置默认应用
  • 经营费用包括哪些科目明细
  • 送积分怎么做账
  • 贸易公司出口是什么意思
  • 招财树的养殖方法
  • deldir.exe是什么
  • vue多模块多项目集成
  • php yii框架
  • 科罗拉多州位置
  • 建安企业开具增值税专用发票要求
  • vscode安装python3
  • ts和js混用
  • 所得税的期初资产怎么算
  • 研发入库的产品销售出库怎样做账
  • 固定资产减值损失属于营业外支出吗
  • python线程间通信的几种方法
  • 滴滴发票抬头怎么修改
  • 旅游费记入什么科目
  • 金蝶如何新增客户
  • java实现打印
  • 企业与个人之间关系的理解
  • 房租没有发票如何处理
  • 可供出售金融资产新准则叫什么
  • 物业费的会计处理
  • 虚购发票进项税怎么处理
  • 以前年度房租付了没计提
  • 所得税汇算清缴前取得跨年发票
  • 售后回租的实际利率怎么计算
  • 预付物业费会计分录
  • etc发票当天可以打印吗
  • 一般纳税人月底进项税销项税怎么做分录
  • 公司买护肤品发票如何入账
  • 卖掉公司旧办公用品怎么入账
  • 固定资产卡片录入日期怎么改
  • 如何使用ssh
  • win7怎么删除桌面图标
  • 微软10月已停止服务中国用户
  • macbookzen
  • 如何用u盘安装win8操作系统
  • bash.exe
  • svchos1.exe - svchos1是什么教程 有什么作用
  • windows8内存
  • win7数据保护
  • win7微软账户
  • [置顶]电影名字《收件人不详》
  • cocos2dx环境搭建
  • Node.js中的全局对象有
  • vue+node+webpack环境搭建教程
  • python里的迭代器
  • 使用jquery
  • python爬虫详解
  • jqgrid 动态表头
  • 移动应用界面设计形考1答案
  • Python第三方库的常见安装方法有
  • 代理记账和代理的区别
  • 股权转让税务备案时间
  • 临时工和季节工需要交社保吗合法吗
  • 企业演讲稿 英文
  • 江苏省国税局局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设