藉助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