VS Code JavaScript 调试器使用教程

2024-09-15 03:24:08作者：谭伦延

1. 项目介绍

vscode-js-debug 是微软开发的一个基于 DAP（Debug Adapter Protocol）的 JavaScript 调试器，广泛应用于 Visual Studio Code 和 Visual Studio 中。它支持调试 Node.js、Chrome、Edge、WebView2、VS Code 扩展、Blazor、React Native 等多种环境。作为 VS Code 的默认 JavaScript 调试器，vscode-js-debug 提供了丰富的调试功能，包括自动附加调试、性能分析、源码映射支持等。

2. 项目快速启动

安装

如果你使用的是 Visual Studio Code，vscode-js-debug 已经默认安装。如果你需要手动安装或使用预发布版本，可以按照以下步骤操作：

打开 VS Code 的扩展视图（快捷键：Ctrl+Shift+X）。
搜索 @builtin @id:ms-vscode.js-debug。
右键点击 JavaScript 调试器扩展，选择“禁用”。
搜索 @id:ms-vscode.js-debug-nightly，安装该扩展。

配置调试

以下是一个简单的 Node.js 调试配置示例：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动程序",
      "program": "${workspaceFolder}/app.js"
    }
  ]
}

将上述配置保存为 .vscode/launch.json 文件，然后在 VS Code 中按 F5 启动调试。

3. 应用案例和最佳实践

调试 Node.js 应用

假设你有一个简单的 Node.js 应用 app.js：

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

你可以通过以下步骤进行调试：

在 app.js 中设置断点。
按 F5 启动调试。
访问 http://127.0.0.1:3000/，调试器会在断点处暂停。

调试浏览器应用

假设你有一个简单的 HTML 文件 index.html：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>调试示例</title>
</head>
<body>
  <script>
    function greet() {
      debugger;
      console.log('Hello, World!');
    }
    greet();
  </script>
</body>
</html>

你可以通过以下步骤进行调试：

在 index.html 中设置断点。
在 VS Code 中创建一个 JavaScript 调试终端（快捷键：Ctrl+Shift+P，然后输入 Debug: Create JavaScript Debug Terminal）。
在终端中运行 live-server 或其他本地服务器工具。
访问 http://127.0.0.1:5500/index.html，调试器会在断点处暂停。

4. 典型生态项目

1. Node.js

vscode-js-debug 是调试 Node.js 应用的首选工具。它支持自动附加调试、性能分析、源码映射等功能。

2. Chrome 和 Edge

vscode-js-debug 支持调试 Chrome 和 Edge 浏览器中的 JavaScript 代码。你可以通过配置 launch.json 文件来启动浏览器并附加调试器。

3. React Native

vscode-js-debug 与 React Native 扩展结合使用，可以调试 React Native 应用。你可以通过配置 launch.json 文件来启动 React Native 应用并附加调试器。

4. Blazor

vscode-js-debug 支持调试 Blazor 应用。你可以通过配置 launch.json 文件来启动 Blazor 应用并附加调试器。

通过以上教程，你可以快速上手使用 vscode-js-debug 进行 JavaScript 调试，并了解其在不同环境中的应用。

登录后查看全文

VS Code JavaScript 调试器使用教程

1. 项目介绍

2. 项目快速启动

安装

配置调试

3. 应用案例和最佳实践

调试 Node.js 应用

调试浏览器应用

4. 典型生态项目

1. Node.js

2. Chrome 和 Edge

3. React Native

4. Blazor

热门内容推荐

最新内容推荐

项目优选

VS Code JavaScript 调试器使用教程

1. 项目介绍

2. 项目快速启动

安装

配置调试

3. 应用案例和最佳实践

调试 Node.js 应用

调试浏览器应用

4. 典型生态项目

1. Node.js

2. Chrome 和 Edge

3. React Native

4. Blazor

相关内容推荐

热门内容推荐

最新内容推荐

项目优选