計畫文件，不會被 Quartz 渲染。
回主 roadmap → frontend/ROADMAP.md
章節目標
DevTools 熟練度是前端工程師資深化的分水嶺。除了 Chrome DevTools，還有編輯器配置、shell 工具、Git hook、snippet 系統——這些加起來決定你每天能寫多少 code、debug 多快。本章建立完整的前端工程師工作環境。
（AI 輔助相關工具 → CH17；通用 Git / Monorepo 等 → 本章僅前端觀點）
🌱 基本介紹
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 01 | 前端工程師的工作環境組成 | 01-frontend-dev-environment | 🌱 | 瀏覽器 DevTools + 編輯器 + terminal + git workflow + AI 工具，五大支柱 |
| 02 | 什麼是「熟練」DevTools | 02-what-is-devtools-mastery | 🌱 | 能用 vs 精通的差異、一個 debug 任務新人花 30 分老手花 3 分的原因 |
❓ 為什麼需要
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 03 | 為什麼熟 DevTools 是 Senior 分水嶺 | 03-why-devtools-matters | 🌱 | 新手靠 console.log 十次、Senior 設一個 breakpoint 看全貌；熟 Performance / Memory / Network tab 直接決定 debug 效率差 10 倍 |
| 04 | 為什麼值得投資編輯器設定 | 04-why-invest-editor | 🌱 | 一天 8 小時在編輯器、每個 shortcut / snippet / plugin 省的秒數累積一年是幾十小時、為什麼貴的 Cursor 訂閱也划算 |
| 05 | 為什麼 Snippet / Shortcut 是效率金礦 | 05-why-snippets-shortcuts | 🌱 | 每次重複打相同 boilerplate 的代價、肌肉記憶的建立、自己造 snippet 的 ROI |
🕰️ 演進
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 06 | 瀏覽器 DevTools 演進 | 06-browser-devtools-evolution | 🌱 | Firebug（2006，前身）→ Chrome DevTools → Firefox 三大 → Edge / Safari / Chromium 統一、每個里程碑新增什麼能力 |
| 07 | 編輯器演進 | 07-editor-evolution | 🌱 | Sublime Text → Atom → VS Code（2015 勝出）→ Cursor / Zed / Windsurf（AI 時代） |
| 08 | Terminal / Shell 演進 | 08-shell-evolution | 🌱 | Bash → Zsh（macOS 預設）→ Fish → 現代 shell tool（fzf / ripgrep / bat / eza / zoxide） |
🧠 知識型
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 09 | Elements Panel 進階 | 09-elements-panel | 🌱 | Computed styles、cascade 溯源、:hover/:focus 模擬、Flex/Grid overlay、Force element state |
| 10 | Console API 進階 | 10-console-advanced | 🌱 | console.table / group / trace / dir / time / assert / count、live expression、$_ 引用上次結果 |
| 11 | Network Tab 深度 | 11-network-advanced | 🌱 | Throttling、HAR export、Override response、WebSocket frames、Preserve log、Priority 欄、Initiator |
| 12 | Performance Tab | 12-performance-tab | 🌱 | Recording、Flame chart、Bottom-up / Call Tree、Web Vitals 標記、CPU throttling、Long task 找法 |
| 13 | Memory Tab | 13-memory-tab | 🌱 | Heap snapshot 比對、Allocation timeline、Detached DOM 節點、memory leak 抓蟲實戰 |
| 14 | Sources Tab | 14-sources-tab | 🌱 | Breakpoint（line / conditional / DOM / event / XHR / logpoint）、Workspace、Local overrides、Snippets |
| 15 | Application Tab | 15-application-tab | 🌱 | Storage（Cookie / localStorage / IndexedDB / Cache）、Service Worker 管理、Manifest、Background Services |
| 16 | Lighthouse 深入 | 16-lighthouse-deep | 🌱 | Performance / A11y / SEO / Best Practices / PWA 五項、audit 原理、CI 整合 |
| 17 | CSS Overview | 17-css-overview | 🌱 | 整個網站的 CSS 統計（unused / specificity / colors）、重構前盤點 |
| 18 | Animations Panel | 18-animations-panel | 🌱 | 時間軸、debug transition/animation、調整 easing |
| 19 | Device Toolbar（行動模擬） | 19-device-toolbar | 🌱 | device preset、自訂解析度、touch 模擬、throttling 搭配 |
| 20 | Security / Recorder / Rendering Panels | 20-misc-panels | 🌱 | Security（憑證 / CSP 檢查）、Recorder（錄製操作產 Puppeteer script）、Rendering（paint flashing / layout shift regions / prefers-* 模擬） |
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 21 | Safari Web Inspector（iOS debug） | 21-safari-inspector | 🌱 | macOS + iPhone remote debug、iOS simulator、WebKit 特有行為 |
| 22 | Firefox DevTools 特色 | 22-firefox-devtools | 🌱 | CSS Grid Inspector（比 Chrome 好）、Accessibility Inspector、Shape Path Editor |
編輯器（VS Code 為主）
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 23 | VS Code 前端必裝套件清單 | 23-vscode-frontend-extensions | 🌱 | ESLint / Prettier / Tailwind IntelliSense / Error Lens / Console Ninja / Pretty TypeScript Errors / GitLens / Colorize |
| 24 | VS Code 進階設定 | 24-vscode-advanced-config | 🌱 | workspace settings、multi-root、keybinding、snippet 系統、Task runner、launch.json 前端 debug |
| 25 | Cursor / Zed / Windsurf 選型 | 25-modern-editor-selection | 🌱 | 跟 VS Code 的差異、AI 整合（跟 CH17 連）、效能、訂閱費用 |
| 26 | EditorConfig + Prettier + ESLint 整合 | 26-editor-toolchain | 🌱 | 三者的分工、衝突解決、團隊共用配置、pre-commit hook |
| 27 | 自己寫 Snippet | 27-writing-snippets | 🌱 | VS Code snippet format、tab stops、placeholder、整個團隊共用 snippet |
Terminal & Shell
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 28 | Shell Aliases 前端開發版 | 28-shell-aliases-frontend | 🌱 | 常用指令簡化（pn / nr / g*）、npm/pnpm/bun 切換、專案 local alias |
| 29 | 必裝 CLI 工具 | 29-essential-cli-tools | 🌱 | fzf（模糊搜尋）/ ripgrep（rg，取代 grep）/ bat（取代 cat）/ eza（取代 ls）/ zoxide（取代 cd）/ jq（JSON）/ httpie（取代 curl） |
| 30 | tmux / terminal multiplexer | 30-tmux | 🌱 | 多 pane、session 永續、跟 VS Code terminal 的互補 |
Git 工作流
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 31 | Git Hooks 搭 Husky | 31-git-hooks-husky | 🌱 | pre-commit / pre-push / commit-msg，避免壞 code 進 repo |
| 32 | Lint-staged | 32-lint-staged | 🌱 | 只對 staged files 跑 linter、效能優化、跟 Husky 整合 |
| 33 | Conventional Commits + Commitlint | 33-conventional-commits | 🌱 | 規範 commit message、自動 changelog、Semantic Release 整合 |
Debug 技能
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 34 | Breakpoint 進階 | 34-advanced-breakpoints | 🌱 | Conditional breakpoint、logpoint（不中斷只 log）、DOM breakpoint、XHR breakpoint、Event listener breakpoint |
| 35 | Source Map Debugging | 35-source-map-debugging | 🌱 | 開啟 source map、// # sourceMappingURL、production source map 策略 |
| 36 | 跨 Tab / Worker Debug | 36-cross-tab-worker-debug | 🌱 | 在 DevTools 切換到 Worker context、Service Worker debug |
🔧 小實作注意事項
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 37 | VS Code 前端完整環境設定 | 37-vscode-full-setup | 🌱 | 從 0 到可用：插件、設定、snippet、keybinding、task 一條龍 |
| 38 | Chrome DevTools 10 個鮮少人知的秘技 | 38-devtools-hidden-gems | 🌱 | Command menu（Cmd+Shift+P）、$0–$4、$$()、copy as fetch、copy as cURL、save as HAR、Store as global variable、Run snippet on every load |
| 39 | Git Hooks 搭 Husky + lint-staged 完整設定 | 39-git-hooks-full-setup | 🌱 | monorepo 情境、效能調校、bypass 規則 |
| 40 | 自己的 Snippet Library 建立 | 40-build-snippet-library | 🌱 | 累積一整組 React / Vue / Vite / Tailwind 常用 snippet、團隊共享 |
| 41 | 行動裝置 Debug 完整工作流 | 41-mobile-debug-workflow | 🌱 | iOS Safari / Android Chrome Remote、Proxyman 攔截、BrowserStack 雲端裝置 |
💣 Anti-pattern
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 42 | DevTools / 工程化 Anti-patterns | 42-devtools-anti-patterns | 🌱 | 永遠只用 console.log（不用 breakpoint）、沒設 hook / lint（壞 code 進 repo）、編輯器用預設設定不客製、忽略 ESLint 警告、沒有自己的 snippet、Windows 原生不裝 WSL 硬寫前端 |
🧰 對應檢查工具
| # | 主題 | Slug | Stage | 大綱 |
|---|
| 43 | 工程化工具生態 | 43-tooling-ecosystem | 🌱 | DevTools 延伸（React DevTools / Vue DevTools / Redux DevTools / Why Did You Render / React Scan）、VS Code 插件庫、shell 工具 |
📎 補充
| # | 主題 | Slug | Stage | 大綱 |
|---|
| S01 | Windows 前端開發環境（WSL 必用） | s01-windows-wsl | 🌱 | WSL2 設定、跟 macOS 差距、pnpm / Node 安裝 |
| S02 | Dotfiles 管理 | s02-dotfiles | 🌱 | 個人設定跨機器同步、chezmoi / yadm、GitHub dotfiles |
| S03 | 個人生產力 shortcut 系統（跨工具） | s03-productivity-shortcuts | 🌱 | Raycast / Alfred（macOS）、PowerToys（Windows）、Keyboard Maestro |
| S04 | DevTools Protocol（Puppeteer / Playwright 底層） | s04-devtools-protocol | 🌱 | CDP、自己寫 browser automation、跟 Playwright 的關係 |
章節進度統計
- 知識主題：43 + 4 補充 = 47 項
- 🌿 growing：0
- 🌱 seed：47
跨系列連結
- →
frontend/js/ CH3（debug 技能跟 JS 基礎配合）
- →
frontend/testing/ CH10（DevTools 跟 Playwright trace viewer）
- →
frontend/observability/ CH15（DevTools Performance vs Production RUM）
- →
frontend/ai-assisted/ CH17（Cursor / Zed / Copilot 的 AI 面）
- →
git/ 系列（Git 深入）
- →
process/ 系列（CI/CD 細節）