·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室
DZ插件网 门户 站长资讯 查看内容

菜鸟教程丨Inspector 的使用

2025-2-22 08:38| 发布者: 婷姐| 查看: 93279| 评论: 0

摘要: 简介:Egret Inspector 是一款Chrome浏览器插件。使用 Inspector,你能够穿透 Canvas,用鼠标直接定位显示对象,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文件夹。

- 点击确定安装,安装完成的状态。

菜鸟教程丨Inspector 的使用2123 作者: 来源: 发布时间:2025-2-22 08:38

2.普通安装模式:

- 注意:您的chrome浏览器一定要小于63.x.x.x版本才可以使用。

- 把下载的crx文件直接拖动到Chrome的扩展工具窗口中

- 点击确定安装

- 安装完成的状态:

菜鸟教程丨Inspector 的使用4381 作者: 来源: 发布时间:2025-2-22 08:38

二、打开Inspector插件

1.首先在chrome扩展插件中启用插件。

2.然后按F12打开调试面板,点击上方工具栏中的Egret。

菜鸟教程丨Inspector 的使用5143 作者: 来源: 发布时间:2025-2-22 08:38

三、调试显示对象

1.显示面板:

菜鸟教程丨Inspector 的使用8856 作者: 来源: 发布时间:2025-2-22 08:38

1).FPS显示面板。

2).显示列表面板。

3).阻止点击事件:

当想要检查按钮等点击之后会消失的对象,请勾选“阻止点击动作”选项再进行检查操作。

4).显示鼠标划过的对象:

 勾选显示列表面板中的“高亮划过对象”选项,然后当鼠标在场景中移动时就会高亮显示鼠标滑过的对象。

5).选中点击对象:

 高亮显示鼠标点击对象,并在属性面板中显示该对象的属性。取消改选项时,将不再跟踪鼠标点击动作。

6).刷新按钮:

由于在游戏中显示列表树变化频繁,所以Inspector中的显示列表树并不是实时更新的,而是当鼠标点击对象时更新。当你长时间没有点击时,显示列表树可能会与场景中的结构由很大差异导致不能自动更新,这时可以点击刷新按钮开重新加载显示列表树。

7).展开显示列表:

     在现实列表树中显示对象前方带有 + 号的对象表明含有子元素,可以点击展开。显示对象后面的选框是快速隐藏或者显示该对象的开关方便查看被遮盖的对象。

8).显示/隐藏选中对象:

      取消勾选会将该对象的visible属性设置为false,会将显示对象隐藏。

注意:

- 搜索在现实列表树下方的搜索框中(快捷键Ctrl/Command + Shift + F)输入 显示对象name或hashCode来搜索。

- 右击显示列表中的对象,点击存储为全局变量,在控制台中将会输出全局变量名和该对象。

2.属性面板:

菜鸟教程丨Inspector 的使用2627 作者: 来源: 发布时间:2025-2-22 08:38

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

白鹭引擎微信号





上一篇:新机遇,利用Deepseek+一天收入几千加?是财富密码还是收割韭菜?
下一篇:没有了...

鲜花

握手

雷人

路过

鸡蛋

评论

您需要登录后才可以发表言论 登录立即注册
关闭

站长推荐上一条 /1 下一条

投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图 知道创宇云防御

您的IP:52.14.183.78,GMT+8, 2025-2-22 20:23 , Processed in 0.359246 second(s), 44 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯
扫一扫添加微信客服
QQ客服返回顶部
返回顶部