跳至主要内容

调试你的代码

Deno 支持 Chrome、Edge 和 Node.js 使用的 V8 Inspector 协议。这使得可以使用 Chrome DevTools 或其他支持该协议的客户端（例如 VSCode）调试 Deno 程序成为可能。

要激活调试功能，请使用 --inspect、--inspect-wait 或 --inspect-brk 标志运行 Deno。

--inspect 标志允许在任何时间点附加调试器，--inspect-wait 将等待调试器附加并开始执行代码，而 --inspect-brk 将等待调试器附加并在代码的第一行暂停执行。

⚠️ 如果您使用 --inspect 标志，代码将立即开始执行。如果您的程序很短，您可能没有足够的时间在程序完成执行之前连接调试器。在这种情况下，请尝试使用 --inspect-wait 或 --inspect-brk 标志运行，或在代码末尾添加超时。

Chrome Devtools​

让我们尝试使用 Chrome Devtools 调试程序。为此，我们将使用来自 std 的 file_server.ts，一个静态文件服务器。

使用 --inspect-brk 标志在第一行中断执行

$ deno run --inspect-brk --allow-read --allow-net https://deno.land/[email protected]/http/file_server.ts
Debugger listening on ws://127.0.0.1:9229/ws/1e82c406-85a9-44ab-86b6-7341583480b1
Download https://deno.land/[email protected]/http/file_server.ts
Compile https://deno.land/[email protected]/http/file_server.ts
...

在基于 Chromium 的浏览器（如 Google Chrome 或 Microsoft Edge）中，打开 chrome://inspect 并单击目标旁边的 Inspect

chrome://inspect

打开 DevTools 后，可能需要几秒钟才能加载所有模块。

DevTools opened

您可能会注意到 DevTools 在 file_server.ts 的第一行而不是 _constants.ts 的第一行暂停执行。这是预期的行为，由 JavaScript 中 ES 模块的评估方式引起（_constants.ts 是 file_server.ts 最左侧、最底部的依赖项，因此它首先被评估）。

此时，所有源代码都可以在 DevTools 中使用，因此让我们打开 file_server.ts 并在那里添加一个断点；转到“Sources”窗格并展开树

Open file_server.ts

仔细观察，您会发现每个文件的重复条目；一个以常规方式编写，另一个以斜体显示。前者是编译后的源文件（因此对于 .ts 文件，它将是发出的 JavaScript 源代码），而后者是该文件的源映射。

接下来，在 listenAndServe 方法中添加一个断点

Break in file_server.ts

添加断点后，DevTools 会自动打开源映射文件，这使我们能够逐步浏览包含类型的实际源代码。

现在我们已经设置了断点，我们可以恢复脚本的执行，以便我们可以检查传入的请求。点击“Resume script execution”按钮即可。您可能需要点击两次！

脚本运行后，尝试发送请求并在 Devtools 中检查它

$ curl http://0.0.0.0:4507/

Break in request handling

此时，我们可以内省请求的内容并逐步调试代码。

VSCode​

可以使用 VSCode 调试 Deno。这最好借助官方的 vscode_deno 扩展来完成。有关此扩展的文档，请参见 此处。

JetBrains IDE​

注意：请确保已安装并启用 此 Deno 插件，方法是在“偏好设置/设置” | “插件”中进行操作。有关更多信息，请参见 这篇博文。

您可以通过右键单击要调试的文件并选择“调试 'Deno: <文件名>'”选项来使用 JetBrains IDE 调试 Deno。

Debug file

这将创建一个运行/调试配置，其中未设置任何权限标志。如果您想配置它们，请打开您的运行/调试配置，并将所需的标志添加到“命令”字段中。

其他​

任何实现 DevTools 协议的客户端都应该能够连接到 Deno 进程。