浏览器开发者工具是学习和调试JavaScript最重要的工具之一。现代浏览器都内置了强大的开发者工具。
| 浏览器 | 快捷键 | 菜单路径 |
|---|---|---|
| Chrome | F12 或 Ctrl+Shift+I | 更多工具 → 开发者工具 |
| Firefox | F12 或 Ctrl+Shift+I | 浏览器工具 → Web开发者工具 |
| Edge | F12 | 更多工具 → 开发者工具 |
| Safari | Cmd+Option+I | 开发 → 显示Web检查器 |
东巴文提示：Safari需要在"偏好设置 → 高级"中勾选"在菜单栏中显示开发菜单"才能使用开发者工具。
控制台是JavaScript开发中最常用的面板：
console.log("普通日志信息");
console.info("提示信息");
console.warn("警告信息");
console.error("错误信息");
console.table([
{ name: "东巴文", age: 1 },
{ name: "JavaScript", age: 28 }
]);
console.group("用户信息");
console.log("姓名：东巴文");
console.log("年龄：1岁");
console.groupEnd();
console.time("循环耗时");
for (let i = 0; i < 1000000; i++) {}
console.timeEnd("循环耗时");
东巴文点评：熟练使用console的各种方法，能让调试工作事半功倍。
元素面板用于查看和修改DOM结构：
源代码面板是调试JavaScript的核心：
调试功能：
网络面板用于查看网络请求：
| 功能 | 说明 | 东巴文用途 |
|---|---|---|
| 请求列表 | 查看所有网络请求 | 分析API调用 |
| 请求详情 | 查看请求头、响应头 | 调试接口问题 |
| 时间线 | 查看请求耗时 | 性能优化 |
应用面板用于查看存储和应用信息：
Node.js是JavaScript的运行时环境，让JavaScript可以脱离浏览器运行。
Windows系统：
node -v # 显示Node.js版本
npm -v # 显示npm版本
macOS系统：
brew install node
node -v
npm -v
Linux系统：
# Ubuntu/Debian
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
使用nvm（Node Version Manager）管理多个Node.js版本：
# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
# 安装指定版本
nvm install 18
nvm install 20
# 切换版本
nvm use 18
# 查看已安装版本
nvm list
# 设置默认版本
nvm alias default 20
东巴文建议：开发项目时建议使用LTS版本，学习新特性时可以尝试最新版本。
国内用户可以配置淘宝镜像加速下载：
npm config set registry https://registry.npmmirror.com
npm config get registry
# 使用nrm管理镜像源
npm install -g nrm
nrm ls
nrm use taobao
echo "console.log('你好，东巴文！');" > test.js
node test.js
Node.js提供了REPL（Read-Eval-Print-Loop）交互环境：
node
> 1 + 1
2
> const name = "东巴文"
undefined
> console.log(name)
东巴文
undefined
> .exit
东巴文提示：REPL适合快速测试代码片段，是学习JavaScript的好帮手。
Visual Studio Code是最流行的JavaScript开发编辑器。
安装VS Code：
必装扩展：
| 扩展名 | 功能 | 东巴文评价 |
|---|---|---|
| ESLint | 代码检查 | ⭐⭐⭐⭐⭐ 必装 |
| Prettier | 代码格式化 | ⭐⭐⭐⭐⭐ 必装 |
| JavaScript (ES6) snippets | 代码片段 | ⭐⭐⭐⭐ 推荐 |
| Path Intellisense | 路径提示 | ⭐⭐⭐⭐ 推荐 |
settings.json配置：
{
"editor.fontSize": 14,
"editor.tabSize": 4,
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
| 编辑器 | 特点 | 东巴文评价 |
|---|---|---|
| WebStorm | JetBrains出品，功能强大 | 💼 企业级开发 |
| Sublime Text | 轻量快速 | ⚡ 快速编辑 |
npm（Node Package Manager）是JavaScript的包管理工具。
mkdir my-project
cd my-project
npm init
npm init -y # 快速初始化
package.json结构：
{
"name": "my-project",
"version": "1.0.0",
"description": "东巴文示例项目",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\"",
"start": "node index.js"
},
"keywords": [],
"author": "东巴文",
"license": "ISC",
"dependencies": {},
"devDependencies": {}
}
npm install lodash
npm i lodash
npm install --save-dev webpack
npm i -D webpack
npm install -g nodemon
npm install lodash@4.17.21
npm list
npm list --depth=0
npm outdated
npm update lodash
npm uninstall lodash
npm info lodash
npm run test
npm start
package-lock.json文件记录了实际安装的依赖版本：
东巴文提醒：一定要将package-lock.json提交到版本控制，确保团队成员安装相同版本的依赖。
| 包管理器 | 特点 | 东巴文评价 |
|---|---|---|
| yarn | Facebook出品，速度快 | 🚀 推荐使用 |
| pnpm | 节省磁盘空间 | 💾 大项目推荐 |
| bun | 新兴工具，极快 | ⚡ 值得尝试 |
# yarn使用
npm install -g yarn
yarn init
yarn add lodash
yarn install
# pnpm使用
npm install -g pnpm
pnpm init
pnpm add lodash
pnpm install
最简单直接的调试方式：
function calculateTotal(prices) {
console.log("输入数据：", prices);
let total = 0;
for (let price of prices) {
console.log("当前价格：", price);
total += price;
}
console.log("计算结果：", total);
return total;
}
calculateTotal([10, 20, 30]);
console技巧：
console.log("用户 %s 的年龄是 %d", "东巴文", 1);
const user = { name: "东巴文", age: 1 };
console.log("用户信息：%o", user);
console.assert(1 === 2, "1不等于2");
console.clear();
console.trace();
设置断点：
调试控制：
| 按钮 | 快捷键 | 功能 |
|---|---|---|
| Resume | F8 | 继续执行 |
| Step Over | F10 | 单步跳过 |
| Step Into | F11 | 单步进入 |
| Step Out | Shift+F11 | 跳出函数 |
在代码中添加debugger语句，执行时会自动暂停：
function findMax(arr) {
let max = arr[0];
for (let i = 1; i < arr.length; i++) {
debugger;
if (arr[i] > max) {
max = arr[i];
}
}
return max;
}
东巴文提醒：调试完成后记得删除debugger语句，避免影响生产环境。
在VS Code中直接调试JavaScript：
创建launch.json：
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "启动程序",
"program": "${workspaceFolder}/index.js"
}
]
}
调试步骤：
node --inspect index.js
node --inspect-brk index.js
# 然后在Chrome中打开 chrome://inspect
完成以下检查，确保开发环境配置正确：
| 检查项 | 命令 | 预期结果 |
|---|---|---|
| Node.js安装 | node -v |
显示版本号 |
| npm安装 | npm -v |
显示版本号 |
| VS Code安装 | 打开VS Code | 正常启动 |
| 浏览器开发者工具 | 按F12 | 打开开发者工具 |
| 控制台测试 | 输入1+1 |
输出2 |
东巴文祝贺：如果所有检查项都通过，你的JavaScript开发环境已经准备就绪！
环境搭建完成后，让我们开始编写第一个JavaScript程序：
东巴文（db-w.cn） - 让编程学习更简单
🛠️ 东巴文寄语：工欲善其事，必先利其器。一个良好的开发环境能让你事半功倍。在 db-w.cn，我们不仅教你写代码，更教你如何高效地写代码！