使用Visual Studio Code调试Upterm项目的完整指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00629/article/details/148362993

使用Visual Studio Code调试Upterm项目的完整指南

upterm A terminal emulator for the 21st century. 项目地址: https://gitcode.com/gh_mirrors/up/upterm

前言

Upterm是一个基于Electron框架构建的终端模拟器应用，采用TypeScript语言开发。对于开发者而言，掌握如何在Visual Studio Code（简称VSCode）中调试Upterm项目是进行二次开发和问题排查的重要技能。本文将详细介绍完整的调试配置流程。

环境准备

在开始调试之前，需要确保已安装以下组件：

Visual Studio Code最新版本
Node.js运行环境
Upterm项目依赖（通过npm install安装）

第一步：安装必要的调试扩展

由于Upterm是基于Electron的应用，我们需要安装"Debugger for Chrome"扩展来支持渲染进程的调试：

打开VSCode的扩展面板（左侧活动栏的方块图标）
搜索"Debugger for Chrome"
点击安装按钮
安装完成后重新加载VSCode

这个扩展利用了Electron和Chrome共享相同V8引擎的特性，使我们能够使用Chrome调试工具来调试Electron应用。

第二步：配置调试环境

在项目根目录下的.vscode文件夹中，我们需要创建两个关键配置文件：

1. launch.json配置

这个文件定义了调试器的启动配置，包含两个主要部分：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Electron Main",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "windows": {
                "runtimeExecutable": "${workspaceRoot}\\node_modules\\.bin\\electron.cmd"
            },
            "program": "${workspaceRoot}/compiled/src/main/Main.js",
            "protocol": "inspector",
            "sourceMaps": true,
            "outFiles": ["${workspaceRoot}/compiled/src"]
        },
        {
            "name": "Debug renderer process",
            "type": "chrome",
            "request": "launch",
            "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
            "runtimeArgs": [
                "${workspaceRoot}/",
                "--remote-debugging-port=9222"
            ],
            "webRoot": "${workspaceRoot}/",
            "sourceMaps": true
        }
    ]
}

Electron Main配置：用于调试主进程，基于Node.js调试器
Debug renderer process配置：用于调试渲染进程，基于Chrome调试器

2. tasks.json配置

这个文件定义了构建任务：

{
    "version": "2.0.0",
    "tasks": [
        {
            "taskName": "prestart",
            "command": "npm",
            "args": ["run", "prestart"],
            "type": "shell",
            "group": "build",
            "problemMatcher": ["$tsc-watch"]
        },
        {
            "type": "npm",
            "script": "compile",
            "group": "build",
            "problemMatcher": ["$tsc-watch"]
        }
    ]
}