首页 > 其他分享 >page-spy-web 一个方便的web 远程调试工具

page-spy-web 一个方便的web 远程调试工具

时间:2023-12-26 14:38:09浏览次数:27  
标签:web remote spy app page 远程

page-spy-web 一个方便的web 远程调试工具,可以实现像chrome 一样debug 远程web,同时也提供了比较专业的web 管理

运行

  • docker-compose
version: "3"
services:
  app:
    image: ghcr.io/huolalatech/page-spy-web:release
    ports:
      - "6752:6752"

web 集成使用

  • index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo app</title>
    <script crossorigin="anonymous" src="http://localhost:6752/page-spy/index.min.js"></script>
</head>
<body>
 
    <button onclick='console.log("this is a demo")'>
       click
    </button>
    <script >
         window.$pageSpy = new PageSpy();
    </script>
 
</body>
</html>
<html lang="en">
  • server 效果

page-spy-web 一个方便的web 远程调试工具_参考资料

查看remote web 信息

page-spy-web 一个方便的web 远程调试工具_参考资料_02

说明

对于需要remote debug 的场景,remote 是一个不错的选择,对于h5 的开发,vConsole 是一个很不错的工具,但是缺少remote 能力,page-spy-web 是一个不错的选择

参考资料

https://github.com/HuolalaTech/page-spy-web
https://github.com/Tencent/vConsole

标签:web,remote,spy,app,page,远程
From: https://blog.51cto.com/rongfengliang/8983232

相关文章

  • 使用代码生成工具快速开发应用-结合后端Web API提供接口和前端页面快速生成,实现通用的
    在前面随笔《在Winform应用中增加通用的业务编码规则生成》,我介绍了基于Winform和WPF的一个通用的业务编码规则的管理功能,本篇随笔介绍基于后端WebAPI接口,实现快速的Vue3+ElementPlus前端界面的开发整合,同样是基于代码生成工具实现快速的前端代码的生成处理。1、通用的业务编码规......
  • 图扑 Web 组态软件在污水处理系统中的应用
    随着我国对环境保护的日益重视,对环保要求的不断严格,污水处理这一环保项目也越来越被重视。污水处理是使污水达到排入某一水体或再次使用的水质要求对其进行净化的过程。污水处理被广泛应用于建筑、农业、交通、能源、石化、环保、城市景观、医疗、餐饮等各个领域,因此污水处理控制系......
  • #星计划#浅谈ArkUI之Web组件的基础用法
    最近研究了ArkUI中的一些常用组件,其中Web组件是很常用且相对独立的一种组件。本文总结了Web组件的常用函数,以及基本用法。先来一个AI画的Web组件助助兴(好吧,不能说毫无关系,只能说一点也不像):在ArkUI中,Web组件用于显示Web网页,可以理解为一个嵌入式的小型浏览器,用于展示Web内容,实现We......
  • 静态HTTP与HTTP/2:提升Web性能的新途径
    你是否曾经遇到过这样的场景:你迫不及待地点击一个链接,然后开始等待,等待,再等待。这种等待的痛苦,我们称之为“Web慢病”。幸运的是,随着技术的进步,我们有了一种新的“药物”来治疗这种病症——HTTP/2。让我们先回顾一下“Web慢病”的病因。其实,大部分的锅要由HTTP协议来背。作为Web的......
  • JavaWeb - Day11 - 案例 - 员工管理、文件上传、修改员工、配置文件
    01.案例-员工管理-新增员工前面我们已经实现了员工信息的条件分页查询以及删除操作。关于员工管理的功能,还有两个需要实现:新增员工修改员工首先我们先完成"新增员工"的功能开发,再完成"修改员工"的功能开发。而在"新增员工"中,需要添加头像,而头像需要用到"文件上传"技......
  • PageHelper使用案例
    1@Override2publicCommonResultqueryReportByCallCountInfos(ReportByCallVoreportByCallVo){3PageHelper.startPage(reportByCallVo.getPageNum(),reportByCallVo.getPageSize());4List<ReportByCallVo>list=sysUsageStati......
  • 【SpringBootWeb入门-18】案例-准备工作
    1、案例前言在前面的章节中,我们学习完了后端springbootweb开发的基础知识、MySQL数据库以及Mybatis框架,接下来我们来完成一个Web开发的综合案例,通过这个案例我们学习到前端程序、后端程序以及数据库之间是如何交互协作的,同时通过这个案例我们也学习到根据接口文档、开发服务端接......
  • webpack(概念)
    入口(entry)入口起点(entrypoint)指示webpack打包起点。构建依赖图(dependencygraph)的开始。默认值是 ./src/index.js。可以配置,如下:webpack.config.jsmodule.exports={entry:'./path/to/my/entry/file.js',};输出(output)output告诉webpack在哪里输出它所创建的 bu......
  • Spring 框架模块深度解析:核心容器、数据访问、Web 层与其他关键模块
    Spring可能成为您的所有企业应用程序的一站式商店。但是,Spring是模块化的,允许您挑选适用于您的模块,而无需引入其他模块。下面的部分提供了SpringFramework中所有可用模块的详细信息。SpringFramework提供了大约20个模块,可以根据应用程序要求使用。核心容器核心容器由C......
  • postman web版使用
    前言:下游需要接口是post,无法直接用get在浏览器中预览,所以选择在postman中预览调试。 一、找到下载客户端或web版入口首先访问:https://www.postman.com/downloads/ 二、访问web版(登录+安装插件)https://identity.getpostman.com/signup?continue=https%3A%2F%2Fgo.postman.......