【Egret】使用VSCode 编译，断点调试Egret项目

经过我日积月累的摸索，还是一直模模糊糊的，搞不懂，今天经晨哥点拨两下，一下子就恍然大悟，搞定了怎么弄这个东西，现将经验分享如下。

一、效果目的
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!

Donate