VSCode运行与调试JavaScript代码的两种配置方法

VSCode调试JavaScript代码概述

初次尝试在VSCode中编写并运行JavaScript代码时，可能会发现直接执行并不像其他语言那样简单，通常需要配置launch.json文件才能顺利调试。本文总结了两种在VSCode中成功编译并调试JavaScript代码的方法，供开发者参考。

方法一：Node.js环境下调试.js文件

方法一：在.js后缀文件中编写JavaScript代码。

1. 环境配置步骤如下：

(1) 首先需安装Node.js。可通过搜索引擎访问Node.js官网，下载并安装适合操作系统的安装包。安装完成后，在命令行输入node -v和npm -v命令以验证安装是否成功。

(2) 建议在VSCode中安装Code Runner扩展，以便快速运行代码。

2. 新建一个.js后缀的文件，例如hello_world.js，并在其中输入以下代码：

var a = 1;
var b = 2;
console.log("hello world");
console.log("a = ", a);
console.log("b = ", b);

3. 运行程序的方式有以下几种：

(1) 若已安装Code Runner扩展，可直接在代码编辑区右键选择Run Code选项，运行结果将显示在OUTPUT窗口中。

(2) 或者，在VSCode底部的TERMINAL终端中输入node hello_world.js命令，同样可以查看运行结果。

(3) 若希望按下F5键进行运行并进入调试模式，则必须正确配置launch.json文件。首先点击菜单栏Run -> Open Configurations，生成或编辑配置文件，内容如下：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",

  "configurations": [{
    "name": "Launch",
    "type": "node",
    "request": "launch",
    "program": "${workspaceRoot}/hello_world.js",
    },
  ]
}

请注意，上述配置中第11行的文件名需替换为你实际使用的.js文件名，其中workspaceRoot变量代表当前工作目录路径。

配置完成后，按下F5键启动调试时，务必在弹出的配置列表中选择名为Launch（与配置文件中name字段同名）的配置文件。完成launch.json配置后，你还可以在.js文件中设置断点进行逐步调试，具体效果如下图所示：

方法二：HTML环境中调试JavaScript代码

方法二：在.html后缀文件中编写JavaScript代码。

1. 环境配置步骤如下：

(1) 确保已安装Chrome浏览器，这是前端开发常用的标准浏览器。

(2) 在VSCode中安装Debugger for chrome和open in browser两个扩展插件。

(3) 依次点击File -> Preferences -> Settings，在搜索框中输入breakpoints，找到Debug: Allow Breakpoints Everywhere选项并勾选。此设置允许在HTML文件中设置断点，是调试HTML内嵌JS代码的前提。

2. 新建一个.html后缀的文件，例如a.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. 运行程序的方式如下：

(1) 按下F5键开始运行并调试。此过程涉及launch.json文件的配置，首先点击Run -> Open Configurations，生成或编辑配置文件，内容如下：

{
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}"
    },
    {
      "type": "chrome",
      "request": "launch",
      "name": "使用本地chrome调试",
      "file": "${file}",
      "port":8000,
    }
  ]
}

在script代码部分设置断点后，按下F5启动调试。点击网页中的Try it按钮，即可在调试器中查看中间结果，具体界面如下图所示：

(2) 此外，可通过鼠标右键点击Open in Other Browsers选项，选择一个浏览器查看页面效果，再点击网页中的Try it按钮即可调用script中的JS代码结果。你也可以在VSCode中设置默认浏览器，从而使用Open in Default Browsers功能，或在默认浏览器中直接查看结果（快捷键Alt + B）。需要注意的是，这种方法无法进行断点调试，且必须在配置好launch.json并成功按下F5之后才能使用。

（备注：若需设置VSCode默认浏览器，可依次点击File -> Preferences -> Settings，输入default browser，找到Open-in-browser : Default选项。例如，此处设置为Google Chrome。）

以上即为在VSCode中运行和调试JavaScript代码的两种主要方法及相关配置说明，希望对各位开发者有所帮助。