Chrome 扩展 H5 游戏结构检查器 GameInspect 支持 Laya, egret, cocosCreate, cocos2d-js-程序员宅基地

技术标签： chrome  Laya  Egert  游戏  javascript  

Chrome 扩展 H5 游戏结构检查器 GameInspect 支持 Laya, egret, cocosCreate, cocos2d-js

1. 说明

仿照 egret Inspect 制作的通用H5游戏列表查看器， 方便查看游戏结构， 修改属性，注入代码，查看shader,抓帧
GitHub(部分代码)
总览

2.安装

部分浏览器安装失败，可能是因为浏览器版本太低，升级浏览器版本

2.1 下载到本地 git clone https://github.com/chengyoujie/GameInspect.git 或 https://github.com/chengyoujie/GameInspect/releases/download/release/dist.rar

2.2 打开 chrome://extensions/

2.3 打开右上角的开发者模式开关

打开开发者模式

2.4 点击左上角的加载已解压的扩展程序

在这里插入图片描述

选择dist目录
在这里插入图片描述

点击选择文件夹即可， 安装成功后如下图：

安装成功后图片

3. 使用说明

打开H5游戏, F12打开控制台面板， 选择控制台的GameInspect页签，

顶部展示游戏信息， 控制FPS的显示，

中间左侧展示游戏内的节点列表， 选择节点右键弹出节点的操作菜单， 点击节点的+号可以展开节点

中间右侧展示当前选中节点的属性信息， 双击属性后面的值可以修改属性

GameInspect

4. 自定义扩展

本插件现已支持常用的 Egret, Laya, CocosCreate, Cocos2dx-js,Pixi 其中 Cocos2dx-js, Pixi支持不太全。也可以将其他引擎的实现或现有引擎的优化发送到[email protected]邮箱或者提交到Github中

如不能满足需求或者使用其他引擎，可以在游戏中实现 （具体参考 src/inspector/IUserCostomEngine.ts 和 src/inspector/IEngineInfo.ts）

declare interface window{
    
    /**
     * 返回用户自定义引擎信息的函数
     */
    getGameInspectUserCostomEngine?():IUserCostomEngine;
}

5.注入代码

注入代码

可以把自己的代码注入到指定网站

用户可以将自己的代码注入到指定的网站

最多可以注入5M左右

匹配规则说明：

执行一次：主要通过执行按钮执行， 不会匹配到任何网站
当前网址：下次进入与当前浏览器地址栏的地址相同时自动执行
游戏地址：引擎加载完毕后，找到含有引擎的iframe的地址，下次进入是如果匹配到对应的地址则执行代码
自 定 义：用户自己定义匹配规则，return true 表示匹配成功， return false 表示匹配失败

操作说明：

  1. 新建 新建一个脚本
  2. 保存 快捷键(ctr+s)将代码保存到chrome扩展的缓存中注： 如果删除插件则保存的代码也会被删掉， 所以最好下载到本地
  3. 删除 删除已保存的代码
  4. 下载 将保存的代码保存到本地
  5. 导入 将本地的代码导入到chrome扩展中

6. 修改记录查看

修改记录查看

方便记录在属性面板修改的内容

  1. 点击记录修改按钮开始记录要修改的内容,再次点击停止记录。
  2. 在属性界面修改属性， 如果清除记录列表中某个节点的属性可以在左侧节点上右键选择取消修改记录。
  3. 点击查看修改可以查看修改的内容。
  4. 点击清除记录， 将之前的修改记录全部清除掉。
  5. 如果要自定义记录格式，可以实现下面的方法
export interface IUserCostomEngine {
    
	....
	/**
	 * 获取单条修改对应的内容
	 * @param findNode  节点obj对象
	 * @param propPath 属性路径 如 x   parent.x
	 * @param newValue 修改后的新值
	 */
	getRecoderStr?(findNode:any, propPath:string, newValue:any):string
}

7. 游戏控制(暂停，抓帧，查看修改Shader, 性能数据）

入口： 顶部右上角游戏控制入口
GameControl界面
性能数据
游戏控制器

【显示基准线】：鼠标移动时 是否显示FPS, DrawCall, FrameLine鼠标所在x轴上的信息

【显示帧抓取视图】： 方便查看某一帧的渲染顺序 及 渲染时的顶点着色器和片元着色器代码

【上一帧】：跳转到当前帧的前一帧

【下一帧】：跳转到当前帧的前一帧

【重新抓取】：重新抓取当前帧的渲染顺序

【显示大图】：在游戏内显示高清的渲染图

【暂停】： 暂停游戏

【下一帧】： 暂停游戏，并播放下一帧

【显示Shader】： 显示/隐藏 当前页面的所有shader， 如果显示不全或者没有找到可以尝试点击【刷新游戏】按钮

【执行Shader】： 将当前编辑器内的shader编译后在游戏内运行

【刷新游戏】： 重新刷新游戏， 并优先注入重载的方法

FPS： 每秒多少帧

DrawCall： 每秒向GPU提交多少次绘制

FrameTime： 每帧执行的时间
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jie1137815160/article/details/128051381

智能推荐

软件实施流程（八大阶段）——软件实施工程师_软件实施指导-程序员宅基地

文章浏览阅读3.8k次。软件实施工程师软件实施工程师的工作是软件产品服务主线的一个决定性环节，软件的成功离不开实施。主要负责工程实施： 包括常用操作系统、应用软件及公司所开发的软件安装、调试、维护，还有少部分硬件、网络的工作；负责现场培训： 现场软件应用培训；协助项目验收；负责需求的初步确认；把控项目进度；与客户沟通个性化需求；负责项目维护。软件产品。_软件实施指导

KlayGE 4.0中Deferred Rendering的改进（四）：GI的神话-程序员宅基地

文章浏览阅读59次。转载请注明出处为KlayGE游戏引擎上一篇解决了透明物体的渲染问题；本文将挑战另一个实时渲染的神话，实时全局光照（GI）。实时全动态GI目前direct lighting在游戏中日趋成熟，比较前卫的游戏引擎已经不满足于diect lighting的效果了，逐渐开始尝试indirect lighting。早期的方法有通过离线渲染light map来实现静态场景、静态光源的GI。接着出现...

初识Git_git必须用网络吗-程序员宅基地

文章浏览阅读433次。Git 是一个开源的分布式版本控制系统，用于敏捷高效地处理任何或小或大的项目。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。Git 与常用的版本控制工具 CVS, Subversion 等不同，它采用了分布式版本库的方式，不必服务器端软件支持。简言概括：Git就是分布式版本控制。_git必须用网络吗

搭建Vulhub靶场 【附图】_vulhub靶场搭建-程序员宅基地

文章浏览阅读2.1w次，点赞59次，收藏265次。目录0x01简单概述0x02安装环境1. kali设置2. 更新软件源中的所有软件列表3. 安装https协议及CA证书0x03安装步骤一、安装Docker1. 下载安装2. 查看Docker是否安装成功3. 查看docker基本信息二、安装vluhub1. 安装pip32. 安装Docker-Compose3. 查看docker-compose版本三、安装vulhub靶场1. 克隆下载2. 随便进入一个靶场环境目录3. 对靶场进行编译4. 运行此靶场5. 查看启动环境6. 通过浏览器访问7. 关闭此靶场环_vulhub靶场搭建

sensei鼠标测试软件,「硬核测试：游戏鼠标精准度」赛睿SENSEI 310-程序员宅基地

文章浏览阅读564次。原标题：「硬核测试：游戏鼠标精准度」赛睿SENSEI 310作为赛睿最热销游戏鼠标之一，310有SENSEI(对称)和RIVAL(右手)两个版本，均采用今天要测的TrueMove3引擎，是基于PMW3360打造的1:1真实追踪的引擎，虽然现在“1:1引擎”很多了，但TrueMove出来时这个概念还是很新颖的，尤其是提到了消除抖动，最大限度的保持理论和实际DPI的稳定性，那么到底是不是真的1:1呢，..._鼠标精确度检测软件

国际酒店预订APP_基于android平台的酒店预订管理系统软件设计的论文-程序员宅基地

文章浏览阅读209次，点赞6次，收藏5次。随着人们生活水平的提高和旅游业的迅速发展，国际酒店的预订需求越来越大。为满足用户的需求，安卓国际酒店预订APP应运而生。本文旨在详细介绍该APP的设计与实现过程，以提供方便、快捷、安全的酒店预订服务。首先，本文将介绍课题的背景和国内外现状与趋势。随着国内外旅游业的快速发展，人们对旅游住宿的需求也越来越高。同时，随着移动互联网的普及，手机APP已经成为人们预订酒店的首选方式。因此，开发一款便捷、实用的酒店预订APP已经成为当务之急。接着，本文将详细阐述系统的设计和实现过程。_基于android平台的酒店预订管理系统软件设计的论文

随便推点

Power BI DAX 分组排名 分层排名_powerbi分组排名-程序员宅基地

文章浏览阅读2.2k次，点赞5次，收藏2次。这个DAX公式采取类似Excel行上下文的功能，首先建立一个参数等于类别，在Rankx函数第一个参数添加一个Filter，实现同一类别内进行排名，即分层排名。上述DAX公式使用的是ALLEXCEPT函数，是ALL家族函数，功能是除了第二个参数【类别】都是行上下文计算排名，这样就实现了分组分层排名。如上例，Rankx只有前两个参数是必要的，实际可以输入五个参数，设置排序方式。通过在第一个参数添加函数可以实现进阶功能，例如分组分层排名，依旧使用上述数据。再使用Rankx计算排名。首先建立销售和度量值。_powerbi分组排名

快速访问中的ftp文件夹右键没有选项，无法删除如何解决-程序员宅基地

文章浏览阅读894次。随便在以一个目录里新建一个快捷方式，填上ftp地址，如下：下一步，然后删除此快捷方式，那废的ftp就没了转载于:https://www.cnblogs.com/shuangfeike/p/11413734.html..._群辉的ftp文件点右键没有编辑功能

mybatis根据数组批量查询_前端传入的是long型的数组后端在mybatis中怎么批量查询-程序员宅基地

文章浏览阅读1.8k次。接口/** * 从页面接收的数据是多值数据，就是一个数组，它不想转成其它类型，直接把数组丢给dao */ public List<Emp> queryByArray(Integer[] empnos);EmpMapper.xml配置文件<select id="queryByArray" resultType="emp"> select <incl..._前端传入的是long型的数组后端在mybatis中怎么批量查询

python词云是什么意思_python生成词云-程序员宅基地

文章浏览阅读715次。前言在大数据时代，你竟然会在网上看到的词云，例如这样的。看到之后你是什么感觉?想不想自己做一个？如果你的答案是正确的，那就不要拖延了，现在我们就开始，做一个词云分析图，Python是一个当下很流行的编程语言，你不仅可以用它做数据分析和可视化，还能用来做网站、爬取数据、做数学题、写脚本替你偷懒……如果你之前没有编程基础，没关系。希望你不要限于浏览，而是亲自动手尝试一番。到完成的那一步，你不仅可以做出..._词云是什么意思

nginx_nginxl-程序员宅基地

文章浏览阅读469次。什么是nginxNginx (engine x) 是一个高性能的HTTP和反向代理web服务器,使用c语言编写的一款web服务软件.Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强，事实上nginx的并发能力在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。为什么使用nginx?作用1.反向代理2.负载均衡。3.._nginxl

英语 | Day 33、34 x 句句真研每日一句（找从句、意译）_句句真研每日一句答案在哪-程序员宅基地

文章浏览阅读465次，点赞2次，收藏3次。Day 33Day 34_句句真研每日一句答案在哪

推荐文章

热门文章

相关标签