Devtools

版本：2.0 最後更新：2026 年 5 月 19 日 適用對象：後端工程師、前端工程師、QA 工程師、系統架構師、DevOps 工程師 定位：企業內部標準教材 文件維護：內部技術團隊 適用於：Postman v12.x（2026 年最新穩定版，向下相容 v11.x） Created by：Eric Cheng Postman 教學手冊 📋 教學大綱 Postman 簡介與概觀 1.1 Postman 是什麼？ 1.2 核心功能總覽 1.3 Postman 平台架構 1.4 版本與授權方案 1.5 與同類工具比較 1.6 適用場景與不適用場景 安裝與環境設定 2.1 桌面應用程式安裝 2.2 網頁版與 VS Code Extension 2.3 帳號註冊與登入 2.4 介面導覽 2.5 企業網路設定（Proxy / SSL） 2.6 團隊初始化設定 核心概念 3.1 Workspaces（工作區） 3.2 Collections（集合） 3.3 Environments 與 Variables 3.4 Authorization（認證與授權） 3.5 Postman Console 發送 API 請求 4.1 建立與發送 HTTP 請求 4.2 Request Body 格式 4.3 Response 檢視與分析 4.4 GraphQL 請求 4.5 gRPC 與 WebSocket 4.6 Cookie 與 Certificate 管理 變數與環境管理 5.1 變數作用域與優先順序 5.2 動態變數 5.3 環境切換策略 5.4 Postman Vault（敏感資料管理） 5.5 資料檔案驅動（CSV / JSON） 腳本開發（Tests & Scripts） 6.1 Pre-request Script 6.2 Post-response Script（測試斷言） 6.3 pm API 完整參考 6.4 Chai Assertion Library 6.5 請求鏈結（Chaining Requests） 6.6 常見測試範例 6.7 可重用腳本（Package Library） Collection Runner 與自動化測試 7.1 Collection Runner 使用 7.2 執行順序控制 7.3 Data-Driven Testing 7.4 效能測試 7.5 整合測試與回歸測試 Postman CLI 與 CI/CD 整合 8.1 Postman CLI 安裝與設定 8.2 命令列執行 Collection 8.3 Newman（傳統 CLI） 8.4 GitHub Actions 整合 8.5 Jenkins / Azure DevOps 整合 API 設計與文件 9.1 Spec Hub（OpenAPI / AsyncAPI） 9.2 Mock Server 設定 9.3 API 文件產生與發布 9.4 版本管理與 Native Git 9.5 SDK Generation（SDK 產生） 9.6 API Catalog（Enterprise） Postman Flows 10.1 Flows 概念與用途 10.2 建立視覺化工作流 10.3 實務案例 AI 功能（Agent Mode） 11.1 Postman AI 功能總覽 11.2 Agent Mode 深度指南 11.3 MCP Server 與 MCP Client 整合 11.4 AI Credits 管理與最佳化 團隊協作 12.1 團隊建立與管理 12.2 角色與權限 12.3 Version Control（Fork / Pull Request / Merge） 12.4 團隊工作區最佳實務 安全治理與 API Governance 13.1 Postman Secret Scanner 13.2 Postman Vault 與第三方整合 13.3 API Governance Rules 13.4 SSO / SCIM / Audit Log 13.5 BYOK 與 Data Residency 監控與效能 14.1 Monitor 設定與排程 14.2 效能指標與告警 14.3 Insights（Enterprise） 整合與擴充 15.1 第三方工具整合 15.2 Postman API 使用 15.3 Webhook 與自訂整合 企業導入策略 16.1 評估與導入路線圖 16.2 方案選擇與團隊培訓 16.3 標準化規範 最佳實務與反模式 17.1 最佳實務 17.2 常見反模式 常見問題與除錯（FAQ） 附錄 19.1 pm API 速查表 19.2 Chai Assertion 速查表 19.3 HTTP Status Code 速查表 19.4 快捷鍵速查表 19.5 新人上手 Checklist 19.6 API 測試 Checklist 19.7 安全性 Checklist 1. Postman 簡介與概觀 1.1 Postman 是什麼？ Postman 是全球領先的 AI 原生 API 平台，為超過 4,000 萬開發者與 50 萬以上的組織提供 API 開發、測試、文件化、監控與協作的統一解決方案。Fortune 500 企業中有 98% 使用 Postman 作為其 API 開發流程的核心工具。根據 2025 年 State of the API 報告，90% 的開發者正在使用 API，74% 已採用 API-First 策略，而 AI 驅動的 API 流量在 2024 年增長了 73%。 ...

Chrome DevTools 教學手冊 版本：Chrome 151+（2026 年 8 月最新穩定版） 適用對象：前端工程師、後端工程師、架構師、DevOps 工程師、AI Coding Agent 使用者 定位：企業級實戰與維運教學手冊 最後更新：2026-08-19 目錄 第一章：Chrome DevTools 架構與核心原理 1.1 DevTools 整體架構說明 1.2 Browser 與 Rendering Pipeline 1.3 DOM / CSSOM / Render Tree 1.4 JavaScript Engine（V8）運作原理 1.5 Network Request Lifecycle 1.6 DevTools 與 Chromium 架構關係 第二章：安裝與環境設定 2.1 Chrome 最新版安裝 2.2 開啟 DevTools 的方式 2.3 常用快捷鍵整理 2.4 常用設定 2.5 與 VS Code 整合 2.6 Source Map 設定 2.7 Local Overrides 設定方式 2.8 Device Mode（裝置模擬模式） 2.9 Command Menu（命令選單） 第三章：Elements 面板完整教學 3.1 DOM 即時編輯 3.2 CSS 即時修改 3.3 Box Model 分析 3.4 Layout Debug 3.5 Grid / Flexbox 視覺化工具 3.6 事件監聽器檢查 3.7 強制狀態（:hover / :active） 第四章：Console 深入教學 4.1 Console API 使用 4.2 進階 Console API 4.3 樣式化 Console 輸出 4.4 Console 工具函式 4.5 操作 DOM 的 Console 技巧 4.6 Performance 分析 Console 技巧 第五章：Sources 面板（JS 除錯核心） 5.1 設定 Breakpoint（中斷點） 5.2 Conditional Breakpoint（條件斷點） 5.3 XHR / Fetch Breakpoint 5.4 Event Listener Breakpoint 5.5 Watch 變數 5.6 Call Stack 分析 5.7 Async Stack Trace 5.8 Blackbox Script（忽略腳本） 5.9 Snippets 使用 第六章：Network 面板（API 與效能分析） 6.1 Network 面板概覽 6.2 Request / Response 結構 6.3 Header / Payload 分析 6.4 API Debug 技巧 6.5 模擬慢速網路 6.6 Cache 行為分析 6.7 HTTP/1.1 vs HTTP/2 分析 6.8 WebSocket 除錯 第七章：Performance 面板（效能優化核心） 7.1 Recording 操作 7.2 FPS 分析 7.3 Main Thread 分析 7.4 Long Task 問題診斷 7.5 Reflow / Repaint 分析 7.6 Lighthouse 使用方式 7.7 Core Web Vitals 分析 7.8 Rendering 面板 7.9 Performance 進階功能 第八章：Memory 面板 8.1 Memory 面板概覽 8.2 Heap Snapshot 8.3 Allocation Timeline 8.4 記憶體洩漏診斷流程 8.5 SPA 常見 Memory Leak 問題 第九章：Application 面板 9.1 LocalStorage / SessionStorage 9.2 IndexedDB 9.3 Cookies 9.4 Service Worker 9.5 PWA Debug 第十章：Security 面板 10.1 HTTPS 分析 10.2 Mixed Content 問題 10.3 CORS Debug 10.4 CSP 分析 第十一章：Recorder 面板、AI 輔助與其他進階功能 11.1 Recorder 面板（使用者流程錄製） 11.2 AI 輔助功能（Gemini 整合） 11.3 其他實用面板 11.4 遠端除錯 第十二章：Chrome DevTools MCP — AI Coding Agent 整合 12.1 什麼是 Chrome DevTools MCP 12.2 安裝與設定 12.3 工具能力總覽 12.4 企業應用場景 12.5 安全性與治理考量 第十三章：企業級 Web Application Debug 標準流程 13.1 前端問題診斷流程 13.2 API 錯誤排查流程 13.3 效能瓶頸診斷流程 13.4 記憶體問題診斷流程 13.5 生產環境 Debug 建議 13.6 團隊 Debug SOP 第十四章：最佳實踐與團隊規範 14.1 團隊使用規範 14.2 Debug Checklist 14.3 效能優化 Checklist 14.4 Code Review 與 DevTools 使用建議 附錄 A：常見問題 FAQ Q1：DevTools 開啟後頁面變慢，是正常的嗎？ Q2：為什麼 Console 的 console.log 顯示的物件值與預期不同？ Q3：如何在 DevTools 中除錯 minified（壓縮後）的 JavaScript？ Q4：Network 面板中 (blocked:mixed-content) 是什麼意思？ Q5：為什麼 Lighthouse 每次跑分不一樣？ Q6：DevTools 的 Elements 修改為什麼刷新後就消失了？ Q7：如何在手機上使用 Chrome DevTools？ Q8：如何將 DevTools 中的修改轉換為程式碼修改？ 附錄 B：面試常考 DevTools 問題 基礎題 進階題 架構師題 附錄 C：團隊培訓建議 培訓計劃 建議培訓方式 附錄 D：延伸學習資源 官方資源 社群資源 Chrome DevTools Protocol 多語言用戶端函式庫 DevTools 生態擴充功能 推薦工具 附錄 E：檢查清單（Checklist） 新進成員 DevTools 入門清單 日常開發 Checklist 第一章：Chrome DevTools 架構與核心原理 1.1 DevTools 整體架構說明 Chrome DevTools 是內建於 Chromium 核心的開發者除錯工具組，透過 Chrome DevTools Protocol（CDP） 與瀏覽器核心通訊。 ...