JavaScript开发环境怎么搭？浏览器控制台与VS Code配置指南

工程实践 适用阶段：初学入门到项目搭建 覆盖工具：Chrome DevTools / Visual Studio Code / Live Server

启动 Chrome、Edge 或 Firefox 浏览器，在任何网页空白处点击鼠标右键，在弹出菜单中选择“检查”（Inspect）。也可以直接使用键盘快捷键：

• Windows / Linux 系统：按下 F12 或 Ctrl + Shift + I
• macOS 系统：按下 Cmd + Option + I

在打开的面板顶部导航栏中，点击切换到 Console（控制台）标签页。

控制台底部会显示一个蓝色或灰色的提示符 >。在此处输入 JavaScript 语句：

const fruits = ['苹果', '香蕉', '橙子'];
fruits.map(item => `新鲜${item}`);

按下 Enter 键，控制台会立刻在其下方显示求值结果：['新鲜苹果', '新鲜香蕉', '新鲜橙子']。

换行技巧：在控制台中直接按 Enter 会立刻执行。如果需要书写多行代码（例如包含循环或函数定义），请按住 Shift + Enter 换行，编辑完毕后再单独按 Enter 执行。

控制台在页面刷新后，已声明的变量和输入的历史代码可能会被清空。如果想在浏览器中编写并保存一段几十行的多行测试代码，可以使用内置的“代码片段”（Snippets）功能：

1. 切换到开发者工具的 Sources（源代码）面板；
2. 在左侧次级折叠栏中找到 Snippets（若未显示，可点击左侧折叠菜单的 >> 展开选择）；
3. 点击 + New snippet，命名为 demo.js；
4. 在中央编辑器区域自由书写多行 JavaScript 代码；
5. 按下 Ctrl + Enter（macOS 为 Cmd + Enter）即可一键运行，输出结果会呈现在下方的 Console 中。

访问 Visual Studio Code 官方网站（code.visualstudio.com）下载对应操作系统（Windows / macOS / Linux）的安装包，按默认指引完成安装。

安装完成后打开软件，点击左侧边栏的“扩展”图标（快捷键 Ctrl + Shift + X / Cmd + Shift + X），在搜索框中检索并安装以下三个核心扩展：

• Live Server（作者 Ritwick Dey）：必装扩展。在本地一键启动小型 HTTP 服务器，代码保存后浏览器自动实时刷新。
• Prettier - Code formatter：主流代码美化工具。规范缩进、引号和分号风格，保持代码整洁。
• Chinese (Simplified) Language Pack（可选）：将 VS Code 界面菜单切换为简体中文。

在电脑硬盘（例如工作文档区）新建一个纯英文命名的文件夹，例如 js-starter。在 VS Code 中点击菜单“文件” > “打开文件夹...”，选择该目录。

推荐遵循清晰的分离式目录结构组织初始文件：

js-starter/
├── index.html        # 页面结构入口
├── css/
│   └── style.css     # 页面样式（可选）
└── js/
    └── main.js       # JavaScript 核心逻辑

新建 index.html 文件，输入 ! 并按下 Tab 键，VS Code 会自动生成符合 HTML5 规范的模板结构。

在引用脚本时，推荐在 <head> 区域通过 defer 属性异步加载，或者放置在 </body> 结束标签的前一行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JavaScript 环境测试</title>
  <!-- 使用 defer 属性，确保 DOM 结构解析完成后再执行 JS -->
  <script src="js/main.js" defer></script>
</head>
<body>
  <h1 id="title">欢迎学习 JavaScript</h1>
  <button id="action-btn">点击测试</button>
</body>
</html>

在 js/main.js 中写入对应的交互代码：

const btn = document.getElementById('action-btn');
const title = document.getElementById('title');

btn.addEventListener('click', () => {
  title.textContent = '按钮已成功触发！当前时间：' + new Date().toLocaleTimeString();
  console.log('用户触发了点击事件');
});

在 VS Code 编辑器中，右键点击 index.html 文件，在上下文菜单中选择 Open with Live Server（快捷键 Alt + L, Alt + O）。

浏览器将自动弹出新窗口，地址栏显示为 http://127.0.0.1:5500/index.html。此时在 VS Code 中修改任何代码并保存（Ctrl + S / Cmd + S），浏览器都会自动刷新呈现最新效果。

避坑建议：日常开发中，始终通过 Live Server 提供的 http://127.0.0.1:5500 协议打开页面，彻底杜绝本地文件协议引发的权限异常。