1.4 开发环境：编辑器与开发者工具
1.4 开发环境：编辑器与开发者工具
本节摘要：前端的最小开发环境只有两件家当：一个顺手的文本编辑器，一个带开发者工具的现代浏览器。本节讲编辑器该怎么选怎么配，再带你把开发者工具最常用的面板挨个点亮，最后用控制台完成你的第一段脚本。环境五分钟搭好，但它将陪你走完全册与整个职业生涯。
工位装备清单：两件家当走天下
别的工种开工要装几GB的工具链，前端学徒只需在桌面摆两样东西：文本编辑器用来写三份源文件，现代浏览器既是运行环境又是诊断仪表盘。编辑器没有唯一答案，选型原则只有几条：打开大文件不卡、能装插件、对网页三种语言有语法高亮。目前圈子里最常见的是免费开源的 Visual Studio Code，装上两个扩展即可覆盖本册需求：一个给 HTML 提供标签补全与自动配对，一个让保存文件时自动整理代码格式。Sublime Text、WebStorm 也各有拥趸，工具趁手即可，别在选型上纠结超过一顿饭的功夫。
浏览器建议装一个主流的 Chromium 内核版本（Chrome 或 Edge 均可）。要强调的是：同一份页面在不同内核的浏览器里渲染结果可能不同，这是第 5 章兼容性一节的话题，入门期锁定一个现代浏览器即可，别同时开四五个浏览器自我折磨。
编辑器开工清单（对照勾选）： - 安装 Visual Studio Code 或任意趁手编辑器 - 扩展一：HTML 语法增强（标签自动闭合、配对高亮） - 扩展二：格式化工具（保存时自动统一缩进与换行） - 设置：用空格缩进、文件编码用 UTF-8、关闭制表符混用 - 新建一个文件夹作为看板项目的工作目录，后续文件都放这里
文件组织建议（纯文件夹，不依赖任何构建工具）： - 入口页面文档：承载看板的结构 - 样式文档：承载看板的装修规则 - 脚本文档：承载看板的行为逻辑 - 三份文件用同名前缀放在同一目录，浏览器从入口页面打开
两个清单都不涉及具体路径——文件夹放桌面还是放盘符深处全凭习惯，关键是三份文件待在一起，浏览器从入口页面打开。从下一节起，你写的每个文件都落在这个目录里。
打开仪表盘：开发者工具五面板巡礼
浏览器自带一套完整的车间仪表盘，按浏览器的菜单进入"开发者工具"（快捷键大多是功能键加字母的组合，菜单里都能找到），默认停靠在页面下方。初学者常被它的面板数量吓退，其实日常高频使用的就五块，本册会逐一用到，这里先混个脸熟。
图 1：开发者工具常用面板导览
五块面板各管一段，不必一次全记。有一个所有面板通用的技巧值得现在就掌握：在页面任何元素上右键选择"检查"，开发者工具会跳到元素面板并把该元素高亮在树上——这是你日后排查"这个字为什么是红色"的起手式。元素面板右侧的样式窗格还允许你当场改数值看效果，改坏了刷新页面就复原，因为改的只是浏览器内存里的副本，源文件毫发无损。这种"零成本试错"是样式调试的日常姿势。
再补一个高频入口：开发者工具顶部的设备切换按钮，能把视口伪装成手机宽度——1.3 节的对照实验与 3.6 节的响应式验收都靠它完成，没有真机也能预览窄屏效果。控制台旁的告警图标也值得留意：黄色多是可优化项，红色是实打实的错误，很多事故在变成事故前就在这里挂过号。下面把最常用的操作收进一张速查卡，练一遍就有手感：
仪表盘速查卡（每个都亲手做一次）： - 右键任意元素选检查：直达树上并高亮该元素 - 元素面板按上下方向键：在树上移动，展开折叠看嵌套 - 样式窗格点住数值再按上下方向键：微调数值即时看效果 - 顶部设备图标：切换手机宽度做窄屏预览 - 控制台的清空按钮：排错前来一次干净起点 - 告警图标：打开页面先扫一眼有没有红色错误
这张卡的六件事覆盖了入门期九成的调试动作。它们的共同思想是"先观察、后改动"：树上看看元素在不在、样式窗格看看规则生没生效、控制台看看报没报错，三处都看过了再动手改源文件——比闭着眼改完就刷新碰运气的效率高得多。
第一段脚本：在控制台点亮行为班工位
环境齐了，用一段最小的脚本验证仪表盘。随便打开一个网页，进入控制台面板，光标处直接敲下面几行（一行一回车）：
// 控制台初体验：三行脚本认识输出、计算与改页面 console.log("结构班、样式班、行为班，全员到齐"); // console.log 是行为班往仪表盘写日志的标配手段，排错全靠它 2 + 3 * 10; // 控制台是个即敲即算的计算器，会直接回显表达式的值 document.title = "我被行为班改过了"; // 通过文档对象模型改写当前页面的标题，切回浏览器标签页看看
第三行最有意思：你没动任何源文件，页面的标题却变了——这正是 1.2 节说的"行为班通过合规通道改写骨架"的现场演示。控制台里敲的代码只存在于当前页面的这次生命周期，刷新即逝，所以尽管放心实验。
再演示一个高频排错动作用来收尾：
// 找不到元素？先在控制台里验一验再写进正式脚本 const header = document.querySelector("header"); console.log(header); // 打印出元素对象：说明选择器写得对、元素在树上 // 打印出空值：说明选择器写错，或元素还没被解析到
这种"先在控制台验证一小步，再写进文件一大步"的节奏，是行为班老师傅带新人的第一条规矩。第 4 章会把这套排查方法整理成完整流程，现在先养成手感。
⚠️ 常见坑：把控制台当成正式代码的存放地。控制台代码刷新即逝，写通的逻辑要立刻搬进脚本文档；反过来，页面上线前忘删的调试日志会留在用户的控制台里，养成用完即清理的习惯。
环境验收：动身前的检查
到上岗前的最后一刻，做一次装备验收：编辑器能新建并保存三种文件；浏览器能打开本地页面；开发者工具五块面板都能找到入口；控制台能跑通上面四段演示。全部打勾，你就是一名装备齐全的学徒了。往后每一章的动手环节都不再需要新增任何工具——工厂讲究的是把基本功练到肌肉记忆，而不是收藏工具。
还有一个容易被忽略的建议：给浏览器开一个干净的用户配置或至少收藏一个空白标签页，测试自己的页面时从空白首页开始打开，避免被浏览器插件注入的脚本干扰判断。页面表现诡异、又查不出自己代码的问题时，先想想是不是环境的杂音。
本节要点回顾
- 最小环境：文本编辑器加现代浏览器，两件家当即可开工，选型不必纠结；
- 编辑器配置：语法增强与保存自动格式化两个扩展覆盖本册全部需求；
- 五块面板：元素看树改样式、控制台即敲即试、网络看加载、源代码下断点、应用看存储；
- 起手式：右键检查元素直达树上高亮，样式窗格零成本试错；
- 控制台规矩：先小步验证再写进文件，调试日志用完即清；
- 环境隔离：用干净配置测试，排除插件干扰再怀疑自己。
装备验收完毕，下一章正式换上工装：结构班上岗，亲手搭出看板的骨架。