EP01. “Chrome DevTools 是什么？打开方式与界面导览”

• 网站某个按钮颜色不对、手机版跑版、图片载不出来——按一下 F12，Chrome 就会告诉你原因，不用装任何软件
• DevTools（开发者工具）是 Chrome 内建的工具箱，看、改、测网页都在这里；改动只在你自己的浏览器生效，关掉就恢复，不会弄坏网站
• 不写代码的人也用得上：检查 WordPress 页面哪一段 CSS 在作怪、看网站为什么慢、测试手机版、查表单为什么送不出去
• Edge、Brave 这些以 Chromium 为基础的浏览器，DevTools 几乎一模一样；Firefox、Safari 也有类似工具，只是界面不同
• 这个系列：界面导览 → Elements → Console → Network → 手机模拟与 Lighthouse

适用版本

• Google Chrome 桌面版，界面以 2026-09 为准；面板位置与名称随版本可能略有不同

重点内容

打开 DevTools 的方法

界面导览

flowchart TB
    subgraph T["上方：面板分页"]
        T1["Elements · Console · Sources · Network · Performance · Application · Lighthouse …"]
    end
    subgraph L["左上两个图标"]
        L1["选取元素（箭头）"]
        L2["切换手机模拟（手机图标）"]
    end
    subgraph R["右上"]
        R1["⚙ Settings"]
        R2["⋮ 停靠位置 / 更多工具"]
    end

最常用的面板

Command Menu：找不到功能就搜寻

• 在 DevTools 里按 Ctrl+Shift+P（macOS Cmd+Shift+P）
• 输入关键字，例如 screenshot → Capture full size screenshot 就能截整页长图；dark → 切换深色主题；disable javascript → 关掉 JavaScript 测试网页
• 删掉开头的 > 可以改成搜寻文件

语言设定

• DevTools 可以显示中文：⚙ Settings → Preferences → Language
• 不过网上教程、官方文档几乎都用英文，建议保留英文界面，照教程找按钮比较快

学完你会

• ✅ 用 F12、Ctrl+Shift+C、右键 Inspect 打开 DevTools
• ✅ 知道 Elements、Console、Network、Lighthouse 各自做什么
• ✅ 用 Command Menu 截整页长图

常见错误

• ❌ 以为在 DevTools 改了就等于改了网站：改动只在自己浏览器，按重新整理就消失；要真正生效，得回 WordPress/代码里改。
• ❌ 笔记电脑按 F12 没反应：试 Fn+F12 或 Ctrl+Shift+I。
• ❌ DevTools 窗口太窄看不清：用 ⋮ → Dock side 改成停靠下方或独立窗口。
• ❌ 别人叫你「在 Console 贴这段代码」就照贴：可能是骗取 Facebook、网银账号的诈骗手法，不明来源的代码不要贴。

Sources

官方文档：

1. Chrome DevTools overview - Chrome for Developers
2. Open Chrome DevTools - Chrome for Developers
3. Run commands in the Command Menu - Chrome for Developers
4. Customize your panels: Dock side - Chrome for Developers