pageSpy——远程调试手机内嵌H5页面

原创

已于 2024-01-04 18:12:06 修改 · 1.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2024-01-03 16:21:44 首次发布

前言

pageSpy官网（https://www.pagespy.org）提供的文档说明已经很详细了，本文主要是记录一下vue项目中如何使用。

安装

yarn global add @huolala-tech/page-spy-api

# if you use npm

npm install -g @huolala-tech/page-spy-api

这里是全局安装，并非安装到项目中。

项目配置

<script  crossorigin="anonymous" src="<host>:6752/page-spy/index.min.js" ></script>
<script

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

白茶_White

关注关注

7
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

ios手机在app中调试h5页面

haosicx的博客

03-12

2894

网页开发在浏览器里调试很方便，但是在移动端开发调试，例如需要在app中打开，会用到一些bridge , 这时候就不能在浏览器调试。在app调试，如果每次都要发布到测试环境才能调试，那就会浪费很多时间。

货拉拉远程调试神器-PageSpy!

不负光阴不负自己，不负被爱不负所爱

02-05

1048

PageSpy是一款用来调试远程 Web 项目的工具。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。

参与评论您还未登录，请先登录后发表或查看评论

PageSpy: 实现如同Chrome开发者工具般的远程调试体验

gitblog_00992的博客

08-08

792

PageSpy: 实现如同Chrome开发者工具般的远程调试体验 page-spy-webDebug remotely and easily like chrome devtools.项目地址:https://gitcode.com/gh_mirrors/pa/page-spy-web 一、项目介绍 PageSpy是一款专注于提升Web项目、Mini Program及HarmonyOS应用程序调...

HarmonyOS 5鸿蒙场景技术共建能力：PageSpy破局vConsole调试场景

热门推荐

wanmeijuhao的博客

10-19

1万+

摘要：本文介绍了HarmonyOS开发中远程调试工具PageSpy的应用与实践。针对移动端调试环境分散、问题复现困难等痛点，PageSpy通过统一采集日志、网络请求等数据，在桌面端实现集中调试，大幅提升开发效率。文章详细讲解了PageSpy的功能特点、安装部署方法（包括Node环境和Docker容器化两种方案），以及在HarmonyOS项目中集成使用的具体步骤。该工具支持API 9/11/16等多个版本，特别适用于H5、Webview应用调试及跨团队协作场景，为开发者提供了一套完整的远程调试解决方案。（14

PageSpy - 崭新的远程调试平台

weixin_53923071的博客

07-03

2234

PageSpy 是一个类似 devtools 的包含各种调试功能的平台，当你无法使用 devtools 时，PageSpy 将是你的首选！

h5远程调试

qq_37833745的博客

11-09

3130

H5开发远程调试篇由于部分同学对远程调试不太了解，了解远程调试后，可以直接避免打alert来看数据的变化，直接在chrome浏览器内打断点，然后查看每一步数据的变化，可提高开发效率，定位问题快等优点，H5发布生产后也可通过debug调试来定位问题，快快来看看我们在各个平台是如何debug，加入我们吧！以下调试方式包括：微信内安卓、浏览器android和IOS的4种调试 1、微信----安卓远程调试 1、TBS studio调试（第二代）推荐使用 1.移动调试链接：404 2、微...

远程调试工具Page Spy

u011757939的博客

03-27

1286

这里只是记录下有这个工具，个人感觉用着还挺好，至少能解决远程的如果出现bug问题，可以报错的地方进行调试或者进行观察，只需要把这个做成设置开关就行。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；对此 PageSpy 提供项目运行现场供技术人员在调试端查看，在远程协同场景中，测试人员不用再频繁的通过文字、截图、语音、录屏等方式向技术人员提供故障信息。远程办公、跨地区协同：传统沟通方式如邮件、电话、视频会议等，沟通效率不高、故障信息不全面，容易误解误判；

H5移动端远程调试

贪睡的小聪

08-25

966

前端分享-H5移动端调试背景 H5页面在PC上调试起来很方便，但是在手机上却很麻烦，此时移动端就像一个黑匣子，查看或修改DOM、CSS，localStore等变的很困难。这个时候远程调试就孕育而生了。 weinre 什么是weinre Weinre是单词缩写，全称是网页远程审查（Web Inspector Remote） weinre能做什么对应上面的菜单，weinre有5大功能 Ele...

远程调试H5：weinre+ngrok

weixin_34168880的博客

03-22

173

最近做H5开发时，经常遇到在chrome模拟器上样式显示正常，在手机上却出现样式错误的情况，这时仅仅使用chrome模拟器来调试很难解决问题，于是开始琢磨怎么在PC端远程调试手机页面。 weinre使用比较简单，首先用npm安装weinre: npm install -g weinre 启动服务监听端口： weinre --boundHo...

iOS Safari移动端H5页面调试全攻略：利用ios-webkit-debug-proxy进行内嵌H5页面调试

Cuckoosai的博客

05-25

2776

它充当了一个桥接器，将WebKit的远程调试协议转换为WebSocket协议，使得我们可以通过标准的Web调试工具（如Chrome DevTools）对iOS Safari和WebView进行调试。通过使用ios-webkit-debug-proxy工具，我们可以轻松地对iOS Safari移动端内嵌H5页面进行调试。在Devices页面，你应该能看到你的iOS设备，并且列出了设备上所有可以调试的Web页面。需要注意的是，由于iOS设备的限制，某些功能可能无法在调试时正常使用，如摄像头、麦克风等。

精选资源

小程序内嵌H5——判断小程序环境的坑

03-29

最后和产品商量之后的决定是：小程序中特有的营销推广的页面，用小程序编写，剩下的黄金流程，内嵌H5解决。听起来好像很简单，but，没有想象中那么简单。判断是否在小程序中这个问题，网上一搜，答案很多，有说用...

api调用查询工具api spy api调用查询工具api spy

04-01

api调用查询工具api spapi api调用查询工具api spy调用查询工具api spyy

android app内嵌h5页面,app内嵌h5页面：前端与原生语言的配合

weixin_42314846的博客

05-27

1777

判断操作系统：var u = navigator.userAgent,app = navigator.appVersion;var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //gvar isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //i...

H5调试工具 - weinre远程调试工具

weixin_30367169的博客

03-27

282

weinre 简介 weinre 是一款类似于firebug 和Web Inspector的网页调试工具，它的不同之处在于可以用于进行远程调试，比如调试手机上面的网页。安装 weinre(运行在node环境上) npm -g install weinre 启动 Weinre 服务 weinre -boundHost 172.19.200.16 常用参数 --httpPort 调试服务器端口...

PageSpy 的简单使用

呆呆狗

01-31

1272

PageSpy 是一款用来`调试远程` Web 项目的工具。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。

【亲测免费】 Page Spy：远程调试的革命性工具

gitblog_00001的博客

06-12

595

**技术支持**：扫码加入微信支持群，获取更多帮助。

H5移动端问题远程调试方法

jiahaoangle的博客

01-30

1308

weinre+ngrok weinre实现远程代理，微信端用到https的需要ngrok代理 weinre使用比较简单，首先用npm安装weinre: npm install -g weinre 启动服务监听端口： weinre --boundHost 10.75.6.51 --httpPort 9999 浏览器打开服务地址： 10.75.6.51:9999 we...

PageSpy 项目使用教程

gitblog_01106的博客

08-08

577

PageSpy 项目的目录结构如下： ``` page-spy-web/ ├── README.md ├── package.json ├── src/ │ ├── index.js │ ├── config/ │ │ ├── default.json │ │ ├── production.json │ └── ... ├── public/ │ ├── inde...

探秘网页调试新境界：Page Spy SDKs

gitblog_00010的博客

06-22

450

探秘网页调试新境界：Page Spy SDKs 在现代Web开发的世界中，远程调试工具的重要性不言而喻，它们帮助开发者在复杂多变的环境中定位问题，提升效率。今天，我们要向您推荐一款名为Page Spy的强大远程调试工具，它以其创新的功能和易于使用的SDK，为您的网页调试体验带来革命性的改变。项目介绍 Page Spy是由HuolalaTech开发的一款远程调试神器，其核心在于一系列SDK，能够无...

vivo手机怎么在手机端调试H5页面

最新发布

11-26

<think> 我们正在处理用户的问题：如何在vivo手机上调试H5页面？根据引用内容，我们得知：引用[2]提到在H5中可以通过navigator.userAgent来获取设备信息，包括vivo手机。引用[3]提到在部分安卓机型（包括vivo）上，内嵌H5页面调用公共JS文件中的方法可能会遇到问题，这暗示了调试的必要性。在移动端调试H5页面，通常有以下几种方法： 1. 使用Chrome远程调试（需要USB连接手机和电脑，且手机开启USB调试模式） 2. 使用第三方工具如vConsole、eruda等（直接在页面中引入，无需连接电脑） 3. 使用浏览器自带的开发者工具（如vivo手机自带的浏览器可能也有开发者工具）由于用户指定了vivo手机，我们重点考虑vivo手机上的调试方法。方法一：使用Chrome远程调试（推荐，功能强大）步骤： 1. 在电脑上安装Chrome浏览器。 2. 在vivo手机上打开USB调试模式：设置->系统管理->关于手机->版本信息（连续点击版本号7次进入开发者模式）->返回系统管理->开发者选项->开启USB调试。 3. 用USB线连接手机和电脑，并在手机上允许USB调试。 4. 在电脑上打开Chrome，输入chrome://inspect，在Devices列表中会显示你的手机，下面会列出手机中打开的网页（需要是Chrome或Android WebView），点击inspect即可打开开发者工具进行调试。方法二：使用vConsole（适合移动端页面内调试）这是一个轻量级的调试面板，类似于微信小程序的调试面板。使用方法： 1. 在页面中引入vConsole的js文件（可以从CDN获取或下载到本地）。 2. 在页面底部初始化vConsole。示例代码： ```html <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script> <script> var vConsole = new VConsole(); </script> ``` 这样页面右下角会出现一个绿色按钮，点击打开调试面板，可以查看日志、网络请求、元素等。方法三：使用vivo手机自带浏览器调试 1. 在vivo手机上打开自带浏览器。 2. 打开需要调试的H5页面。 3. 在浏览器设置中，一般会有“开发者工具”或“调试”选项，具体位置可能因浏览器版本而异。 4. 但需要注意的是，自带浏览器的开发者工具可能功能有限。注意：引用[3]提到在部分vivo手机上（尤其是使用较久的手机）可能会出现调用公共JS方法失败的情况，这可能是因为缓存或兼容性问题。在调试时，可以注意清理缓存或检查JS文件的加载顺序。另外，引用[4]提到了在安卓8.0以上使用DeviceOrientation事件模拟摇一摇，这提醒我们在调试时可能需要模拟设备方向等特殊事件。在Chrome远程调试工具中，可以模拟设备方向、地理位置等。综上所述，推荐使用Chrome远程调试或vConsole。考虑到用户可能没有电脑在身边，那么使用vConsole是更便捷的方式。因此，我们给出两种方法的详细步骤，并说明各自的优缺点。生成相关问题： 1. 如何在其他安卓手机上调试H5页面？ 2. 使用vConsole时，如何查看网络请求？ 3. 在vivo手机上，如何开启开发者选项？注意：引用标记。我们在回答中引用了站内引用，所以在末尾需要添加引用标识。 </think> 在vivo手机上调试H5页面，主要有以下三种常用方法： ### 🛠️ 方法一：Chrome远程调试（推荐） 1. **开启USB调试**： - 进入手机「设置 > 系统管理 > 关于手机」连续点击版本号7次开启开发者模式 - 返回「系统管理 > 开发者选项 > 开启USB调试」 2. **连接电脑**： - 用USB线连接vivo手机和电脑 - 在手机弹窗中选择「传输文件」模式 3. **电脑端操作**： - 电脑打开Chrome浏览器访问 `chrome://inspect` - 勾选 **Discover USB devices** 选项 - 在**Devices**列表中找到你的H5页面点击 **inspect** ```mermaid graph LR A[开启USB调试] --> B[USB连接电脑] B --> C[chrome://inspect] C --> D[实时调试] ``` ### 📱 方法二：使用vConsole（无需电脑） 1. 在H5页面中引入vConsole库： ```html <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.15.1/vconsole.min.js"></script> <script> new VConsole(); </script> ``` 2. 页面右下角会出现绿色调试按钮，点击可查看： - 控制台日志（console.log） - 网络请求详情 - 本地存储数据 - 设备信息（含userAgent） ### 🌐 方法三：vivo浏览器开发者工具 1. 在vivo自带浏览器打开H5页面 2. 地址栏输入 `debugx5.qq.com` 3. 开启 **TBS内核调试功能** 4. 通过 **Inspector调试** 进入调试界面 ### ⚠️ 调试注意事项 1. **userAgent识别**（引用[2]）： ```javascript // 判断vivo机型 if (/vivo/i.test(navigator.userAgent)) { console.log("当前设备：vivo"); } ``` 2. **兼容性问题**（引用[3]）： - 旧款vivo手机可能出现JS加载异常 - 建议清除浏览器缓存或使用远程调试 3. **新API支持**（引用[4]）： - 涉及陀螺仪等硬件功能时需注意安卓版本兼容性 - 推荐使用特性检测代替版本判断 --- ### 📚 相关问题 1. 如何在华为手机上调试H5页面？ 2. 移动端H5调试有哪些常用工具？ 3. 如何解决安卓8.0以上系统的H5兼容性问题？[^4] 4. userAgent可以获取哪些设备信息？[^1][^2] [^1]: 获取手机型号信息的方法 [^2]: JS识别vivo设备的代码实现 [^3]: 旧款安卓机JS加载异常问题 [^4]: 安卓高版本系统兼容性