ActionScript
TypeScript
JavaScript

DebugPanel

发布时间:2017-02-18

DebugPanel是基于Div的调试窗口,功能类似于DebugTool

可以通过在代码中使用(如果是TS JS需要在页面中引入laya.debugtool.js)

DebugPanel.init();

来初始化DebugPanel

 图片1.png

上图红框区域就是DebugPanel


DebugPanel上显示了显示对象节点树信息,如下图

 图片2.png


可以点击刷新按钮刷新节点树


通过DivPanel可以方便的选取对象

1. 通过点击节点树中的节点

2. 点击审查元素,然后在舞台上通过鼠标点击选取节点


下图为通过审查元素选取

图片3.png

点击审查元素之后,然后将鼠标移到显示对象上方,显示对象就会显示边框,点击就可以选中,选中之后,节点树上也会对应选中,如下图

 图片4.png


在选中对象之后右侧会显示该对象的各种属性信息,并一直刷新显示,如下图

 图片5.png

红框区域就是选中对象的属性信息

可以在输入框中改变属性值来实时改变游戏中的对象属性


还可以点击“打印到控制台”按钮将选中对象输出到控制台以便进一步操作

 图片6.png


点击”enable链”按钮在控制台输出显示对象的enable信息

图片7.png

点击”size链”按钮在控制台输出显示对象的size信息

图片8.png 

 

图片9.png

可以快捷的控制对象是否可见和是否显示边框


除此之外右上角还有三个有用的功能

 图片10.png

 

图片11.png

勾选“显示当前cache重绘”将会统计正在重绘的cache

 图片12.png

勾选“显示所有cache区域”将会高亮所有渲染的cache对象

图片13.png

 

点击“显示大图合集”在webgl模式下将会显示引擎内部自动合成的大图合集,可以通过不断点击遍历显示所有的合集