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

最新推荐文章于 2021-11-08 20:09:56 发布

weixin_30633405

最新推荐文章于 2021-11-08 20:09:56 发布

阅读量1.2k

点赞数

文章标签：开发工具 json

原文链接：http://www.cnblogs.com/seanp/p/6522018.html

版权

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

一、效果目的
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的断点调试功能，所以把这个页面关闭掉。