在JavaScript开发过程中，Visual Studio Code (VSCode) 是一款强大的集成开发环境，它提供了丰富的功能，包括代码编辑、运行和调试。本篇文章将详细介绍如何在VSCode中运行和调试JavaScript代码，分为两种方法：直接在JS文件中编写代码以及在HTML文件中嵌入JavaScript代码。
**方法一：在JS文件中编写JavaScript代码**
1. **环境配置**：
- 确保已经安装了Node.js。你可以访问Node.js官网下载并安装适合你系统的版本。安装完成后，通过命令行输入`node -v`和`npm -v`检查安装是否成功。
- 推荐安装VSCode扩展：Code Runner。它使得直接在VSCode内运行JS文件变得简单。
2. **创建JS文件**：
创建一个名为`hello_world.js`的文件，并添加如下代码：
```javascript
var a = 1;
var b = 2;
console.log("hello world");
console.log("a = ", a);
console.log("b = ", b);
```
3. **运行和调试**：
- 如果已安装Code Runner扩展，只需右键点击文件并选择Run Code，结果将在OUTPUT窗口中显示。
- 使用Terminal，输入`node hello_world.js`运行代码，结果会在终端中输出。
- 若要进行调试，需配置`launch.json`文件。点击Run -> Open Configurations，然后输入以下内容：
```json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch",
"type": "node",
"request": "launch",
"program": "${workspaceRoot}/hello_world.js"
}
]
}
```
记得将第11行的文件名替换为你实际的JS文件名。配置好后，按F5运行，选择与"name"字段匹配的配置（这里是"Launch"），现在可以在JS文件中设置断点进行调试。
**方法二：在HTML文件中编写JavaScript代码**
1. **环境配置**：
- 安装Chrome浏览器，它是前端开发常用的浏览器。
- 在VSCode中安装两个扩展：Debugger for Chrome（用于调试Chrome中的JavaScript代码）和Open in Browser（方便在浏览器中预览HTML文件）。
- 在VSCode设置中，搜索"breakpoints"，开启"Debug: Allow Breakpoints Everywhere"选项，允许在任何文件中设置断点。
2. **创建HTML文件**：
创建一个名为`a.html`的HTML文件，内容如下：
```html
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
console.log("hello world");
document.getElementById("demo").innerHTML = "My First JavaScript Function";
alert("this is a place where can write code.");
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
```
3. **运行和调试**：
- 要在VSCode中调试HTML中的JavaScript代码，首先需要配置`launch.json`文件。打开配置，添加如下配置：
```json
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Chrome against localhost",
"type": "chrome",
"request": "launch",
"url": "file://${workspaceFolder}/a.html",
"webRoot": "${workspaceFolder}",
"sourceMapPathOverrides": {
"webpack:///src/*": "${webRoot}/*"
}
}
]
}
```
这将启动Chrome浏览器并加载HTML文件。
- 按F5运行调试，现在你可以在HTML文件中设置断点，并在VSCode的调试控制台中查看输出。
通过以上步骤，你可以在VSCode中高效地运行和调试JavaScript代码，无论是独立的JS文件还是嵌入在HTML中的脚本。这两种方法都充分利用了VSCode的强大的调试工具，帮助开发者提高开发效率并精确地定位问题。
weixin_466269932022-12-22总算找到了自己想要的资源，对自己的启发很大，感谢分享~
