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




目录
相关文章
|
JavaScript 前端开发 Docker
如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
通过这些步骤,可以确保您的Next.js应用在多核服务器上高效运行,并且在Docker环境中实现高效的容器化管理。
1693 44
|
网络协议 安全 Docker
windows环境下的设置docker远程访问(开放2375端口)
windows环境下的设置docker远程访问(开放2375端口)
4889 0
|
Web App开发 JavaScript 搜索推荐
【高德地图API】从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索
原文:【高德地图API】从零开始学高德JS API(四)搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索 摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等。
3469 0
|
JavaScript 前端开发
js如何获得浏览器的宽高
js如何获得浏览器的宽高
385 5
|
11月前
|
机器学习/深度学习 自然语言处理 算法
小红书:通过商品标签API自动生成内容标签,优化社区推荐算法
小红书通过商品标签API自动生成内容标签,提升推荐系统精准度与用户体验。流程包括API集成、标签生成算法与推荐优化,实现高效率、智能化内容匹配,助力社交电商发展。
|
移动开发 JavaScript Android开发
如何实用便捷的在本地真机调试WEB端HTML5网页
如何实用便捷的在本地真机调试WEB端HTML5网页
|
Ubuntu 网络安全 PHP
如何使用vscode的Docker插件管理ubuntu 拉取服务器的镜像以及创建容器
本测试镜像旨在记录使用vscode的Docker插件拉取病创建Dockerfile,以及拉取镜像。
|
设计模式 开发框架 算法
【QML 创建界面】QML界面的动态创建及其其他方法 (Dynamic Creation of QML Interfaces and Other Methods)
【QML 创建界面】QML界面的动态创建及其其他方法 (Dynamic Creation of QML Interfaces and Other Methods)
1952 0
|
机器学习/深度学习 算法 Python
机器学习中的音频特征:理解Mel频谱图
机器学习中的音频特征:理解Mel频谱图
2375 0
机器学习中的音频特征:理解Mel频谱图
|
Web App开发 Android开发 开发者
使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices
我使用的手机是三星A9 ,其他安卓手机方式也相同,电脑是win 10 系统。 第一步首先打开手机的开发者模式,确保usb调试和通过usb验证应用程序保持打开状态,如图所示: 第二步,最好是电脑和安卓手机都连接了谷歌浏览器 第三步,打开电脑上的谷歌浏览器,调出控制台, 我们点击More tools,再选择 在之后的页面中,如图所示选项必须打对勾。
8631 0

热门文章

最新文章