开发工具桌面应用【免费下载链接】uptermA terminal emulator for the 21st century.项目地址https://gitcode.com/gh_mirrors/up/upterm点击查看免费下载Upterm 是一款基于 Electron 与 TypeScript 构建的现代化终端模拟器也是交互式 shell其主进程与渲染进程分别由 Node.js 与 Chromium 执行。本文基于 docs/vscodedebugging.md 提供的方法完整讲解如何在 VS Code 中搭建调试环境安装 Debugger for Chrome 扩展、编写launch.json与tasks.json、构建项目并逐步调试 TypeScript 源码。读完本文你将掌握一套可直接复制的 Electron 应用双进程调试方案。为什么需要专门为 Upterm 配置调试器Upterm 不是普通的 Node.js 命令行程序而是典型的 Electron 桌面应用。从源码结构看它存在两个独立进程主进程Main Process入口为 src/main/Main.ts负责创建BrowserWindow、加载界面、处理窗口关闭等生命周期逻辑运行在 Node.js 环境中渲染进程Renderer Process入口为 src/views/Main.tsx通过 src/views/index.html 加载负责终端 UI、Monaco 编辑器集成、命令补全与用户事件处理运行在 Chromium 环境中。package.json中的main字段指向compiled/src/main/Main.js这意味着 Electron 实际执行的是由 TypeScript 编译产出的 JavaScript。调试 TypeScript 源码需要依赖source map将断点映射回.ts文件——这正是下文配置的核心逻辑。因此主进程调试要用 VS Code 内置的Node.js 调试器而渲染进程调试则需要微软官方开源的Debugger for Chrome扩展。文档中给出的步骤正是围绕这两种调试器的组合展开。Step 1. 安装 Debugger for Chrome 扩展要调试基于 Electron 的应用必须先安装 VS Code 的Debugger for Chrome扩展。安装方式点击左侧活动栏的Extensions图标在搜索框中输入并选择Debugger for Chrome点击 Install。扩展安装大约需要一分钟安装完成后 VS Code 会提示重新加载Reload窗口。说明该扩展既承担渲染进程调试type: chrome也是整套配置中唯一需要手动安装的第三方扩展。主进程调试使用 VS Code 内置的 Node 调试器无需额外安装。Step 2. 编写.vscode下的调试与任务配置在项目根目录的.vscode文件夹中创建launch.json和tasks.json两个文件若文件夹不存在则新建。a. launch.json双进程调试配置将以下内容写入.vscode/launch.json{ // Use IntelliSense to learn about possible Node.js debug attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid830387 version: 0.2.0, configurations: [ { type: node, request: launch, name: Electron Main, // Mac OS Linux process runtime executable runtimeExecutable: ${workspaceRoot}/node_modules/.bin/electron, windows: { // Windows process runtime executable runtimeExecutable: ${workspaceRoot}\\node_modules\\.bin\\electron.cmd }, program: ${workspaceRoot}/compiled/src/main/Main.js, protocol: inspector, stopOnEntry: false, args: [], cwd: ${workspaceRoot}/, runtimeArgs: [ --enable-logging ], env: {}, sourceMaps: true, outFiles: [ ${workspaceRoot}/compiled/src ], internalConsoleOptions: openOnSessionStart, console: integratedTerminal }, { name: Debug renderer process, type: chrome, request: launch, // Mac OS Linux process runtime executable runtimeExecutable: ${workspaceRoot}/node_modules/.bin/electron, windows: { // Windows process runtime executable runtimeExecutable: ${workspaceRoot}\\node_modules\\.bin\\electron.cmd }, runtimeArgs: [ ${workspaceRoot}/, --enable-logging, --remote-debugging-port9222 ], webRoot: ${workspaceRoot}/, sourceMaps: true, internalConsoleOptions: openOnSessionStart } ] }逐项解析关键字段字段作用与取值说明runtimeExecutable指定 Electron 可执行文件路径。macOS/Linux 下为${workspaceRoot}/node_modules/.bin/electronWindows 下通过windows节点覆盖为electron.cmd。Electron 2.0.10 由devDependencies安装到本地node_modules无需全局安装。program主进程调试的启动入口即compiled/src/main/Main.js。这正是package.json中main字段指向的文件也是electron .实际执行的入口。protocol: inspector使用 Node.js 的 inspector 调试协议连接主进程。runtimeArgs传给 Electron 进程的额外参数。--enable-logging用于输出 Chromium/Electron 的日志渲染进程配置额外添加--remote-debugging-port9222让 Chrome 调试器通过 9222 端口连接渲染进程。sourceMaps: trueoutFiles允许把断点映射回 TypeScript 源码outFiles指向编译产物目录compiled/src与tsconfig.json的outDir一致。webRoot渲染进程调试的静态资源根目录指向仓库根目录${workspaceRoot}/。console: integratedTerminal将主进程的 stdio 连接到 VS Code 集成终端便于观察console.log输出。b. tasks.json构建任务编排将以下内容写入.vscode/tasks.json{ version: 2.0.0, presentation: { echo: true, reveal: always, focus: false, panel: new }, tasks: [ { // Custom prestart task i.e. npm run prestart. taskName: prestart, command: npm, args: [ run, prestart ], type: shell, group: build, // Specify tsc problem matcher. problemMatcher: [$tsc-watch] }, { // Default compile task from package.json i.e. npm run compile. type: npm, script: compile, group: build, // Specify tsc problem matcher. problemMatcher: [$tsc-watch] } ] }两个任务的职责划分prestart等价于在终端执行npm run prestart即npm install npm run compile用于首次安装依赖后的完整构建compile等价于npm run compile即npm run cleanup npm run tsc npm run copy-html用于代码修改后的增量重编译。两者都通过problemMatcher: [$tsc-watch]将 TypeScript 编译报错直接呈现在 VS Code 的 Problems 面板中。presentation配置指定了任务输出在新面板中始终显示。Step 3. 构建项目prestart 与 compileUpterm 首次安装依赖后以及每次修改源码后都需要先重新构建再启动调试会话。方式一在 VS Code 内运行任务。按⌘ pmacOS或Ctrl pLinux/Windows打开活动搜索框输入task prestart并回车方式二在命令行直接运行。等价命令为npm run prestart。如果只修改了代码、未变更依赖的 node_modules则无需完整重装依赖直接在搜索框输入task compile或命令行执行npm run compile即可。关于compile任务有一个值得注意的细节它是一个定义在 package.json 中的 npm scriptVS Code 会自动检测并识别为npm: compile显示在搜索框中截图中的 recently used tasks 与 detected tasks 区域正是这一机制的体现。编译产物的去向compile脚本链条为cleanup → tsc → copy-htmlcleanup执行rimraf compiled/src清空旧的编译产物tsc执行 TypeScript 编译依据 tsconfig.json 将src输出到compiled/srccopy-html通过cpx将 src/views/index.html 复制到compiled/src/views因为渲染进程以file://方式加载该 HTML 文件。这也是为什么调试配置中program与outFiles都指向compiled/src——只有构建完成后主进程入口与 source map 才真实存在。Step 4. 启动调试会话source map 的工作原理Upterm 项目启用了 source map这是 TypeScript 断点调试的前提。tsconfig.json 中inlineSourceMap: true会为编译产物内联生成映射信息把 TypeScript 代码映射到 Node.js/Chromium 实际执行的 JavaScript 代码。VS Code 通过sourceMaps: true读取这些映射从而允许你在.ts文件中直接下断点。进入调试视图点击左侧活动栏的Debug图标进入调试模式快捷键为Shift ⌘ dmacOS或Shift Ctrl dLinux/Windows。在调试窗口左上角的下拉框中选择Debug renderer process即launch.json中第二个配置然后点击绿色的播放按钮关键注意事项必须提前设置断点文档明确提醒在启动调试会话之前需先在代码中放置断点否则无法进入逐步调试stepping流程。主进程逻辑如窗口创建的断点请选择Electron Main配置渲染进程如键盘事件处理、补全逻辑的断点请选择Debug renderer process配置。从源码定位下断点的位置结合仓库源码可以快速找到值得下断点的入口主进程src/main/Main.ts 的app.on(ready, ...)回调包含BrowserWindow创建、loadURL(file:// __dirname /../views/index.html)加载界面、窗口显示逻辑渲染进程src/views/Main.tsx 的main()函数负责加载 Monaco 主题与 shell 语法高亮、挂载 React 应用、注册keydown/paste/drop事件监听是理解 Upterm 交互链路的理想入口。补充开发模式下的替代方案如果你的目标只是快速迭代而非逐行调试package.json提供了 watch 模式start: concurrently --kill-others -s first \tsc --watch\ \cross-env NODE_ENVdevelopment npm run electron\npm start会用concurrently并行运行 TypeScript 监听编译tsc --watch源码变更自动重编译与 Electron 启动electron .。该模式适合日常开发但无法提供 VS Code 中的断点调试能力——需要断点排查问题时仍应回到本文的launch.json方案。版本与适用性说明本文配置基于VS Code 1.16.0实测见原文档结尾说明新版 VS Code 仍兼容launch.json的version: 0.2.0格式项目依赖的 Electron 版本为2.0.10、TypeScript 为2.8.1见 package.json 的devDependencies旧版 Chrome 调试器与 Node inspector 协议均与此匹配渲染进程调试依赖--remote-debugging-port9222端口请确保该端口未被其他进程占用该调试指南在 README.md 的 Development Setup 一节中亦有入口链接npm start快速启动后可按本文步骤进入调试。按照以上四步配置完成后你即可在 VS Code 中对 Upterm 的 TypeScript 源码进行双进程断点调试主进程与渲染进程的调用链路都将尽收眼底。赞分享开发工具桌面应用【免费下载链接】uptermA terminal emulator for the 21st century.项目地址https://gitcode.com/gh_mirrors/up/upterm点击查看免费下载相关推荐Proxmark3Iceman ForkVisual Studio Code 调试环境搭建J-Link GDB 双端调试实战指南Proxmark3Iceman ForkVisual Studio Code 调试环境搭建J Link GDB 双端调试实战指南 导读 本文基于仓库文渗透测试嵌入式物联网网络安全PandaWiki如何通过AI驱动构建企业级知识管理系统的完整指南PandaWiki如何通过AI驱动构建企业级知识管理系统的完整指南 PandaWiki作为一款AI大模型驱动的开源知识库搭建系统为技术决策者和项目管理者提供后端前端人工智能AI 应用RAG知识管理Electron 符号服务器Symbol Server调试配置实战Windbg 与 Visual Studio 完整指南Electron 符号服务器Symbol Server调试配置实战Windbg 与 Visual Studio 完整指南 本指南围绕 Electron 官桌面应用跨平台前端上一篇如何利用Realworld项目打造惊艳的程序员作品集与简历亮点下一篇如何使用Strapi构建专业问卷调查从表单设计到数据分析的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Upterm 项目实战：在 Visual Studio Code 中调试 Electron + TypeScript 终端模拟器
开发工具桌面应用【免费下载链接】uptermA terminal emulator for the 21st century.项目地址https://gitcode.com/gh_mirrors/up/upterm点击查看免费下载Upterm 是一款基于 Electron 与 TypeScript 构建的现代化终端模拟器也是交互式 shell其主进程与渲染进程分别由 Node.js 与 Chromium 执行。本文基于 docs/vscodedebugging.md 提供的方法完整讲解如何在 VS Code 中搭建调试环境安装 Debugger for Chrome 扩展、编写launch.json与tasks.json、构建项目并逐步调试 TypeScript 源码。读完本文你将掌握一套可直接复制的 Electron 应用双进程调试方案。为什么需要专门为 Upterm 配置调试器Upterm 不是普通的 Node.js 命令行程序而是典型的 Electron 桌面应用。从源码结构看它存在两个独立进程主进程Main Process入口为 src/main/Main.ts负责创建BrowserWindow、加载界面、处理窗口关闭等生命周期逻辑运行在 Node.js 环境中渲染进程Renderer Process入口为 src/views/Main.tsx通过 src/views/index.html 加载负责终端 UI、Monaco 编辑器集成、命令补全与用户事件处理运行在 Chromium 环境中。package.json中的main字段指向compiled/src/main/Main.js这意味着 Electron 实际执行的是由 TypeScript 编译产出的 JavaScript。调试 TypeScript 源码需要依赖source map将断点映射回.ts文件——这正是下文配置的核心逻辑。因此主进程调试要用 VS Code 内置的Node.js 调试器而渲染进程调试则需要微软官方开源的Debugger for Chrome扩展。文档中给出的步骤正是围绕这两种调试器的组合展开。Step 1. 安装 Debugger for Chrome 扩展要调试基于 Electron 的应用必须先安装 VS Code 的Debugger for Chrome扩展。安装方式点击左侧活动栏的Extensions图标在搜索框中输入并选择Debugger for Chrome点击 Install。扩展安装大约需要一分钟安装完成后 VS Code 会提示重新加载Reload窗口。说明该扩展既承担渲染进程调试type: chrome也是整套配置中唯一需要手动安装的第三方扩展。主进程调试使用 VS Code 内置的 Node 调试器无需额外安装。Step 2. 编写.vscode下的调试与任务配置在项目根目录的.vscode文件夹中创建launch.json和tasks.json两个文件若文件夹不存在则新建。a. launch.json双进程调试配置将以下内容写入.vscode/launch.json{ // Use IntelliSense to learn about possible Node.js debug attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid830387 version: 0.2.0, configurations: [ { type: node, request: launch, name: Electron Main, // Mac OS Linux process runtime executable runtimeExecutable: ${workspaceRoot}/node_modules/.bin/electron, windows: { // Windows process runtime executable runtimeExecutable: ${workspaceRoot}\\node_modules\\.bin\\electron.cmd }, program: ${workspaceRoot}/compiled/src/main/Main.js, protocol: inspector, stopOnEntry: false, args: [], cwd: ${workspaceRoot}/, runtimeArgs: [ --enable-logging ], env: {}, sourceMaps: true, outFiles: [ ${workspaceRoot}/compiled/src ], internalConsoleOptions: openOnSessionStart, console: integratedTerminal }, { name: Debug renderer process, type: chrome, request: launch, // Mac OS Linux process runtime executable runtimeExecutable: ${workspaceRoot}/node_modules/.bin/electron, windows: { // Windows process runtime executable runtimeExecutable: ${workspaceRoot}\\node_modules\\.bin\\electron.cmd }, runtimeArgs: [ ${workspaceRoot}/, --enable-logging, --remote-debugging-port9222 ], webRoot: ${workspaceRoot}/, sourceMaps: true, internalConsoleOptions: openOnSessionStart } ] }逐项解析关键字段字段作用与取值说明runtimeExecutable指定 Electron 可执行文件路径。macOS/Linux 下为${workspaceRoot}/node_modules/.bin/electronWindows 下通过windows节点覆盖为electron.cmd。Electron 2.0.10 由devDependencies安装到本地node_modules无需全局安装。program主进程调试的启动入口即compiled/src/main/Main.js。这正是package.json中main字段指向的文件也是electron .实际执行的入口。protocol: inspector使用 Node.js 的 inspector 调试协议连接主进程。runtimeArgs传给 Electron 进程的额外参数。--enable-logging用于输出 Chromium/Electron 的日志渲染进程配置额外添加--remote-debugging-port9222让 Chrome 调试器通过 9222 端口连接渲染进程。sourceMaps: trueoutFiles允许把断点映射回 TypeScript 源码outFiles指向编译产物目录compiled/src与tsconfig.json的outDir一致。webRoot渲染进程调试的静态资源根目录指向仓库根目录${workspaceRoot}/。console: integratedTerminal将主进程的 stdio 连接到 VS Code 集成终端便于观察console.log输出。b. tasks.json构建任务编排将以下内容写入.vscode/tasks.json{ version: 2.0.0, presentation: { echo: true, reveal: always, focus: false, panel: new }, tasks: [ { // Custom prestart task i.e. npm run prestart. taskName: prestart, command: npm, args: [ run, prestart ], type: shell, group: build, // Specify tsc problem matcher. problemMatcher: [$tsc-watch] }, { // Default compile task from package.json i.e. npm run compile. type: npm, script: compile, group: build, // Specify tsc problem matcher. problemMatcher: [$tsc-watch] } ] }两个任务的职责划分prestart等价于在终端执行npm run prestart即npm install npm run compile用于首次安装依赖后的完整构建compile等价于npm run compile即npm run cleanup npm run tsc npm run copy-html用于代码修改后的增量重编译。两者都通过problemMatcher: [$tsc-watch]将 TypeScript 编译报错直接呈现在 VS Code 的 Problems 面板中。presentation配置指定了任务输出在新面板中始终显示。Step 3. 构建项目prestart 与 compileUpterm 首次安装依赖后以及每次修改源码后都需要先重新构建再启动调试会话。方式一在 VS Code 内运行任务。按⌘ pmacOS或Ctrl pLinux/Windows打开活动搜索框输入task prestart并回车方式二在命令行直接运行。等价命令为npm run prestart。如果只修改了代码、未变更依赖的 node_modules则无需完整重装依赖直接在搜索框输入task compile或命令行执行npm run compile即可。关于compile任务有一个值得注意的细节它是一个定义在 package.json 中的 npm scriptVS Code 会自动检测并识别为npm: compile显示在搜索框中截图中的 recently used tasks 与 detected tasks 区域正是这一机制的体现。编译产物的去向compile脚本链条为cleanup → tsc → copy-htmlcleanup执行rimraf compiled/src清空旧的编译产物tsc执行 TypeScript 编译依据 tsconfig.json 将src输出到compiled/srccopy-html通过cpx将 src/views/index.html 复制到compiled/src/views因为渲染进程以file://方式加载该 HTML 文件。这也是为什么调试配置中program与outFiles都指向compiled/src——只有构建完成后主进程入口与 source map 才真实存在。Step 4. 启动调试会话source map 的工作原理Upterm 项目启用了 source map这是 TypeScript 断点调试的前提。tsconfig.json 中inlineSourceMap: true会为编译产物内联生成映射信息把 TypeScript 代码映射到 Node.js/Chromium 实际执行的 JavaScript 代码。VS Code 通过sourceMaps: true读取这些映射从而允许你在.ts文件中直接下断点。进入调试视图点击左侧活动栏的Debug图标进入调试模式快捷键为Shift ⌘ dmacOS或Shift Ctrl dLinux/Windows。在调试窗口左上角的下拉框中选择Debug renderer process即launch.json中第二个配置然后点击绿色的播放按钮关键注意事项必须提前设置断点文档明确提醒在启动调试会话之前需先在代码中放置断点否则无法进入逐步调试stepping流程。主进程逻辑如窗口创建的断点请选择Electron Main配置渲染进程如键盘事件处理、补全逻辑的断点请选择Debug renderer process配置。从源码定位下断点的位置结合仓库源码可以快速找到值得下断点的入口主进程src/main/Main.ts 的app.on(ready, ...)回调包含BrowserWindow创建、loadURL(file:// __dirname /../views/index.html)加载界面、窗口显示逻辑渲染进程src/views/Main.tsx 的main()函数负责加载 Monaco 主题与 shell 语法高亮、挂载 React 应用、注册keydown/paste/drop事件监听是理解 Upterm 交互链路的理想入口。补充开发模式下的替代方案如果你的目标只是快速迭代而非逐行调试package.json提供了 watch 模式start: concurrently --kill-others -s first \tsc --watch\ \cross-env NODE_ENVdevelopment npm run electron\npm start会用concurrently并行运行 TypeScript 监听编译tsc --watch源码变更自动重编译与 Electron 启动electron .。该模式适合日常开发但无法提供 VS Code 中的断点调试能力——需要断点排查问题时仍应回到本文的launch.json方案。版本与适用性说明本文配置基于VS Code 1.16.0实测见原文档结尾说明新版 VS Code 仍兼容launch.json的version: 0.2.0格式项目依赖的 Electron 版本为2.0.10、TypeScript 为2.8.1见 package.json 的devDependencies旧版 Chrome 调试器与 Node inspector 协议均与此匹配渲染进程调试依赖--remote-debugging-port9222端口请确保该端口未被其他进程占用该调试指南在 README.md 的 Development Setup 一节中亦有入口链接npm start快速启动后可按本文步骤进入调试。按照以上四步配置完成后你即可在 VS Code 中对 Upterm 的 TypeScript 源码进行双进程断点调试主进程与渲染进程的调用链路都将尽收眼底。赞分享开发工具桌面应用【免费下载链接】uptermA terminal emulator for the 21st century.项目地址https://gitcode.com/gh_mirrors/up/upterm点击查看免费下载相关推荐Proxmark3Iceman ForkVisual Studio Code 调试环境搭建J-Link GDB 双端调试实战指南Proxmark3Iceman ForkVisual Studio Code 调试环境搭建J Link GDB 双端调试实战指南 导读 本文基于仓库文渗透测试嵌入式物联网网络安全PandaWiki如何通过AI驱动构建企业级知识管理系统的完整指南PandaWiki如何通过AI驱动构建企业级知识管理系统的完整指南 PandaWiki作为一款AI大模型驱动的开源知识库搭建系统为技术决策者和项目管理者提供后端前端人工智能AI 应用RAG知识管理Electron 符号服务器Symbol Server调试配置实战Windbg 与 Visual Studio 完整指南Electron 符号服务器Symbol Server调试配置实战Windbg 与 Visual Studio 完整指南 本指南围绕 Electron 官桌面应用跨平台前端上一篇如何利用Realworld项目打造惊艳的程序员作品集与简历亮点下一篇如何使用Strapi构建专业问卷调查从表单设计到数据分析的完整指南创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考