如何在 WebStorm 中调试 Deno 应用？-webstorm-PHP中文网

如何在 WebStorm 中调试 Deno 应用？

幻夢星雲

发布： 2025-08-03 10:29:01

原创

473人浏览过

在 webstorm 中调试 deno 应用的解决方案是：1. 安装 deno 插件并重启 webstorm；2. 创建 deno 运行配置，正确设置 deno 可执行文件路径、脚本文件、参数及工作目录；3. 设置断点并启动调试；4. 如需远程调试，使用 --inspect 或 --inspect-brk 启动 deno 进程，并在 webstorm 中配置 attach to node.js/chrome；5. 若使用 sourcemaps，确保构建工具生成对应文件并与 js 文件同目录，webstorm 会自动加载。

如何在 WebStorm 中调试 Deno 应用？

在 WebStorm 中调试 Deno 应用，其实并不难，关键在于配置好调试环境。简单来说，你需要创建一个 Deno 运行配置，并确保 WebStorm 能够正确识别 Deno 的可执行文件。

解决方案

安装 Deno 插件： 首先，确保你在 WebStorm 中安装了 Deno 插件。打开
```
File
```
登录后复制
->
```
Settings
```
登录后复制
(或
```
WebStorm
```
登录后复制
->
```
Preferences
```
登录后复制
on macOS)，选择
```
Plugins
```
登录后复制
，搜索
```
Deno
```
登录后复制
并安装。安装完成后重启 WebStorm。
创建 Deno 运行配置： 打开
```
Run
```
登录后复制
->
```
Edit Configurations...
```
登录后复制
。点击
```
+
```
登录后复制
号，选择
```
Deno
```
登录后复制
。
配置运行配置：
- Name: 给你的配置起一个有意义的名字，比如 "Debug Deno App"。
- Deno executable: 指定 Deno 可执行文件的路径。如果你已经将 Deno 添加到系统环境变量中，可以直接输入
```
Deno
```
  登录后复制
  。否则，你需要提供 Deno 可执行文件的完整路径。
- Script: 指定你要运行的 Deno 脚本文件。点击右侧的浏览按钮，选择你的
```
.ts
```
  登录后复制
  或
```
.js
```
  登录后复制
  文件。
- Parameters: 在这里添加任何你需要的 Deno 命令行参数。例如，如果你需要允许网络访问，可以添加
```
--allow-net
```
  登录后复制
  。如果要允许读取文件，可以添加
```
--allow-read
```
  登录后复制
  。多个参数之间用空格分隔。
- Working directory: 指定 Deno 脚本的工作目录。这通常是你的项目根目录。
- Environment variables: 如果你的 Deno 应用需要任何环境变量，可以在这里设置。
应用并保存配置： 确保所有配置都正确后，点击
```
Apply
```
登录后复制
和
```
OK
```
登录后复制
保存你的运行配置。
设置断点并调试： 在你的 Deno 脚本中设置断点。然后，选择你刚刚创建的运行配置，点击
```
Debug
```
登录后复制
按钮开始调试。WebStorm 会在断点处暂停执行，你可以检查变量的值，单步执行代码等等。

Deno 调试配置常见问题排查

如果你在配置 Deno 调试时遇到问题，可能是以下原因：

Deno 可执行文件路径不正确： 检查你指定的 Deno 可执行文件路径是否正确。可以使用
```
where deno
```
登录后复制
(Windows) 或
```
which deno
```
登录后复制
(macOS/Linux) 命令来查找 Deno 的安装路径。
缺少必要的权限： Deno 默认情况下是安全的，需要显式地授予权限。确保你已经为你的脚本添加了必要的权限参数，例如
```
--allow-net
```
登录后复制
，
```
--allow-read
```
登录后复制
，
```
--allow-write
```
登录后复制
等。
Deno 插件未正确安装： 确保 Deno 插件已经正确安装并启用。尝试重新安装插件并重启 WebStorm。
版本冲突： 检查你的 Deno 版本和 WebStorm Deno 插件版本是否兼容。尝试更新 Deno 或插件到最新版本。
代码错误： 确保你的 Deno 代码没有语法错误或其他运行时错误。WebStorm 会在控制台中显示错误信息。

如何使用 WebStorm 的 Deno 调试器进行远程调试？

Deno 本身支持远程调试，WebStorm 也可以利用这个特性进行远程调试。

启动 Deno 进程时启用调试器： 使用
```
--inspect-brk
```
登录后复制
或
```
--inspect
```
登录后复制
参数启动你的 Deno 进程。例如：

AppMall应用商店
AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情
```
deno run --inspect-brk --allow-net main.ts
```
登录后复制
```
--inspect-brk
```
登录后复制
会在脚本的第一行暂停执行，等待调试器连接。
```
--inspect
```
登录后复制
则不会暂停，调试器可以稍后连接。
在 WebStorm 中配置远程调试： 打开
```
Run
```
登录后复制
->
```
Edit Configurations...
```
登录后复制
。点击
```
+
```
登录后复制
号，选择
```
Attach to Node.js/Chrome
```
登录后复制
。
配置远程调试参数：
- Host: 如果 Deno 进程运行在本地，则设置为
```
localhost
```
  登录后复制
  或
```
127.0.0.1
```
  登录后复制
  。如果运行在远程服务器上，则设置为服务器的 IP 地址或域名。
- Port: 默认情况下，Deno 使用 9229 端口进行调试。如果你在启动 Deno 进程时指定了不同的端口，请在这里修改。
- Attach to: 选择
```
Chrome or Node.js > 6.3
```
  登录后复制
  。
设置断点并连接： 在你的 WebStorm 项目中打开对应的 Deno 脚本文件，设置断点。然后，点击
```
Debug
```
登录后复制
按钮开始调试。WebStorm 会连接到 Deno 进程，并在断点处暂停执行。

WebStorm Deno 调试中如何使用 Sourcemaps？

当你的 Deno 代码经过转换或压缩后，Sourcemaps 可以帮助你在调试时将代码映射回原始的源代码。Deno 默认支持 Sourcemaps，WebStorm 也能很好地处理它们。

确保你的构建工具生成 Sourcemaps： 如果你使用了 TypeScript 或其他需要编译的语言，确保你的构建工具配置正确，能够生成 Sourcemaps 文件（通常是
```
.map
```
登录后复制
文件）。
WebStorm 会自动加载 Sourcemaps： 只要 Sourcemaps 文件与对应的 JavaScript 文件在同一个目录下，WebStorm 会自动加载它们。你不需要进行额外的配置。
调试时查看原始代码： 在调试过程中，WebStorm 会自动将断点和堆栈信息映射回原始的 TypeScript 或其他源代码。你可以像调试普通代码一样调试你的 Deno 应用。

如果在调试过程中遇到 Sourcemaps 相关的问题，可以尝试以下方法：

检查 Sourcemaps 文件是否存在： 确保 Sourcemaps 文件已经生成，并且与对应的 JavaScript 文件在同一个目录下。
清除 WebStorm 的缓存： 有时候 WebStorm 的缓存可能会导致 Sourcemaps 加载失败。尝试清除 WebStorm 的缓存并重启。
检查构建工具的配置： 确保你的构建工具配置正确，能够生成有效的 Sourcemaps 文件。

以上就是如何在 WebStorm 中调试 Deno 应用？的详细内容，更多请关注php中文网其它相关文章！