菜鸟教程丨Inspector 的使用
简介:Egret Inspector 是一款Chrome浏览器插件。使用 Inspector,你能够穿透 Canvas,用鼠标直接定位显示对象,Inspector会高亮显示对象的边界、坐标。显示列表面板中会显示当前选中对象在显示列表树种的层级,一目了然,UI调试效率显著提升。属性面板会显示当前选中对象的所有属性值,调试更加方便,你还可以直接修改属性,实时查看修改后的效果。虽然现在egret有方便的eui类库,但可能有些时候为了减小包体体积并不引入eui类库,而是直接使用gui进行编写,这时候调整ui使用Inspector就显得更为方便、直观。
2.5.5版本相比之前版本更改了插件的安装方式,修复了63版本以上插件损坏问题,修复了chrome 62版本一下断开后无法重现连接问题,增加了监听端口断开onMessage事件;修复了树结构面板中有时切换后台重新回到操作无法同步属性面板,使用Array.isArray()方法区分类型。
一、安装Inspector插件
注意:安装inspector插件前请您先查看下自己chrome浏览器的版本,在帮助--->关于中查看版本,如何您的浏览器版本大于或等于63.x.x.x请使用开发者安装模式,如小于63.x.x.x您可以使用普通安装模式。 为保证工具可用,请重新启动浏览器 。
下载地址:https://egret.com/products/others.html#egret-inspector 也可以在Egret Launcher中直接下载
1.开发者安装模式:
- 打开Chrome,转到Chrome扩展工具页 (可以直接输入chrome://extensions/ 打开)。
- 先把开发者模式打开。
- 然后会出现加载已解压的扩展程序,点击弹出浏览文件夹,选择刚刚zip解压出来的EgretInspector-install文件夹。
- 点击确定安装,安装完成的状态。
2.普通安装模式:
- 注意:您的chrome浏览器一定要小于63.x.x.x版本才可以使用。
- 把下载的crx文件直接拖动到Chrome的扩展工具窗口中
- 点击确定安装
- 安装完成的状态:
二、打开Inspector插件
1.首先在chrome扩展插件中启用插件。
2.然后按F12打开调试面板,点击上方工具栏中的Egret。
三、调试显示对象
1.显示面板:
1).FPS显示面板。
2).显示列表面板。
3).阻止点击事件:
当想要检查按钮等点击之后会消失的对象,请勾选“阻止点击动作”选项再进行检查操作。
4).显示鼠标划过的对象:
勾选显示列表面板中的“高亮划过对象”选项,然后当鼠标在场景中移动时就会高亮显示鼠标滑过的对象。
5).选中点击对象:
高亮显示鼠标点击对象,并在属性面板中显示该对象的属性。取消改选项时,将不再跟踪鼠标点击动作。
6).刷新按钮:
由于在游戏中显示列表树变化频繁,所以Inspector中的显示列表树并不是实时更新的,而是当鼠标点击对象时更新。当你长时间没有点击时,显示列表树可能会与场景中的结构由很大差异导致不能自动更新,这时可以点击刷新按钮开重新加载显示列表树。
7).展开显示列表:
在现实列表树中显示对象前方带有 + 号的对象表明含有子元素,可以点击展开。显示对象后面的选框是快速隐藏或者显示该对象的开关方便查看被遮盖的对象。
8).显示/隐藏选中对象:
取消勾选会将该对象的visible属性设置为false,会将显示对象隐藏。
注意:
- 搜索在现实列表树下方的搜索框中(快捷键Ctrl/Command + Shift + F)输入 显示对象name或hashCode来搜索。
- 右击显示列表中的对象,点击存储为全局变量,在控制台中将会输出全局变量名和该对象。
2.属性面板:
1).列出方法:
在属性列表中显示方法,鼠标经过时会显示方法的内容。
2).列出私有属性:
选择是否显示以下划线开头的属性,并非TS 的private。
3).属性编辑
双击属性值,即可编辑属性,回车或者离开输入框提交更改。
4).对于只提供Getter没有Setter方法的属性,不能编辑 。
5).在程序运行界面上会显示出选中对象的位置及尺寸信息。
注意:不在舞台显示出来的对象是不会在属性面板中显示出其对应的信息的。
更多初级开发文档
如何使用Egret粒子编辑器实现烟雾效果
如何使用Egret插件压缩代码包体积,减少请求数量
菜鸟|小白接触白鹭引擎4天,成功做了一款足球小游戏
菜鸟|EUI卡牌游戏制作
菜鸟丨密室逃生Egret游戏教程
菜鸟|使用P2物理引擎制作物理小球
菜鸟丨2D骨骼动画工具DragonBones的使用教程
菜鸟丨用Egret制作功能简单的打地鼠类游戏《冰桶挑战》
菜鸟 | 纹理集打包和动画转换工具Texture Merge的使用教程
联系我们
开发者技术交流区:bbs.egret.com
合作开放平台:open.egret.com
商务合作:bd@egret.com
招聘邮箱:hr@egret.com
产品合作QQ:248843012
渠道合作QQ:2669903485
白鹭引擎微信号
2.5.5版本相比之前版本更改了插件的安装方式,修复了63版本以上插件损坏问题,修复了chrome 62版本一下断开后无法重现连接问题,增加了监听端口断开onMessage事件;修复了树结构面板中有时切换后台重新回到操作无法同步属性面板,使用Array.isArray()方法区分类型。
一、安装Inspector插件
注意:安装inspector插件前请您先查看下自己chrome浏览器的版本,在帮助--->关于中查看版本,如何您的浏览器版本大于或等于63.x.x.x请使用开发者安装模式,如小于63.x.x.x您可以使用普通安装模式。 为保证工具可用,请重新启动浏览器 。
下载地址:https://egret.com/products/others.html#egret-inspector 也可以在Egret Launcher中直接下载
1.开发者安装模式:
- 打开Chrome,转到Chrome扩展工具页 (可以直接输入chrome://extensions/ 打开)。
- 先把开发者模式打开。
- 然后会出现加载已解压的扩展程序,点击弹出浏览文件夹,选择刚刚zip解压出来的EgretInspector-install文件夹。
- 点击确定安装,安装完成的状态。
2.普通安装模式:
- 注意:您的chrome浏览器一定要小于63.x.x.x版本才可以使用。
- 把下载的crx文件直接拖动到Chrome的扩展工具窗口中
- 点击确定安装
- 安装完成的状态:
二、打开Inspector插件
1.首先在chrome扩展插件中启用插件。
2.然后按F12打开调试面板,点击上方工具栏中的Egret。
三、调试显示对象
1.显示面板:
1).FPS显示面板。
2).显示列表面板。
3).阻止点击事件:
当想要检查按钮等点击之后会消失的对象,请勾选“阻止点击动作”选项再进行检查操作。
4).显示鼠标划过的对象:
勾选显示列表面板中的“高亮划过对象”选项,然后当鼠标在场景中移动时就会高亮显示鼠标滑过的对象。
5).选中点击对象:
高亮显示鼠标点击对象,并在属性面板中显示该对象的属性。取消改选项时,将不再跟踪鼠标点击动作。
6).刷新按钮:
由于在游戏中显示列表树变化频繁,所以Inspector中的显示列表树并不是实时更新的,而是当鼠标点击对象时更新。当你长时间没有点击时,显示列表树可能会与场景中的结构由很大差异导致不能自动更新,这时可以点击刷新按钮开重新加载显示列表树。
7).展开显示列表:
在现实列表树中显示对象前方带有 + 号的对象表明含有子元素,可以点击展开。显示对象后面的选框是快速隐藏或者显示该对象的开关方便查看被遮盖的对象。
8).显示/隐藏选中对象:
取消勾选会将该对象的visible属性设置为false,会将显示对象隐藏。
注意:
- 搜索在现实列表树下方的搜索框中(快捷键Ctrl/Command + Shift + F)输入 显示对象name或hashCode来搜索。
- 右击显示列表中的对象,点击存储为全局变量,在控制台中将会输出全局变量名和该对象。
2.属性面板:
1).列出方法:
在属性列表中显示方法,鼠标经过时会显示方法的内容。
2).列出私有属性:
选择是否显示以下划线开头的属性,并非TS 的private。
3).属性编辑
双击属性值,即可编辑属性,回车或者离开输入框提交更改。
4).对于只提供Getter没有Setter方法的属性,不能编辑 。
5).在程序运行界面上会显示出选中对象的位置及尺寸信息。
注意:不在舞台显示出来的对象是不会在属性面板中显示出其对应的信息的。
更多初级开发文档
如何使用Egret粒子编辑器实现烟雾效果
如何使用Egret插件压缩代码包体积,减少请求数量
菜鸟|小白接触白鹭引擎4天,成功做了一款足球小游戏
菜鸟|EUI卡牌游戏制作
菜鸟|Egret微信小游戏好友排行榜教程
菜鸟|Egret微信小游戏转发、分享等功能实现
菜鸟|搭建WebSocket简易聊天室
菜鸟丨密室逃生Egret游戏教程
菜鸟|使用P2物理引擎制作物理小球
菜鸟丨2D骨骼动画工具DragonBones的使用教程
菜鸟丨用Egret制作功能简单的打地鼠类游戏《冰桶挑战》
菜鸟 | 纹理集打包和动画转换工具Texture Merge的使用教程
联系我们
开发者技术交流区:bbs.egret.com
合作开放平台:open.egret.com
商务合作:bd@egret.com
招聘邮箱:hr@egret.com
产品合作QQ:248843012
渠道合作QQ:2669903485
白鹭引擎微信号