Iceworks Debug

2021-05-20 20:29 更新

使用 VS Code 和 Chrome 对源码进行调试。

debug-demo

点击文件右上角的 debug 按钮启动 npm run start。

若希望在 VS Code 中进行断点调试,可在您的工程目录中插入 .vscode/launch.json 和 .vscode/tasks.json ,并启动 VS Code Debug。 并安装 Debugger for Chrome 插件。

PS: 可将 .vscode 目录添加至 .gitignore 配置中。

launch.json

推荐配置如下,更多配置可参考 VS Code debug 文档_blano

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome", // 通过 'Debugger for Chrome' 扩展启动 Chrome 预览。
      "request": "launch", // 调试会启动新的 Chrome 实例,替换 attach 可选取当前 Chrome 实例,但需要重启 Chrome。
      "name": "Iceworks Debug", 
      "url": "http://localhost:3333", // 当前工程调试服务地址
      "urlFilter": "http://localhost:3333/**/*", // 监听当前工程调试服务所有的 url
      "webRoot": "${workspaceFolder}",
      "userDataDir": "${workspaceFolder}/.vscode/chrome-debug-user-data", // 用于存放 Chrome 的用户数据(安装的浏览器插件等)
      "preLaunchTask": "Iceworks Start Background Tasks",
      "postDebugTask": "Iceworks Stop Background Tasks"
    }
  ]
}

tasks.json

推荐配置如下,更多配置可参考 [VS Code tasks 文档_blank_nofollow]( https://code.visualstudio.com/docs/editor/tasks#vscode)。

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Iceworks Start Background Tasks",
      "type": "npm",
      "script": "start",
      "isBackground": true,
      "problemMatcher": {
        "pattern": {
          "regexp": "ERROR in .*"  // build-scirpt 日志
        },
        "background": {
          "beginsPattern": ".*(@alib/build-scripts|ice\\.js|rax\\.js).*", // build-scirpt 日志
          "endsPattern": ".*http://localhost:3333.*"  // build-scirpt 日志
        }
      }
    },
    {
      "label": "Iceworks Stop Background Tasks",
      "type": "process",
      "command": [
        "${command:workbench.action.tasks.terminate}",  // VS Code 内置命令
        "${command:workbench.action.acceptSelectedQuickOpenItem}" // VS Code 内置命令
      ]
    }
  ]
}

更改端口号

若需要 debug 的工程调试链接不为 http://localhost:3333 时,可以修改 launch.json 中的 urlurlFilter 配置的地址链接,以及 tasks.json 中的 endsPattern 为新的调试地址即可。

Chrome 实例

默认开启新的 Chrome 实例进行调试。首次启动为无数据 Chrome (无用户态,无插件),在调试过程操作的数据将得以保存(历史,安装插件等)。

Rax 项目,推荐安装 Guan Extension

其他

如果想使用常用登录态的 Chrome 进行提示,可切换 launch.json 中的 request 配置为 attach,且必须关闭当前 Chrome。

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号