ActionScript
TypeScript
JavaScript

LayaAir Debug调试工具

发布时间:2017-01-05

LayaAir Debug调试工具无需下载安装任何插件,只需引入调试库,可以直接运行在项目中。

1、导入调试库

在index.html文件里增加如下代码引入LayaAir Debug类库;

<script type="text/javascript" src="libs/laya.debugtool.js"></script>


初始化类库:

在init之后的项目代码里增加如下代码:

laya.debug.DebugTool.init();

LayaAir Debug初始化成功后,在H5项目中会显示出一个调试窗口,调试窗口可能显示出来后又会被隐藏,这时可以通过双击屏幕的方式,再次显示LayaAir Debug调试窗口;

调试面板工具页面.png


2、功能说明

A.点击选取按钮:点击图标后,通过点击指定的节点查看选中节点的属性信息;

点击选取截图.gif


点击”设置显示属性”图标,可以添加/删除节点要显示的属性信息:

设置节点的属性截图.gif


B.拖动选取按钮:点击图标后,然后按住鼠标左键,将图标按钮拖动到想要查看的显示对象上:

拖动选取截图.gif

C.查询按钮:显示当前在场景里选中的显示对象(Alt+V移动鼠标来选择对象)

查询截图.gif

D.性能按钮:

(1).对象创建:当前游戏运行过程中所创建的对象信息;

性能-对象创建截图.png

(2).渲染用时:当前游戏渲染所消耗的用时,单位为毫秒(ms)

性能-渲染用时.png

(3).Cache:当前重绘过对象

性能-cache截图.png

3、节点属性面板操作:在节点、选中或性能标签面板页”右击”要查看的节点,会弹出:

节点面板截图.png

简单的使用说明:

节点操作截图1.gif

节点属性面板可以针对选择的节点进行显示/隐藏操作、可以显示出当前节点的mouseEnable关系链、可以显示出选中节点的Size关系链等等!

节点工具使用:

节点工具面板截图.gif

节点工具面板可以操作当前选中节点以及父节点、子节点、兄弟节点进行节点链、节点显示控制的操作;

以上只是简单的介绍了下工具的基本使用,更复杂的排错调试使用后面也会出文章介绍!