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




目录
打赏
0
0
0
0
95
分享
相关文章
mPaaS 常见问题之移动开发平台 mpaas的H5 前端 Kylin 框架引入vant后包特别大如何解决
mPaaS(移动平台即服务,Mobile Platform as a Service)是阿里巴巴集团提供的一套移动开发解决方案,它包含了一系列移动开发、测试、监控和运营的工具和服务。以下是mPaaS常见问题的汇总,旨在帮助开发者和企业用户解决在使用mPaaS产品过程中遇到的各种挑战
330 0
|
10月前
|
调试前端时,在浏览器上修改参数并重新调用接口
有时候我们的页面点击过了,但是接口出问题,想修改参数再调用一次,一般是用apiPost工具把接口复制,再加上token和参数,但是这样非常的效率比较低。
1120 0
【第22期】 一文读懂前端调试利器whistle
【第22期】 一文读懂前端调试利器whistle
177 0
前端基础 - 常用调试方式
前端基础 - 常用调试方式
94 0
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
143 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
115 8
前端H5使用canvas画爱心以及笑脸
本文介绍了HTML5中的canvas元素及其基本用法,通过JavaScript在canvas上绘制图形。首先简述了canvas的功能,接着详细展示了如何使用`bezierCurveTo`方法绘制爱心和`arc`方法绘制笑脸,并附有示例代码及效果说明。最后总结了canvas在网页图形绘制上的应用潜力。
123 2
前端必备的浏览器调试技巧
【7月更文挑战第18天】 Chrome开发者工具是前端调试的关键,包括快捷键Ctrl+Shift+I/Cmd+Option+I打开它,DOM和CSS调试如编辑元素、样式,JS调试如断点、条件断点和监视变量,网络请求分析,性能评估如Lighthouse和性能面板,及截图、模拟设备等实用技巧,助力开发者提升效率。
207 1
如何使用 Chrome DevTools 进行前端性能监控和调试?
如何使用 Chrome DevTools 进行前端性能监控和调试?

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等