Code Monkey home page Code Monkey logo

page-spy-web's People

Contributors

blackberry009 avatar cloverstd avatar eltociear avatar eve-sama avatar huangji97 avatar kyun avatar notfound945 avatar qkang07 avatar wangdashuaihenshuai avatar wqcstrong avatar ziyoung avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

page-spy-web's Issues

建议房间列表增加账号密码登录功能

Description

大部分的bug可能是线上运行时发生的,为了能偷偷调试用户页面, 建议增加隐藏页面上悬浮的图标的配置。另外为了防止信息泄露,房间列表增加账号密码登录功能

Suggested solution

增加账号管理及权限

Alternative

No response

Additional context

No response

Validations

监控细粒度优化

Description

目前监控系统包含了以下内容

图片

这些内容无法部分关闭, 但是在生产交付时, 并不是所有用户都愿意暴露这些数据, 可能有些不在意输出, 但是在意网络, 或者只在意缓存, 希望这些可以由开发者配置.

Suggested solution

不止是提供初始化开启或者关闭这些功能, 还需要在运行时配置这些东西的开启或者关闭.

Alternative

No response

Additional context

No response

Validations

无房间数据

docker 运行服务后,按“接入SDK”指引操作后,没有查询到房间数据?

Snipaste_2023-05-25_09-23-11

html 代码如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <script crossorgin="anonymous" src="http://10.88.122.4:6752/page-spy/index.min.js"></script>
        <script>
            new PageSpy()
        </script>
    </head>
    <body>
        <div id="app"></div>
        <script type="module" src="/src/main.ts"></script>
    </body>
</html>

SDK中 protocol 的判断逻辑

我这里服务端的协议是https
但是SDK在http
希望SDK配置api的时候可以同时设定protocol,而不是直接从document.currentScript?.baseURI拿

PageSpy icon invalid on click (cannot reappear stably)

Describe the bug

2023-12-05.15.06.13.mov

Steps to reproduce

No response

System Info

System:
    OS: macOS 12.7.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 268.21 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm

Logs

No response

Validations

二维码过期

建议置顶一个 issue 在里面更新二维码(issue 支持编辑),避免需要改代码

uniapp h5项目页面显示Please enable JavaScript to continue.

Describe the bug

刚试了一个uniapp项目,在房间页面网页顶部显示 Please enable JavaScript to continue.

Steps to reproduce

No response

System Info

win10 本机 chrome最新版

Logs

No response

Validations

交互优化

Description

图片

这里点copy以后, 会通过alert提示
图片

alert是同步进程, 且需要手动去点确认. 其实是没必要的. 因为这里提示的目标只是通知, 而不是一个需要反馈的内容. 现在是增加了交互负担.

Suggested solution

https://github.com/HuolalaTech/page-spy/blob/main/src/component/content.ts#L61

我看了sdk源码, 作为sdk的目的, 并没有引入任何 ui lib. 所以也只能是 alert. 那么能否修改个交互? 比如点击copy, 只是在copy旁边显示下复制成功即可?

Alternative

No response

Additional context

No response

Validations

Unsupport URL capacitor://localhost

Describe the bug

Unsupport URL capacitor://localhost, web app running on capacitorjs

image

Steps to reproduce

No response

System Info

System: iPhone/17.1.1
Browser: Unknown/Unknown
User Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148
Page Spy: 1.4.2

Logs

No response

Validations

Add some common options for the `page-spy-api` command

Description

I just want to display the version of the page-spy-api tool, but running page-spy-api --version starts the PageSpy server directly.

Suggested solution

In general, command-line tools commonly provide the following options:

  • --version
  • --help

Alternative

No response

Additional context

No response

Validations

form表单已经填写的值无法在“页面”功能中显示

Describe the bug

我的HTML5项目
"vant": "^3.5.2",
"vue": "^3.2.31",
"vite": "^2.9.10",

当我在表单填写完内容后,在页面刷新视图,并不会看到表单内容;
Picker组件的弹出内容可以正常显示

Steps to reproduce

No response

System Info

浏览器: Chrome
版本: 95.0.4638.50

Logs

No response

Validations

PageSpy使用过程中偶尔会出现websocket大量调用

Describe the bug

截屏2023-12-14 10 49 16 使用过程中偶尔会出现websocket大量调用的现象, 暂时未找到触发的原因

Steps to reproduce

No response

System Info

Chrome 120.0.6099.109(正式版本) (x86_64)

Logs

No response

Validations

项目中 classnames 包存在幽灵依赖问题

项目中 devtools 相关页面存在classnames包的引用,但这个包并不在package.json中声明,取而代之的是clsx,推测可能是由于之前从classnames包迁移到了clsx包而遗留的问题。

feature: 是否可以增加额外的一个自定义参数用于查找用户

当前是使用类似于uniqId的前四位来定位一个用户,实际上这个定位参数对用户可能没有意义。能否在初始化时增加一个自定义参数,比如extraId, 开发者可以填userId,email, username之类。这样当用户反馈时,我们只需要向用户提供账号信息我们就可以直连用户端。

目前产品中,想小范围的把这个插件放到线上产品作为用户侧跟踪问题的渠道,由用户通过按钮等入口主动操作。

谢谢,这个项目功能很牛

localStorage 面板看不到任何信息

Describe the bug

本地部署,接入sdk后,进入调试房间,看不到预期的Local Storage信息

Steps to reproduce

  1. npm install -g @huolala-tech/page-spy-api
  2. 执行page-spy-api
  3. 创建一个index.html文件,代码如下
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      crossorigin="anonymous"
      src="http://localhost:6752/page-spy/index.min.js"
    ></script>
  </head>
  <body>
    hello world
    <script type="module">
      window.$pageSpy = new PageSpy();
      window.localStorage.setItem("key", "hello world");
    </script>
  </body>
</html>
  1. 启动本地服务器,访问http://{ip}:{port}/index.html页面
  2. 进入调试房间,发现存储面板看不到任何信息

System Info

Device ID: 7d22

System: Mac/10.15.7

Browser: Chrome/120.0.0.0

Project: default

Logs

Click to expand!
⇨ http server started on [::]:6752
INFO[0000] | 200 |    2.415544ms |             ::1 | GET | /api/v1/ws/room/join?address=78a62594-c18c-4927-95d9-e02057ec4687.local&name=client%3A3u2pewxu8c7&userId=Client | -  _module=middleware _request_id=be9018ed-a0b2-4d9e-873f-992aa46a9616
INFO[0002] | 200 |      1.0725ms |             ::1 | GET | /api/v1/ws/room/join?address=78a62594-c18c-4927-95d9-e02057ec4687.local&userId=Debugger | -  _module=middleware _request_id=22426541-4a1c-4fd6-a7d8-e1b55adceb56
INFO[0004] | 200 |     716.342µs |             ::1 | GET | /api/v1/ws/room/join?address=78a62594-c18c-4927-95d9-e02057ec4687.local&userId=Debugger | -  _module=middleware _request_id=e7b2af68-3476-47ee-b469-63f208c0fd74
INFO[0009] 创建local房间                                     room=85d7e486-35d4-4718-89e3-fcf922592525.local
INFO[0009] start 房间                                      room=85d7e486-35d4-4718-89e3-fcf922592525.local
INFO[0009] create group default room                     module=join
INFO[0009] | 200 |     527.058µs |             ::1 | POST | /api/v1/room/create?name=Mac%2F10.15.7+Chrome%2F120.0.0.0&group=default&title= | -  _module=middleware _request_id=bc8d69c9-7666-4e63-a80b-3a8ef47d92a4
INFO[0009] 创建remote房间 85d7e486-35d4-4718-89e3-fcf922592525.local  local_room=85d7e486-35d4-4718-89e3-fcf922592525.local remote_room=043df95d-3041-45d2-97f3-454eb215b831.local
INFO[0009] start remote房间 85d7e486-35d4-4718-89e3-fcf922592525.local  local_room=85d7e486-35d4-4718-89e3-fcf922592525.local remote_room=043df95d-3041-45d2-97f3-454eb215b831.local
INFO[0009] connection 043df95d-3041-45d2-97f3-454eb215b831.local join 房间  room=85d7e486-35d4-4718-89e3-fcf922592525.local
INFO[0012] | 200 |    4.239356ms |             ::1 | GET | /devtools?version=Mac/10.15.7%20Chrome/120.0.0.0&address=78a62594-c18c-4927-95d9-e02057ec4687.local | -  _module=middleware _request_id=8d05143c-7e9b-4244-ab4f-58359cc3a385
INFO[0012] | 200 |     979.847µs |             ::1 | GET | /api/v1/ws/room/join?address=78a62594-c18c-4927-95d9-e02057ec4687.local&userId=Debugger | -  _module=middleware _request_id=5798554c-28b3-407d-8117-7a322be7eec3
INFO[0018] | 200 |     701.274µs |             ::1 | GET | /api/v1/room/list | -  _module=middleware _request_id=5e1213df-bebc-4e3f-ba17-13a1461346a0
INFO[0019] | 200 |      86.105µs |             ::1 | GET | /room-list | -  _module=middleware _request_id=9a818ae7-eb87-41f2-a862-4624d4bd8ccb
INFO[0019] | 200 |     541.821µs |             ::1 | GET | /api/v1/room/list | -  _module=middleware _request_id=6322a43d-3959-4f02-99ff-aecf1b056f7a
INFO[0020] | 200 |     103.775µs |             ::1 | GET | /devtools?version=Mac/10.15.7%20Chrome/120.0.0.0&address=85d7e486-35d4-4718-89e3-fcf922592525.local | -  _module=middleware _request_id=a31b34e1-ce1d-4ab6-95b7-42b7c1888aea
INFO[0021] 创建remote房间 85d7e486-35d4-4718-89e3-fcf922592525.local  local_room=85d7e486-35d4-4718-89e3-fcf922592525.local remote_room=efa23595-2395-48d7-a557-6f02a67c6114.local
INFO[0021] start remote房间 85d7e486-35d4-4718-89e3-fcf922592525.local  local_room=85d7e486-35d4-4718-89e3-fcf922592525.local remote_room=efa23595-2395-48d7-a557-6f02a67c6114.local
INFO[0021] connection efa23595-2395-48d7-a557-6f02a67c6114.local join 房间  room=85d7e486-35d4-4718-89e3-fcf922592525.local

Validations

支持多实例负载均衡的场景

Description

目前通过docker镜像+阿里云slb负载的方式部署,如果slb有负载多个容器实例,那么用户连接到room后,运维人员通过slb访问room list,有很大的概率是找不到这个用户的,应该是backend没有针对多实例负载均衡的场景进行设计。

Suggested solution

能够支持多实例负载均衡的场景

Alternative

No response

Additional context

No response

Validations

本地起的服务是http的,配置哪里能不能改https

Description

[Node 部署]
运行page-spy-api,起来的本地服务是http的,能通过配置改成https吗

Suggested solution

能通过配置改成https吗

Alternative

No response

Additional context

No response

Validations

在Taro项目中图片路径404时会出现 TypeError: Cannot read properties of undefined (reading 'message') 的错误

Describe the bug

Taro项目中图片路径404时会出现 TypeError: Cannot read properties of undefined (reading 'message')

最小复现项目

Steps to reproduce

  1. 使用@tarojs/cli创建项目
  2. 在项目入口文件中接入 SDK
  3. 在页面上使用一个 @tarojs/components<Image /> 组件,填入一个不存在的图片路径(使图片请求报错)
  4. 观察控制台出现的错误

System Info

taro: 3.6.20
system: window10 22H2
browser: Microsoft Edge 版本 120.0.2210.77 (正式版本) (64 位)

Logs

Click to expand!
// paste the log text here
index.min.js:1  Uncaught TypeError: Cannot read properties of undefined (reading 'message')
    at index.min.js:1:84012
    at emitEvent (vendors-node_modules_taro_h5_prebundle_chunk-4WTM3NLC_js._chunkhash_.js:7607:9)
    at Object.emit (vendors-node_modules_taro_h5_prebundle_chunk-4WTM3NLC_js._chunkhash_.js:7596:20)
    at push../node_modules/.taro/h5/prebundle/chunk-4WTM3NLC.js.proxyCustomElement.src.imageOnError (vendors-node_modules_taro_h5_prebundle_chunk-4WTM3NLC_js._chunkhash_.js:23010:22)

Validations

新建房间,点击提交无反应,走的是房间列表接口

Describe the bug

新建房间,点击提交无反应,走的是房间列表接口

Steps to reproduce

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

page-spy-api

点击房间列表-新建房间,选择浏览器等,点击提交按钮,没反应

System Info

mac 谷歌浏览器

Logs

控制台无报错

Validations

🐞 FAQ

Wiki 中收录了社区中反馈的常见问题,请各位小伙伴自行前往查看。

The Wiki contains common issues reported by the community. Please check it.

如果没有解决你的问题,欢迎提交 Issue,我们将在第一时间给予回复。

If your problem is not resolved, feel free to submit an issue, and we will respond promptly.

"页面"这个模块里展示的页面是真机呈现出来的样式吗?

Description

"页面"这个模块里展示的页面是真机呈现出来的样式吗?因为移动端有很多要兼容,不同设备上,样式会有差别,所以这个样式很重要,如果我调试了一个真机上的页面,但是呈现的元素和真机不一样,那样式这块就没有参考意义了。

Suggested solution

Alternative

No response

Additional context

No response

Validations

Duplicated error messages.

Describe the bug

Duplicated error messages.

image

Steps to reproduce

No response

System Info

System:
    OS: macOS 12.7.1
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
    Memory: 1.39 GB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.16.1 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm

Logs

No response

Validations

加入房间失败添加重试时间

Describe the bug

image
加入房间失败会没有间隔无限重试。
如果后端出现抖动,可能导致一直打挂。
可以添加失败重试间隔,500ms 1s 2s 4s 这样,每次失败都是前面时间翻倍。

Steps to reproduce

No response

System Info

-

Logs

No response

Validations

👨🏻‍💻 PageSpy Users

🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟

PageSpy 感谢大家的支持 ❤️

🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟 🌟

image

如果您和您的公司或组织使用了 PageSpy ,非常感谢您的支持,欢迎留下公司名,您的回复将成为维护者、社区用户和观望者的信心来源。无关回复将会定期删除。

推荐回复格式:

- 公司或组织:(如果可以)
- 使用心得:

We appreciate you support if you or your organization is using PageSpy. You are welcome to leave replies about your organization here, which could became the confidence of maintiners, communication and undecided watchers.

Recommended reply format:

- Company or Organization: (if any)
- Usage Experience:

JS-SDK

麻烦删除下 已找到解决办法了。

console打印错误

Describe the bug

PageSpy的输出控制台的console不能打印带样式的

Steps to reproduce

console.log(
%cSYSTEM LOG,
"999999999999999999999999",
@Hybrid: env = ,
env
);

System Info

System:
iPhone/13.2.3
Browser:
Safari/13.0.3
User Agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1

Logs

No response

Validations

增加debug级别日志的输出

Description

可以考虑增加debug级别日志捕捉吗

Suggested solution

我通常使用debug来打印日志,所以迫切需要想支持下这个

Alternative

或者是考虑下日志级别筛选,包括debug级别的

Additional context

No response

Validations

建议支持一键部署到Vercel

Description

我在Vercel部署这个项目page-spy,由于page-spy-api是一个独立的后台服务,我尝试了一些方式在Vercel的启动时加入yarn start:server,但我的Vercel或者page-spy-web中的配置似乎总是错误的,页面调用接口的结果是404
page-spy在这个issue关闭前会被保留。

Suggested solution

你们的团队是否有时间添加一键部署到Vercel(可能只需要几行代码),这个扩展可能有助于page-spy-web的快速传播和应用。

谢谢!

Alternative

No response

Additional context

No response

Validations

希望增加主动断线重连机制

Description

目前app端的webview内使用,实测无论是安卓还是ios,App切到后台30s后,调试端就断连了,即使此时App切回前台也无法继续调试,而因为sdk不允许重复初始化,只能刷新整个页面。因为没有断连监控,即使想主动刷新也不好做。

Suggested solution

希望能在客户端提供断连时的监控回调以及主动重连方法,使得在上述异常状态下客户端能够自行恢复调试

Alternative

No response

Additional context

No response

Validations

Browser: Unknown/Unknown

Describe the bug

使用ios手机 支付宝/钉钉 进入应用均显示 Browser: Unknown/Unknown 无法获取当前手机的浏览器种类以及版本

Steps to reproduce

No response

System Info

iPhone/16.1.2
Browser:
Unknown/Unknown

Logs

No response

Validations

集成后房间列表为空

Describe the bug

vue-class-component 项目中的 index.html 文件中新增以下配置,

<script crossorigin="anonymous" src="http://127.0.0.1:6752/page-spy/index.min.js"></script>
<script>
      window.$pageSpy = new PageSpy();
</script>

但是当在本地使用 page-spy-api 启动后,在 http://127.0.0.1:6752/room-list 中房间列表为空

项目中查看正常引入index.min.js 文件
image

房间列表如下:
image

Steps to reproduce

No response

System Info

电脑系统:macOS 13.0.1
浏览器版本:Opera 105.0.4970.21

Logs

page-spy-api 控制台并没有报错,正常请求 /api/v1/room/list,日志如下:

INFO[0299] | 200 |     772.501µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=ab2ea807-fe87-491f-9c76-a33a4660ffe5
INFO[0304] | 200 |     611.851µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=5259308d-8b2a-45fa-ac6f-f96d9726e15b
INFO[0309] | 200 |     425.739µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=17647d31-cc90-49ba-9c2a-6df452cb58de
INFO[0314] | 200 |      385.25µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=5bd0fdb9-0366-424f-8210-d2b0f682da71
INFO[0319] | 200 |      605.52µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=24cd2a80-fffd-44f2-b0a8-0a3f5a6562b7
INFO[0324] | 200 |    5.870929ms |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=b1f59753-7f1a-410a-9455-07df89f81c96
INFO[0329] | 200 |     615.302µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=ec3149b6-b946-4f6a-9f67-6058fc52ac5f
INFO[0334] | 200 |     640.223µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=adfebe69-9926-4299-93ae-0567838b907c
INFO[0339] | 200 |     640.333µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=2621dcaf-480d-4dc6-a350-44adb71ca691
INFO[0344] | 200 |     468.144µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=4eedaec7-aac5-47a9-8204-abca7900b074
INFO[0349] | 200 |     615.904µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=9e31b0e2-bd7a-4174-ba54-306bbb542e3f
INFO[0354] | 200 |     563.644µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=563f68a3-58d1-412c-a66b-fe494dad06e9
INFO[0359] | 200 |      569.87µs |       127.0.0.1 | GET | /api/v1/room/list | -  _module=middleware _request_id=b88a22c7-5096-4863-acfa-89ce7ca304a5

Validations

Auto scrolling

Description

when it comes a new message, the scroll doesn't move.

Suggested solution

add a button to toggle auto scrolling

Alternative

No response

Additional context

No response

Validations

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.