开发环境搭建

编写和运行 JavaScript 只需一个浏览器，但一个顺手的开发环境能显著提升学习与工作效率。本篇文章从 Node.js 安装讲起，依次介绍版本管理工具、VSCode 编辑器、npm 包管理、浏览器开发者工具以及常用的调试手段。

Node.js 安装

Node.js 是一个基于 V8 引擎的 JavaScript 运行时，让 JavaScript 可以在浏览器之外执行。安装 Node.js 后会自动附带 npm（包管理器）与 npx（包执行器）。

安装方式对比

方式	适用场景	优点	缺点
官网安装包	快速上手	安装简单，自带 npm	无法便捷切换版本
nvm-windows	日常开发	可自由切换 Node 版本	需额外安装配置
包管理器安装	已有包管理器环境	更新方便	版本可能滞后

最简单的方式是访问 Node.js 官网（nodejs.org）下载安装包。官网首页会提供两个版本：**LTS（长期支持版）**与 Current（当前版）。

版本	说明	适用场景
LTS	长期支持版，偶数版本号，如 20.x、22.x	稳定性优先，生产环境与多数开发场景
Current	最新版，奇数版本号，率先获得新特性	尝鲜新语法，测试新 API

LTS 版本每两年发布一个主版本，提供长达 30 个月的安全维护，是绝大多数项目的默认选择。命令行中可以用 node -v 和 npm -v 验证安装是否成功：

bash

node -v
# 输出示例：v22.12.0

npm -v
# 输出示例：10.9.0

版本管理：nvm-windows

不同项目对 Node 版本的要求可能不同（例如老项目依赖旧版本，新项目需要新特性），此时推荐使用 nvm-windows 进行多版本管理。

安装与常用命令

nvm-windows 需要单独下载安装程序（github.com/coreybutler/nvm-windows 的 Releases 页面），安装完成后以管理员身份运行命令提示符，常用命令如下：

bash

nvm version                    # 查看 nvm 版本
nvm list                       # 列出已安装的 Node 版本
nvm list available             # 列出可安装的版本
nvm install 22.12.0            # 安装指定版本
nvm install lts                # 安装最新 LTS 版本
nvm use 22.12.0                # 切换到指定版本
nvm uninstall 22.12.0          # 卸载指定版本

切换版本后执行 node -v 确认生效。注意 nvm-windows 与官方安装包存在冲突，安装 nvm 前应先卸载已装的 Node.js。

npx 是什么

npm 5.2 起自带的 npx 用于执行项目本地或临时安装的命令行工具，无需全局安装即可运行：

bash

npx create-vite my-app        # 直接运行脚手架工具
npx http-server .             # 启动本地静态服务器
npx --version                 # 查看 npx 版本

npx 会优先使用项目 node_modules 中的本地命令，找不到时再从 npm 仓库临时下载，用完即弃，不会污染全局环境。

VSCode 编辑器配置

Visual Studio Code 是 JavaScript 开发的事实标准编辑器，安装 Node.js 后只需安装 VSCode 即可开始编写代码。Windows 安装勾选"添加到 PATH"，再在设置中开启自动保存即可。

插件	作用
ESLint	代码风格检查，实时标出潜在错误与不符合规范之处
Prettier - Code formatter	统一代码格式，保存时自动格式化
Error Lens	把报错信息直接显示在代码行内，无需悬停查看
Live Server	一键启动本地静态服务器，修改代码自动刷新浏览器
JavaScript (ES6) code snippets	常用代码片段补全
GitLens	查看代码提交历史与作者信息
Code Runner	在编辑器内直接运行单个 JS 文件

settings.json 常用配置

json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.renderWhitespace": "all",
  "files.autoSave": "afterDelay",
  "eslint.validate": ["javascript", "javascriptreact"]
}

配置完成后，编写代码时按下 Ctrl+S 保存即可自动格式化，按下 Ctrl+打开集成终端运行node 文件名.js`。

npm 常用命令

npm 是 Node.js 自带的包管理器，package.json 文件记录项目的依赖与脚本。初始化新项目：

bash

npm init -y                 # 快速生成 package.json
npm install lodash          # 安装依赖（写入 dependencies）
npm install -D jest         # 安装开发依赖（写入 devDependencies）
npm install -g nodemon      # 全局安装
npm uninstall lodash        # 卸载依赖
npm update                  # 更新依赖到允许的最新版本
npm ls                      # 查看已安装依赖树
npm run dev                 # 运行 package.json 中 scripts.dev 定义的任务
npm audit                   # 检查依赖安全漏洞

命令	说明
`npm install`	按 package.json 安装全部依赖，简写 `npm i`
`npm install -D`	安装仅在开发阶段使用的依赖，简写 `npm i -D`
`npm install -g`	全局安装，命令可在任意目录执行
`npm run <script>`	执行 package.json 中的脚本
`npm publish`	发布包到 npm 仓库

安装依赖后项目目录会生成 node_modules 文件夹，该目录体积大、可由 package.json 重建，通常加入 .gitignore 不提交到版本库。

浏览器开发者工具

现代浏览器（Chrome、Edge、Firefox）都内置开发者工具，按 F12 或 Ctrl+Shift+I 打开。这是调试前端代码最核心的工具集。

面板	用途
Elements	查看与修改 DOM 结构、CSS 样式，实时预览效果
Console	运行 JavaScript 表达式，查看 console 输出与报错
Sources	查看页面加载的源码文件，设置断点进行调试
Network	查看所有网络请求的地址、状态码、耗时与响应内容
Performance	录制页面运行过程，分析性能瓶颈与函数耗时
Application	查看 localStorage、cookie、IndexedDB 等存储数据

在 Console 面板输入 console.log("hello") 回车即可运行代码；输入 1 + 2 会立即显示结果 3。Console 还支持自动补全与多行输入（Shift+Enter 换行），是日常验证语法的便捷场所。

Network 面板常用来排查接口问题：按状态码筛选请求、查看请求头与响应体、在"Timing"标签页分析耗时。Performance 面板则用于录制页面交互过程，火焰图中过长的高亮条往往对应性能瓶颈。

运行 JavaScript 的三种方式

方式一：浏览器控制台

打开任意网页按 F12 进入 Console 面板，直接输入代码回车执行。适合快速验证语法与 API 行为，无需任何安装。

方式二：Node REPL

在命令行输入 node 不带参数即可进入 REPL（交互式执行环境），输入表达式回车立即得到结果，输入 .exit 或按两次 Ctrl+C 退出：

bash

node
> 1 + 2
3
> const arr = [1, 2, 3]
undefined
> arr.map(x => x * x)
[ 1, 4, 9 ]
> .exit

方式三：脚本文件与 HTML 页面

把代码保存为 .js 文件后用 Node 执行：

bash

node app.js

浏览器中运行则需通过 HTML 引入。新建 index.html，写入：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <body>
    <h1 id="title">JavaScript 入门</h1>
    <script>
      document.getElementById("title").textContent = "Hello, JavaScript!";
    </script>
  </body>
</html>

双击打开该 HTML 文件，或使用 VSCode 的 Live Server 插件启动本地服务（推荐后者，Live Server 支持自动刷新）。在 index.html 同目录新建 app.js 并把 <script> 标签替换为 <script src="app.js"> 即可把脚本独立到外部文件。

调试技巧

console 系列输出

方法	用途	示例输出
`console.log()`	普通日志输出	文本与变量值
`console.info()`	信息提示，带蓝色图标	同 log，语义区分
`console.warn()`	警告，黄色背景	提示潜在问题
`console.error()`	错误，红色背景并带堆栈	定位异常
`console.table()`	以表格展示数组/对象	浏览对象数组更直观
`console.time()` / `timeEnd()`	统计代码执行耗时	输出毫秒数
`console.assert()`	条件断言，条件为假才输出	调试状态检查
`console.group()`	分组收纳日志	折叠/展开日志组
`console.count()`	统计调用次数	观察执行频率

javascript

const users = [
  { name: "张三", age: 18 },
  { name: "李四", age: 22 },
];
console.table(users);           // 表格展示

console.time("循环耗时");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("循环耗时");     // 输出：循环耗时: 3.5ms

console.assert(2 > 3, "断言失败：2 不大于 3");  // 输出断言失败信息

断点调试与 debugger 语句

断点调试是最强大的调试手段，浏览器与 VSCode 均支持。以 Chrome 为例：在 Sources 面板打开源码，点击行号设置断点，刷新页面后执行到该行会暂停，此时可以单步执行（F10 跳过、F11 进入）、查看作用域内所有变量、在 Watch 面板添加监视表达式。

debugger 语句是在代码中硬编码断点：执行到该行时运行环境会自动暂停（前提是开发者工具处于打开状态）：

javascript

function calculate(price, count) {
  const total = price * count;
  debugger;                       // 运行到此暂停，可检查 total
  return total;
}
calculate(10, 3);

Node.js 中的调试

Node.js 调试方式有三种：

bash

# 方式一：node inspect 进入调试模式
node inspect app.js

# 方式二：--inspect 启动调试端口，配合 Chrome 的 chrome://inspect 页面
node --inspect app.js

# 方式三：--inspect-brk 启动即暂停在第一行，方便从头逐步执行
node --inspect-brk app.js

VSCode 中更简单：在 .js 文件行号左侧点击设置断点，按 F5 选择 Node.js 环境即可启动调试会话，支持变量监视、调用栈查看与条件断点。

常用调试套路

二分定位法：报错时先在可疑代码段中间加 console.log 输出中间变量，确认问题在前半段还是后半段，逐步缩小范围。
检查调用栈：错误堆栈从下往上读，第一行是抛出位置，往上是逐层调用方。
条件断点：循环中只在特定条件满足时暂停，右键断点设置条件表达式，如 i === 99。
善用 console.table：排查数组与对象数据时，表格化输出远比逐条 log 直观。

小结

一套完整的 JavaScript 开发环境包含四个部分：Node.js（运行时，推荐搭配 nvm-windows 管理版本）、VSCode（编辑器，配合 ESLint、Prettier、Live Server 等插件）、npm（包管理，掌握 install/run/uninstall 等核心命令）以及浏览器开发者工具（Console、Sources、Network、Performance 四个高频面板）。调试时优先使用断点与 debugger 语句，配合 console 系列方法输出关键变量，能够快速定位绝大多数问题。

开发环境搭建 ​

Node.js 安装 ​

安装方式对比 ​

版本管理：nvm-windows ​

安装与常用命令 ​

npx 是什么 ​

VSCode 编辑器配置 ​

推荐插件 ​

settings.json 常用配置 ​

npm 常用命令 ​

浏览器开发者工具 ​

运行 JavaScript 的三种方式 ​

方式一：浏览器控制台 ​

方式二：Node REPL ​

方式三：脚本文件与 HTML 页面 ​

调试技巧 ​

console 系列输出 ​

断点调试与 debugger 语句 ​

Node.js 中的调试 ​

常用调试套路 ​

小结 ​

开发环境搭建

Node.js 安装

安装方式对比

版本管理：nvm-windows

安装与常用命令

npx 是什么

VSCode 编辑器配置

推荐插件

settings.json 常用配置

npm 常用命令

浏览器开发者工具

运行 JavaScript 的三种方式

方式一：浏览器控制台

方式二：Node REPL

方式三：脚本文件与 HTML 页面

调试技巧

console 系列输出

断点调试与 debugger 语句

Node.js 中的调试

常用调试套路

小结