前端H5无线调试

简介: 目前主流的H5调试还都是通过手机插线链接电脑进行调试,以Android为例,通过USB链接电脑,然后通过chrome://inspect/#devices实现手机的远程调试。但是存在一些问题,主要体现在1:便利性:设备需要安装ADB相关调试环境,需要一定的Android开发背景2:可用性:Chrome调试经常需要翻墙更新,不然打开白屏3:稳定性:USB链接容易断,稳定性差4:不支持无线:通过USB的方式,需要连线,不能远程调试这里我介绍下一些常用的无线调试技术方案 。


一 背景

目前主流的H5调试还都是通过手机插线链接电脑进行调试,以Android为例,通过USB链接电脑,然后通过chrome://inspect/#devices实现手机的远程调试。但是存在一些问题,主要体现在

1:便利性:设备需要安装ADB相关调试环境,需要一定的Android开发背景

2:可用性:Chrome调试经常需要翻墙更新,不然打开白屏

3:稳定性:USB链接容易断,稳定性差

4:不支持无线:通过USB的方式,需要连线,不能远程调试

这里我介绍下一些常用的无线调试技术方案 。

二  无线调试技术

1. vorlon(面向开发)

Vorlon是微软出品的一个开源的、可扩展的、平台无关的JavaScript远程调试工具。采用Node.js和socket.io技术。使用它,我们可以通过浏览器远程inspect、debug、test任何设备上的js代码。官网:链接,github:链接

首先,我们需要通过npm安装Vorlon的服务端控制程序。

npm i -g vorlon


安装成功之后,通过一个简单的命令即可启动Vorlon服务。

vorlon


启动成功后,如果是在本机打开的服务,则在浏览器端打开 http://localhost:1337 即可看到Vorlon的控制面板。

这个时候,只需要待调试页面端引用下面的脚步,就可以实现调试,

效果如下:

2. Eruda(面向测试)

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

主要面向测试同学进行日常测试问题反馈。


引用方式:

 

eruda.init();

三 volor的高级用法

1. 功能

1.1 console: 查看console日志, 执行js

1.2 modernizr: 查看当前支持的和不支持的一些api特性


1.3 DOM Explorer: dom树查看和修改

1.4 Object Explorer:展示当前的js对象树


1.5 Best Practices: web开发的一些建议

1.6 Network Monitor:网络监控


1.7 Resources Explorer: storage和cookie查看


1.8 Device Information:设备信息查看




目录
相关文章
|
7月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
250 0
|
7月前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
781 0
|
7月前
|
缓存 前端开发 JavaScript
【第22期】 一文读懂前端调试利器whistle
【第22期】 一文读懂前端调试利器whistle
133 0
|
前端开发 Java
前端基础 - 常用调试方式
前端基础 - 常用调试方式
74 0
|
Web App开发 前端开发 JavaScript
VSCode如何设置Vue前端的debug调试
VSCode如何设置Vue前端的debug调试
852 0
|
1月前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
31 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
5月前
|
Web App开发 前端开发 JavaScript
前端必备的浏览器调试技巧
【7月更文挑战第18天】 Chrome开发者工具是前端调试的关键,包括快捷键Ctrl+Shift+I/Cmd+Option+I打开它,DOM和CSS调试如编辑元素、样式,JS调试如断点、条件断点和监视变量,网络请求分析,性能评估如Lighthouse和性能面板,及截图、模拟设备等实用技巧,助力开发者提升效率。
139 1
|
5月前
|
Web App开发 存储 监控
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?
|
7月前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
461 1
|
7月前
|
前端开发 数据处理 Android开发
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
【4月更文挑战第30天】本文探讨了Flutter开发中的调试技巧和工具,强调其在及时发现问题和提高效率上的重要性。介绍了基本的调试方法如打印日志和断点调试,以及Android Studio/VS Code的调试器和Flutter Inspector的使用。文章还涉及调试常见问题的解决、性能和内存分析等高级技巧,并通过实际案例演示调试过程。在团队协作中,有效调试能提升整体开发效率,而随着技术发展,调试工具也将持续进化。
100 0
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用