經過我日積月累的摸索，還是一直模模糊糊的，搞不懂，今天經晨哥點撥兩下，一下子就恍然大悟，搞定了怎麼弄這個東西，現將經驗分享如下。

一、效果目的
1.在VSCode裡，直接F5開啟Egret頁面，並且可以在編輯器裡，進行斷點除錯Egret程式碼，和在Wing裡進行程式碼除錯相似；

二、工具準備
1.VSCode 軟體
2.一個Egret 專案
3.VSCode 上裝兩個外掛：Debugger for Chrome，EgretCode
如圖：

三、配置檔案更改
1.用VSCode裝載Egret專案

2.然後按F5，出現這個框

選擇 Chrome

3.然後出現個配置的提示，和打開了launch.json這個檔案

,
        {
            "name": "使用本機 Chrome 除錯",
            "type": "chrome",
            "request": "launch",
            // "file": "index.html",
            "url": "http://10.10.20.120:3000/index.html", //使用外部伺服器時,請註釋掉 file, 改用 url, 並將 useBuildInServer 設定為 false "http://mysite.com/index.html
            "
 
runtimeExecutable": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe", // 改成您的 Chrome 安裝路徑
            "sourceMaps": true,
            "webRoot": "${workspaceRoot}",
            "preLaunchTask":"build",
            "userDataDir":"${tmpdir}",
            "port":5433
        }

如圖

4.然後更改tasks.json檔案裡的配置
tasks.json初始化，如圖

{
    "version": "0.1.0",
    "command": "egret",
    "isShellCommand": true,
    "tasks": [
        {
            "taskName": "build",
            "showOutput": "always",
            "args": [
                "build",
                "-sourcemap"
            ],
            "problemMatcher": "$tsc"
        },
        {
            "taskName": "clean",
            "showOutput": "always",
            "args": [
                "build",
                "-e"
            ],
            "problemMatcher": "$tsc"
        },
        {
            "taskName": "publish",
            "showOutput": "always",
            "args": [
                "publish"
            ],
            "problemMatcher": "$tsc"
        }
    ]
}

結果如圖：

5.接著按快捷鍵： ctrl shift p ，會出現一個搜尋框，在裡面輸入 Egret StartServer

然後 按 Enter 鍵，結果如圖

PS：每次啟動 Egret Server的時候，都會同時啟動專案頁面，但是這個頁面不支援在VSCode的斷點除錯功能，所以把這個頁面關閉掉。

6.然後在Egret專案裡設定好斷點，按 F5，就可以進行斷點除錯了，並且每次F5的時候支援自動編譯。

7.如果想在寫程式碼的過程中，清理，編譯專案，那麼使用 EgretCode 外掛裡提供的命令

使用方法，參考第5步。

8.接著就 Enjoy!