VS Code 与浏览器开发者工具的高频快捷键，背熟这些，写代码效率翻倍。
新手刚开始写代码，鼠标点来点去效率很低：保存要找菜单、查找要点按钮、缩进要按空格。其实这些动作都有快捷键，背熟之后双手不离键盘，速度会快很多。这篇整理了网页设计最常用的一批快捷键，分三类：VS Code 通用、VS Code 编辑、浏览器开发者工具。
说明：Windows/Linux 用 Ctrl，Mac 用 Cmd，下面统一写 Ctrl，Mac 同学自己替换。
这组是写代码时用得最多的，几乎每分钟都在用。先把这些练熟，效率立刻提一档。
Ctrl + S 保存
Ctrl + Z 撤销
Ctrl + Y 重做（撤销的撤销）
Ctrl + F 当前文件查找
Ctrl + H 查找并替换
Ctrl + D 选中下一个相同的词（多光标）
Ctrl + / 注释/取消注释当前行
Alt + ↑ / ↓ 整行上移/下移
Shift + Alt + ↓ 复制当前行到下一行
Ctrl + X 剪切整行（没选中时）
Ctrl + C 复制整行（没选中时）
Ctrl + V 粘贴
Ctrl + A 全选
Ctrl + W 关闭当前标签页其中 Ctrl + D 是新手最该练的一个：按一次选中下一个相同单词，再按一次选中第三个，可以同时改多处。改 class 名、批量替换变量的时候特别好用。
--- Ctrl + D 多选示例 ---
<div class="card">卡片一</div>
<div class="card">卡片二</div>
<div class="card">卡片三</div>
光标停在第一个 card 上：
按 Ctrl+D 选中第二个 card
再按 Ctrl+D 选中第三个 card
现在三个 card 同时被选中
直接敲 item，三处一起改成 item这组用于在项目里快速跳转、找文件、调命令，文件一多就离不开。
Ctrl + P 按文件名快速打开文件
Ctrl + Shift + P 打开命令面板（VS Code 几乎所有命令都在这）
Ctrl + Shift + O 跳转到当前文件的符号（标题、函数）
Ctrl + G 跳转到指定行号
Ctrl + B 切换左侧资源管理器显隐
Ctrl + ` 打开/关闭内置终端
Ctrl + Shift + F 全项目搜索
Ctrl + Shift + H 全项目替换
Ctrl + . 显示快速修复（代码提示灯泡）
F2 重命名变量（全项目同步改）
F12 跳转到定义
Alt + F12 查看定义（不跳转，弹窗显示）
Ctrl + Shift + \ 在括号前后跳转最值得记住的是 Ctrl + P 和 Ctrl + Shift + P。前者用来找文件，敲几个字母就能跳到目标文件；后者是命令面板，VS Code 的所有功能都能从这里搜出来，比满菜单找快得多。
--- Ctrl + P 的几种用法 ---
直接敲：index 按文件名找
敲 @ ：@main 找当前文件的符号（等价 Ctrl+Shift+O）
敲 #：#box 找工作区里的符号
敲 :：:42 跳到第 42 行调试页面离不开开发者工具（F12）。下面是 Chrome、Edge、Firefox 通用的一组，调样式、看网络、查元素都靠它们。
F12 打开/关闭开发者工具
Ctrl + Shift + I 打开并定位到 Elements 面板
Ctrl + Shift + J 打开并定位到 Console 面板
Ctrl + Shift + C 切换到元素选择器（点页面元素跳到对应代码）
Ctrl + Shift + M 切换设备模拟器（看响应式）
Ctrl + R 刷新页面（开发者工具打开时）
Ctrl + Shift + R 强制刷新（清缓存重新加载）
Esc 在 DevTools 里切换底部 Console 显隐
Ctrl + ] / [ 切换 DevTools 面板标签用得最多的是 Ctrl + Shift + C：点一下进入选择模式，鼠标移到页面任意元素上点一下，DevTools 自动跳到对应的 HTML 和 CSS，改样式立刻生效。这是调样式最顺手的方式，比在代码里翻找快得多。
--- 调样式的标准流程 ---
1. F12 打开 DevTools
2. Ctrl+Shift+C 切到选择器
3. 鼠标点要调的元素
4. 右侧 Styles 面板里改 CSS
5. 改到满意，把样式复制回代码文件光看清单是记不住的，关键在用。给你三个练习方法：
不用追求一次背全，真正用得上的高频键也就十来个，先把这十来个练熟，剩下的遇到了再补。下一篇我们聊学习资源和练习方法，告别“只看不练”。