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

## 1. 说明

仿照 `egret Inspect ` 制作的通用H5游戏列表查看器，方便查看游戏结构，修改属性，注入代码，查看shader,抓帧
[GitHub](https://github.com/chengyoujie/GameInspect)

## 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的显示，

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

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

## 4. 自定义扩展

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

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

```javascript

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. 如果要自定义记录格式，可以实现下面的方法
```javascript
export interface IUserCostomEngine {
....
/**
* 获取单条修改对应的内容
* @param findNode 节点obj对象
* @param propPath 属性路径如 x parent.x
* @param newValue 修改后的新值
*/
getRecoderStr?(findNode:any, propPath:string, newValue:any):string
}
```
## 7. 游戏控制(暂停，抓帧，查看修改Shader, 性能数据）
入口：顶部右上角!

游戏控制器
`【显示基准线】`：鼠标移动时是否显示FPS, DrawCall, FrameLine鼠标所在x轴上的信息
`【显示帧抓取视图】`：方便查看某一帧的渲染顺序及渲染时的顶点着色器和片元着色器代码
`【上一帧】`：跳转到当前帧的前一帧
`【下一帧】`：跳转到当前帧的前一帧
`【重新抓取】`：重新抓取当前帧的渲染顺序
`【显示大图】`：在游戏内显示高清的渲染图
`【暂停】`：暂停游戏
`【下一帧】`：暂停游戏，并播放下一帧
`【显示Shader】`：显示/隐藏当前页面的所有shader，如果显示不全或者没有找到可以尝试点击【刷新游戏】按钮
`【执行Shader】`：将当前编辑器内的shader编译后在游戏内运行
`【刷新游戏】`：重新刷新游戏，并优先注入重载的方法
`FPS`：每秒多少帧
`DrawCall`：每秒向GPU提交多少次绘制
`FrameTime`：每帧执行的时间