2. 开发环境搭建（零配置，5 分钟搞定）

在开始编写 JavaScript 代码之前，我们需要搭建一个适合的开发环境。本章节将带你快速完成环境搭建，让你可以立即开始编码。

2.1 浏览器控制台：最简单的 JS 运行工具

浏览器控制台是学习 JavaScript 的最简单工具，无需安装任何软件：

打开浏览器控制台的方法

Chrome：
- 按 F12 键
- 或右键点击页面，选择「检查」，然后切换到「控制台」选项卡
Firefox：
- 按 F12 键
- 或右键点击页面，选择「检查元素」，然后切换到「控制台」选项卡
Edge：
- 按 F12 键
- 或右键点击页面，选择「检查」，然后切换到「控制台」选项卡

在控制台中运行 JavaScript 代码

在控制台中输入 JavaScript 代码
按 Enter 键执行代码
查看执行结果

例如，输入 console.log('Hello, World!'); 并按 Enter 键，你会看到输出 Hello, World!

2.2 VS Code 安装 + 基础配置（新手专用插件）

安装 VS Code

访问 VS Code 官网
下载适合你操作系统的安装包
运行安装包，按照提示完成安装

基础配置

设置字体大小：点击「文件」→「首选项」→「设置」，搜索「font size」，调整字体大小
设置自动保存：搜索「auto save」，选择「afterDelay」
设置主题：点击「文件」→「首选项」→「颜色主题」，选择喜欢的主题

2.3 第一个 HTML+JS 文件（手把手写代码）

现在，让我们创建你的第一个 HTML+JS 文件：

在 VS Code 中，点击「文件」→「新建文件」
输入以下代码：

html

<!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>
</head>
<body>
    <h1>欢迎学习 JavaScript！</h1>
    <p>这是一个简单的 HTML 页面，包含 JavaScript 代码。</p>
    
    <script>
        // 这里是 JavaScript 代码
        console.log('Hello, World!');
        alert('欢迎来到 JavaScript 的世界！');
    </script>
</body>
</html>

点击「文件」→「保存」，将文件命名为 index.html
选择一个文件夹保存文件

2.4 代码运行与调试（F12 开发者工具使用）

运行 HTML+JS 文件

在 VS Code 中，右键点击 index.html 文件，选择「Open with Live Server」
浏览器会自动打开该文件，你会看到一个弹窗，显示「欢迎来到 JavaScript 的世界！」
关闭弹窗后，页面会显示「欢迎学习 JavaScript！」的标题

使用开发者工具调试

在浏览器中，按 F12 打开开发者工具
切换到「控制台」选项卡，你会看到 Hello, World! 的输出
切换到「元素」选项卡，可以查看和修改 HTML 结构
切换到「网络」选项卡，可以查看网络请求
切换到「源代码」选项卡，可以设置断点调试 JavaScript 代码

常见问题及解决方法

页面没有显示：检查文件路径是否正确，确保文件扩展名为 .html
弹窗没有出现：检查 JavaScript 代码是否有语法错误，查看控制台是否有错误信息
Live Server 没有反应：确保已安装 Live Server 插件，重启 VS Code 后再试

小结

搭建开发环境是学习 JavaScript 的第一步，通过本章节的学习，你已经掌握了：

如何使用浏览器控制台运行 JavaScript 代码
如何安装和配置 VS Code
如何创建和运行 HTML+JS 文件
如何使用浏览器开发者工具调试代码

现在，你已经准备好开始编写 JavaScript 代码了。在接下来的章节中，我们将学习编写你的第一个 JavaScript 程序，以及掌握 JavaScript 的核心语法。

2. 开发环境搭建（零配置，5 分钟搞定） ​

2.1 浏览器控制台：最简单的 JS 运行工具 ​

打开浏览器控制台的方法 ​

在控制台中运行 JavaScript 代码 ​

2.2 VS Code 安装 + 基础配置（新手专用插件） ​

安装 VS Code ​

推荐插件 ​

基础配置 ​

2.3 第一个 HTML+JS 文件（手把手写代码） ​

2.4 代码运行与调试（F12 开发者工具使用） ​

运行 HTML+JS 文件 ​

使用开发者工具调试 ​

常见问题及解决方法 ​

小结 ​