混合开发之h5在移动端如何调试界面

author author     2023-03-23     219

关键词:

参考技术A

在平时工作中,APP端使用前端界面并进行相应的交互,在此过程中,经常会遇到一些问题,但是由于界面是在APP端打开,就会产生一个问题:当界面报错或者需要调试时,很难进行相应的调试工作,在经过一些尝试之后,发现使用vorlon进行调试比较方便(在Vue多页面工程中,单页面未尝试,但是原理应该一样),以下记录使用过程:

1.首先进行全局安装vorlon(cnpm install -g vorlon);

2.然后在index.html(需要监控的界面)添加<script src="http://192.168.1. : /vorlon.js"></script>

3.打开cmd,输入vorlon执行

4.在浏览器中打开http://192.168.1. : (你配置的监控ip和端口)进行监控

5.手机端打开界面,浏览器中vorlon就会显示相应的调试区域

注意:手机需要和电脑在同一个局域网内

经过个人测试,使用该方法调试APP内使用的H5界面,虽然不及在Chrome中直接进行调试,但是还是能解决移动端调试的问题的

前端er们如何最快开发h5移动端页面

....js是一套构建Web界面的渐进式框架,是目前唯一提供支持混合预处理器,对CLl,vdom,JSX等业界认可的理念能够完美的实现。非常受业界移动开发者的喜爱,大型互联网公司都在使用,如阿里巴巴,饿了么等。AngularJS是一款优秀的前... 查看详情

如何在 iPhone 上以调试/开发模式运行我的混合移动应用程序?

】如何在iPhone上以调试/开发模式运行我的混合移动应用程序?【英文标题】:HowcanIrunmyhybridmobileappindebug/developmentmodeonaniPhone?【发布时间】:2017-02-0213:10:48【问题描述】:TL;DR:我可以通过VS2015在开发模式下运行我们的应用程序... 查看详情

h5开发移动应用app(店铺系列一)

...开发,考虑到适配和多端问题,还有效率原因,我选择了混合模式,即原生做壳,H5+CSS做内容展 查看详情

h5移动开发底部导航-博客园老牛大讲堂

一、H5分类  网页开发,移动开发,移动混合开发,二、所用知识点:  APICloud:APICloud是为了开发APP的,所以如果用H5开发的移动端,需要发送短信,获取照相机等就要用APICloud的了。  aui框架:aui框架就是专门开发移动... 查看详情

浅谈混合开发与android,js数据交互

...火爆,H5在原生APP中的使用越来越广泛,也就是我们常说的混合开发(HybridAPP).最新很火的微信小程序相信大家都是知道的,实际上微信小程序加载的界面就是一个HTML5的界面,HTML5界面在一些电商类的APP中 查看详情

html5移动端布局实战开发课程

...非抄常好的,企袭业现在安卓、iOS开发人员都在学习HTML5混合开发,节约成本、一专多能是未来很多企业用人趋势!HTML5工程师在今后的工作中与Android、iOS工程师对接的几率非常大。混合式开发思想培训出来的学员比单一课程学... 查看详情

h5移动端调试weinre(代码片段)

...ctorRemote),发音同winery[?wa?n(?)ri]。可以在PC上调试运行在移动端上的页面。 weinre有5大功能Element:查看/修改dom,查看/修改domCSSResources:查看/修改localStorage,sessionStorageNetwork:查看网络请求Timeline:Console 查看详情

如何在android开发中调用html和js代码实现混合应用开发

...具,助力开发前后端分离应用。所以如果要在手机端开发混合应用,也可以将ActiveReportsJS集成进去。本篇教程,主要来分享如何在Androidapp开发中调用包含ActiveReportJS的html页面。实现思路:创建AndroidApp使用We 查看详情

从零搭建移动h5开发项目实战(代码片段)

从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多数用户的交互界面,后来逐渐的前端H5开发找到了自己的技术优势,慢慢的... 查看详情

从零搭建移动h5开发项目实战(代码片段)

从零搭建移动H5开发项目实战前端H5的前世今身在Pc的时代,前端技术无疑统治了大多数用户的交互界面!而在移动为王的今天,NA开发在早期占领了大多数用户的交互界面,后来逐渐的前端H5开发找到了自己的技术优势,慢慢的... 查看详情

试说移动端是如何调试的?

移动端调试;(1)模拟手机调试;(2)真机调试之android手机+Chrome;(3)真机调试之iphone+safai;(4)UC浏览器;(5)微信内置浏览器调试;(6)调试工具debuggap;(7)抓包;细节参考:https://segmentfault.com/a/1190000005964730 查看详情

移动端真机调试

移动端调试困难很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决... 查看详情

移动端h5技巧之sticky布局

参考技术A比如这个场景,不管内容多少,你始终需要让“关闭的按钮”在底部固定的位置距离页面顶部大于一定值,表现为position:relative;距离页面顶部小于一定值,表现为position:fixed; 查看详情

hybird开发初体验之react-native

...过的技术,所以移动开发将会是我下一个接触的点。一、混合开发的优势7、8年前移动智能设备逐渐进入大众的生活,安卓/ios开发瞬间火热;而今天,移动开发仍然在web开发领域占据一定的地位,但是技术选型上却有了新的选择... 查看详情

finereport中如何安装移动端h5插件

...插件的方法可以官网上面搜索,这里就不做详细介绍了。移动端HTML5报表使用方法安装好插件后,在浏览器中调用时,需要在报表路径后面加上参数op=h5。但是PC端不完全支持H5效果。移动端添加参数前后效果:fs上挂报表的时候... 查看详情

混合开发之uni-app

参考技术Auni-appApp端内置weex渲染引擎,提供原生渲染能力然而,Weex并不是一个前端框架。实际上,前端框架仅仅是Weex的语法层或称之为DSL(Domain-specificLanguage),它们与原生渲染引擎是分离的。换句话说,Weex并不依赖于特定的前... 查看详情

移动端踩坑合集

...户端进行移动端开发,是大趋势。未来较长一段时间,是混合应用的天下。然而H5写移动页面,那绝对是一步一个坑的节奏啊,做好各设备的兼容将是各前端er的重要使命。今天给大家送上一个合集,是我最近开发中遇到的一些... 查看详情

原生开发h5开发混合移动开发的优缺点

一、原生开发(NativeApp开发)原生开发,是在Android、IOS等移动平台上利用官方提供的开发语言、开发类库、开发工具进行App开发。比如Android是利用Java、Eclipse、AndroidStudio;IOS是利用Objective-C和Xcode进行开发。通俗点来讲,原生开... 查看详情