借助Visual Studio Code提升基于ActionScript的LayaAir HTML5游戏的调试效率

借助Visual Studio Code提升基于ActionScript的LayaAir HTML5游戏的调试效率

使用Visual Studio Code（VS Code）调试的优点

借助VS Code咱们能够极大地提升基于ActionScript的LayaAir Html5游戏项目的调试效率，VS Code的优点有如下几点：

• 在发生JavaScript运行时错误时,VS Code会自动在对应的代码位置断点，而且能够当即查看当前的变量状态、调用堆栈、日志输出等信息。在Chrome中，咱们须要手动开启这个功能，并且在控制台打开的状态才会生效。本文末尾描述了如何在Chrome中开启此功能。
• 当咱们使用了模块化开发技术的时候，咱们会有多个JavaScript文件。在chrome中，若是想要定位指定模块中的类，则须要先打开这个文件。而在VS Code中，咱们能够当即对全部JavaScript文件进行搜索。
• 在定位指定的类、类成员、本地变量名的时候，Chrome的搜索的方式是搜索字符串。而VS Code则会对JavaScript进行语法解析，这样可以提升搜索的精确度。

Visual Studio Code简介和下载

Visual Studio Code（VS Code）是一个由微软开发的，同时支持Windows、Linux和OS X操做系统的开源文本编辑器。它支持调试，内置了Git 版本控制功能，同时也具备开发环境功能，例如代码补全（相似于 IntelliSense）、代码片断、代码重构等。Visual Studio Code支持多种主流编程语言，对JavaScript和TypeScript语言的原生支持很是完备。咱们熟知的LayaAir IDE以及Egret Wing都是基于Visual Studio Code二次开发的。软件的下载和安装见官方网站。

安装VS Code扩展Debugger for Chrome

这是一个必要的插件，它使得咱们能够在VS Code中调试Chrome浏览器中运行的JavaScript游戏代码。这个扩展开源免费，由微软驱动。在VS Code中的扩展商店搜索Debugger for Chrome便可找到。详情参考官方文档。

示例项目源码和配置

本文使用的示例项目是基于ActionScript的，它由LayaAir IDE自动生成。示例项目只有两个类。

LayaSample.as

package {
    import laya.events.Event;
    public class LayaSample {
        public function LayaSample() {
            //初始化引擎
            Laya.init(1136, 640);
            trace('hello laya.');
            Laya.stage.on(Event.CLICK, this, mouseHandler);         
        }

        private function mouseHandler(e:Event=null):void {
            var myfoo:Foo = new Foo();
            // myfoo.barbarbar();
            myfoo.baz();
        }
    }
}

Foo.as

package {
    public class Foo {

        public function Foo() {

        }

        public function barbarbar() {
            trace('bar bar bar.');
        }

        public function baz() {
            var a;
            a.b();
        }
    }
}

把项目文件夹拖入VS Code便造成了一个VS Code工做空间。在根目录建立名为.vscode 的文件夹，并在此文件中建立文件launch.json，并把如下内容复制到此文件中。想要了解配置详情的话，能够查看VS Code以及其插件的官方文档。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "file": "${workspaceRoot}/bin/h5/index.html",
            "webRoot": "${workspaceRoot}",
            "userDataDir": "${workspaceRoot}/.userdata",
            "runtimeArgs": [
                "--allow-file-access-from-files",
                "--allow-file-access-frome-files",
                " --disable-web-security"
            ]
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceRoot}"
        }
    ]
}

在.vscode 文件夹中建立文件settings.json，并复制如下内容到文件内。这样咱们能够在搜索的时候排除一些文件夹。

{
    "search.exclude": {
        "**/src": true,
        "**/libs": true,
        "**/laya": true
    }
}

最后，在根目录中建立空文件jsconfig.json，这可让咱们进行跨文件搜索。
你也能够下载示例项目的源码并复制相应的文件到你的项目中。能够从这里下载到项目源码。

定位代码

在开发过程当中，断点调试是比较频繁的。VS Code提供了多种方式来帮助咱们快速定位须要断点的代码行。

• 若是咱们使用了LayaAir的模块化（分包）功能，那么就会生成多个JavaScript文件。使用Ctrl+T在多个JavaScript文件之间定位指定的类名、本地变量名。
• 在当前打开的文件中使用Ctrl+Shift+O来定位类名、类成员函数、本地变量名。
• 使用Ctrl+Shift+F在全部的JavaScript文件中的定位任意字符串。

• 使用Ctrl+P来快速打开任意指定的文件。

  在多个JavaScript文件中定位代码

  在示例项目中，咱们有两个JavaScript文件，一个是分模块文件qux.js，一个是主模块文件LayaSample.max.js。想要跨文件搜索，咱们须要保证至少有一个JavaScript文件在VS Code中处于打开状态。若是咱们只让qux.js处于打开状态，使用Ctrl+T打开输入框，那么咱们能够：
• 输入类名的全名或者前几个字符来定位类。好比输入layasample或者它的前几个字符来当即定位LayaSample这个类。

• 输入本地变量的全名或者前几个字符来定位本地变量。好比输入myfoo或者它的前几个字符来当即定位myfoo这个本地变量。

  在当前打开的JavaScript文件中定位代码

  假设当前打开的文件为LayaSample.max.js，用Ctrl+Shift+O打开输入框，那么咱们能够：
• 输入类名的全名或者前几个字符来定位类。好比输入layasample或者它的前几个字符来当即定位LayaSample这个类。
• 输入本地变量的全名或者前几个字符来定位本地变量。好比输入myfoo或者它的前几个字符来当即定位myfoo这个本地变量。

• 输入类成员函数的的全名或者前几个字符来定位它。好比输入barbarbar或者它的前几个字符来当即定位barbarbar这个成员函数。

  在全部的JavaScript文件中的定位任意字符串

  使用Ctrl+Shift+F快速搜索Foo.barbarbar方法中的字符串'bar bar bar.'

  快速打开任意指定的文件

  使用Ctrl+P来快速打开任意qux.js这个文件。

调试

使用F5开启调试，调试方式和Chrome基本相同。

通常的调试

在myfoo.barbarbar();这一行打上断点，点击游戏区域即可触发此断点。在调试控制台能够看到barbarbar这个方法的输出。

断点自动中止在报运行时错误的代码行

点击游戏区域即可触发Foo.baz这个方法的报错，断点会自动触发并中止在a.b();这一行，而且提醒TypeError: Cannot read property 'b' of undefined。

一点重要的说明

在html页面加载的时候执行的JavaScript代码断点可能不生效，除非你再次刷新页面。官方对此有详细的解释。

Chrome中开启异常自动断点

见图

参考资料

• Visual Studio Code 维基百科
• Visual Studio Code
• Visual Studio Code 扩展商店
• Automatically pause on any exception