前端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:设备信息查看




相关文章
|
2月前
|
移动开发 前端开发 Android开发
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
115 0
|
2月前
|
前端开发
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
145 0
|
2月前
|
缓存 前端开发 JavaScript
【第22期】 一文读懂前端调试利器whistle
【第22期】 一文读懂前端调试利器whistle
56 0
|
9月前
|
前端开发 Java
前端基础 - 常用调试方式
前端基础 - 常用调试方式
52 0
|
11月前
|
Web App开发 前端开发 JavaScript
VSCode如何设置Vue前端的debug调试
VSCode如何设置Vue前端的debug调试
640 0
|
2月前
|
前端开发 数据处理 Android开发
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
【4月更文挑战第30天】本文探讨了Flutter开发中的调试技巧和工具,强调其在及时发现问题和提高效率上的重要性。介绍了基本的调试方法如打印日志和断点调试,以及Android Studio/VS Code的调试器和Flutter Inspector的使用。文章还涉及调试常见问题的解决、性能和内存分析等高级技巧,并通过实际案例演示调试过程。在团队协作中,有效调试能提升整体开发效率,而随着技术发展,调试工具也将持续进化。
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
|
2月前
|
Web App开发 JavaScript 前端开发
【专栏】如何使用 Chrome DevTools 的断点功能提升前端调试效率, 花式打断点
【4月更文挑战第29天】本文介绍了如何使用 Chrome DevTools 的断点功能提升前端调试效率。从基本的行断点和函数断点,到更高级的条件断点、DOM 断点、XHR 断点和事件断点,以及代码注入断点,详细阐述了各种断点的设置和应用场景。通过断点调试实战案例,如异步操作、复杂逻辑和性能优化,展示断点在解决实际问题中的重要作用。掌握这些技巧能有效提高开发质量和效率。
|
2月前
|
监控 前端开发 JavaScript
如何使用浏览器调试前端代码?
【4月更文挑战第11天】前端开发中,浏览器调试是关键技能,能提升代码质量。本文介绍了如何使用浏览器的调试工具:1) 打开调试窗口(F12或右键检查);2) Elements标签页检查DOM结构和样式;3) Console调试JavaScript,查看日志和错误信息;4) Sources设置断点调试JS文件;5) 利用Network、Performance和Memory等标签页优化性能。熟悉调试工具、利用日志和错误信息能有效定位问题,提高开发效率。
162 7
|
2月前
|
存储 移动开发 前端开发
【Web 前端】H5新特性有哪些?
【4月更文挑战第22天】【Web 前端】H5新特性有哪些?
|
2月前
|
SQL 存储 JavaScript
前端浏览器调试详解版
前端浏览器调试详解版
80 0