// DOM 是 HTML 的程式化表示
// 開發者可以透過 JavaScript 操作 DOM
document.querySelector('.container').classList.add('active');

// DOM 變更會觸發渲染管線
// 批次操作 DOM 可減少 Reflow 次數
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
}
document.querySelector('ul').appendChild(fragment); // 只觸發一次 Reflow

// 透過 CSSOM API 操作樣式
const sheet = document.styleSheets[0];
const rules = sheet.cssRules;

// 讀取 computed style
const style = getComputedStyle(document.querySelector('.box'));
console.log(style.width, style.height);

chrome://version/
chrome://settings/help

Settings → Preferences → Appearance → Theme
- Light（預設）
- Dark（推薦：長時間使用較不傷眼）
- System preference（跟隨系統設定）

Settings → Preferences → Appearance → Panel layout
- 右側（預設）
- 底部
- 左側
- 獨立視窗（推薦：大螢幕雙螢幕配置）

// .vscode/launch.json
{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Chrome",
            "type": "chrome",
            "request": "launch",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}/src",
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "webpack:///src/*": "${webRoot}/*"
            }
        },
        {
            "name": "Attach to Chrome",
            "type": "chrome",
            "request": "attach",
            "port": 9222,
            "webRoot": "${workspaceFolder}/src"
        }
    ]
}

# 啟動 Chrome 並開放除錯埠
chrome --remote-debugging-port=9222 --user-data-dir="C:\chrome-debug"

Settings → Preferences → Sources → Enable JavaScript source maps ✓
Settings → Preferences → Sources → Enable CSS source maps ✓

// webpack.config.js
module.exports = {
    // 開發環境：快速重建，行號準確
    devtool: 'eval-cheap-module-source-map',

    // 測試環境：完整對應，利於除錯
    // devtool: 'source-map',

    // 生產環境：隱藏原始碼，僅保留行號
    // devtool: 'hidden-source-map',
};

// vite.config.ts
export default defineConfig({
    build: {
        sourcemap: true, // 'inline' | 'hidden' | true
    },
    css: {
        devSourcemap: true,
    },
});

// 模擬地理位置
Command Menu (Ctrl+Shift+P) → Show Sensors
→ 設定 Location: 自訂經緯度

// 模擬加速度計與陀螺儀
Sensors 面板 → Orientation
→ 拖曳 3D 模型調整方向

// 覆寫 User Agent
Network conditions → User agent → 取消 Use browser default
→ 輸入自訂 User Agent 字串

// 在 Console 使用 $0 存取 Elements 面板中選取的元素
$0                    // 目前選取的元素
$0.classList          // 查看 class 列表
$0.getBoundingClientRect() // 查看元素位置

// 使用 $$() 選取多個元素（等同 querySelectorAll）
$$('.card')           // 選取所有 .card 元素
$$('img[src=""]')     // 找出所有 src 為空的圖片

/* 在 Styles 面板中輸入時可用的快捷操作 */

/* 增減數值 */
/* ↑/↓：±1 */
/* Shift+↑/↓：±10 */
/* Ctrl+↑/↓：±100 */
/* Alt+↑/↓：±0.1 */

/* 顏色選取器 */
/* 點擊色塊開啟顏色選取器 */
/* 支援 HEX / RGB / HSL / HWB */
/* 可使用滴管工具直接取色 */

┌─────────────────────────────────────┐
│              Margin                 │
│  ┌───────────────────────────────┐  │
│  │          Border               │  │
│  │  ┌───────────────────────┐    │  │
│  │  │      Padding          │    │  │
│  │  │  ┌───────────────┐    │    │  │
│  │  │  │   Content      │    │    │  │
│  │  │  │  width × height│    │    │  │
│  │  │  └───────────────┘    │    │  │
│  │  └───────────────────────┘    │  │
│  └───────────────────────────────┘  │
└─────────────────────────────────────┘

/* 企業級建議：全域設定 border-box */
*,
*::before,
*::after {
    box-sizing: border-box;
}

// 在 Console 中快速找出溢出元素
$$('*').forEach(el => {
    if (el.scrollWidth > el.clientWidth) {
        console.log('水平溢出:', el);
    }
    if (el.scrollHeight > el.clientHeight) {
        console.log('垂直溢出:', el);
    }
});

// 快速標記所有元素邊框（Debug Layout）
$$('*').forEach(el => {
    el.style.outline = '1px solid red';
});

// 取得元素的所有事件監聽器
getEventListeners($0);

// 移除特定事件
getEventListeners($0).click.forEach(listener => {
    $0.removeEventListener('click', listener.listener);
});

// 監控元素的所有事件
monitorEvents($0);

// 監控特定事件類型
monitorEvents($0, 'click');
monitorEvents($0, ['click', 'keydown']);

// 停止監控
unmonitorEvents($0);

// 使用 CSS.supports 檢查支援度
CSS.supports('selector(:focus-visible)'); // true

// 手動觸發 focus
$0.focus();

// 適合展示陣列或物件集合
const users = [
    { name: '王小明', role: 'Frontend', level: 'Senior' },
    { name: '李大華', role: 'Backend', level: 'Lead' },
    { name: '張美玲', role: 'DevOps', level: 'Junior' }
];

// 完整表格
console.table(users);

// 指定欄位
console.table(users, ['name', 'role']);

console.group('🔧 API 請求 - GET /api/users');
console.log('URL:', '/api/users');
console.log('Method:', 'GET');
console.log('Headers:', { Authorization: 'Bearer ***' });

    console.groupCollapsed('📦 Response');
    console.log('Status:', 200);
    console.log('Data:', { users: ['...'] });
    console.groupEnd();

console.log('Duration:', '120ms');
console.groupEnd();

console.time('fetchUsers');

const response = await fetch('/api/users');
console.timeLog('fetchUsers', '請求完成'); // 中途計時

const data = await response.json();
console.timeEnd('fetchUsers'); // 結束計時並輸出總時間

function handleClick(button) {
    console.count(button); // 計算每個按鈕被點擊次數
}

handleClick('submit');  // submit: 1
handleClick('cancel');  // cancel: 1
handleClick('submit');  // submit: 2
console.countReset('submit'); // 重置 submit 計數

// 條件為 false 時才輸出錯誤
const age = 15;
console.assert(age >= 18, '年齡不符：', age);
// Assertion failed: 年齡不符： 15

// 企業應用：驗證資料完整性
function validateOrder(order) {
    console.assert(order.id, '訂單缺少 ID', order);
    console.assert(order.items?.length > 0, '訂單無商品', order);
    console.assert(order.total > 0, '訂單金額異常', order);
}

function processPayment(amount) {
    console.trace('Payment processing', { amount });
    // 輸出從 processPayment 到呼叫源的完整堆疊
}

// dir 展示物件屬性（包含 prototype）
console.dir(document.body);

// dirxml 以 XML/HTML 格式展示
console.dirxml(document.body);

// 使用 %c 加入 CSS 樣式
console.log(
    '%c⚠️ 安全警告%c 請勿在此輸入密碼或個人資料',
    'color: red; font-size: 24px; font-weight: bold;',
    'color: orange; font-size: 14px;'
);

// 企業級 Logger
const logger = {
    info: (msg, ...args) => console.log(
        `%c[INFO]%c ${msg}`,
        'background:#2196F3;color:white;padding:2px 6px;border-radius:3px;',
        'color:#2196F3;',
        ...args
    ),
    warn: (msg, ...args) => console.log(
        `%c[WARN]%c ${msg}`,
        'background:#FF9800;color:white;padding:2px 6px;border-radius:3px;',
        'color:#FF9800;',
        ...args
    ),
    error: (msg, ...args) => console.log(
        `%c[ERROR]%c ${msg}`,
        'background:#F44336;color:white;padding:2px 6px;border-radius:3px;',
        'color:#F44336;',
        ...args
    )
};

// 找出所有 Promise 物件
queryObjects(Promise);

// 監控函式呼叫
function myFunction(a, b) { return a + b; }
monitor(myFunction);
myFunction(1, 2);
// function myFunction called with arguments: 1, 2

// 複製資料到剪貼簿
copy(JSON.stringify(performance.getEntriesByType('resource'), null, 2));

// 搜尋所有含有特定文字的 DOM 元素
$$('*').filter(el => el.textContent.includes('error'));

// 1. 快速取得表單資料
const formData = new FormData($('form'));
Object.fromEntries(formData);

// 2. 截取所有圖片 URL
$$('img').map(img => img.src);

// 3. 取得所有外部連結
$$('a[href^="http"]').map(a => ({ text: a.textContent, href: a.href }));

// 4. 檢查所有無替代文字的圖片（無障礙檢查）
$$('img:not([alt])');

// 5. 禁用所有按鈕（模擬禁用狀態）
$$('button').forEach(b => b.disabled = true);

// 6. 高亮特定元素
$$('.error').forEach(el => el.style.outline = '3px solid red');

// 7. 列出頁面中所有用到的字型
[...new Set($$('*').map(el => getComputedStyle(el).fontFamily))];

// 8. 列出頁面中所有用到的顏色
[...new Set($$('*').flatMap(el => {
    const s = getComputedStyle(el);
    return [s.color, s.backgroundColor];
}).filter(c => c !== 'rgba(0, 0, 0, 0)'))];

// 1. 使用 Performance API
const entries = performance.getEntriesByType('resource');
console.table(entries.map(e => ({
    name: e.name.split('/').pop(),
    type: e.initiatorType,
    duration: `${e.duration.toFixed(2)}ms`,
    size: e.transferSize ? `${(e.transferSize / 1024).toFixed(1)}KB` : 'cached'
})));

// 2. 測量 DOM 操作效能
performance.mark('start');
// ... DOM 操作 ...
performance.mark('end');
performance.measure('DOM操作', 'start', 'end');
console.log(performance.getEntriesByName('DOM操作'));

// 3. 監控長任務
const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach(entry => {
        console.warn(`⚠️ Long Task detected: ${entry.duration.toFixed(2)}ms`);
    });
});
observer.observe({ entryTypes: ['longtask'] });

// 4. 測量載入效能
const navEntry = performance.getEntriesByType('navigation')[0];
console.table({
    'DNS Lookup': `${(navEntry.domainLookupEnd - navEntry.domainLookupStart).toFixed(2)}ms`,
    'TCP Connection': `${(navEntry.connectEnd - navEntry.connectStart).toFixed(2)}ms`,
    'TTFB': `${(navEntry.responseStart - navEntry.requestStart).toFixed(2)}ms`,
    'DOM Content Loaded': `${(navEntry.domContentLoadedEventEnd - navEntry.startTime).toFixed(2)}ms`,
    'Page Load': `${(navEntry.loadEventEnd - navEntry.startTime).toFixed(2)}ms`
});

// 5. 監控 Core Web Vitals
new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        console.log(`LCP: ${entry.startTime.toFixed(2)}ms`, entry.element);
    }
}).observe({ type: 'largest-contentful-paint', buffered: true });

new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
        console.log(`FID: ${entry.processingStart - entry.startTime}ms`);
    }
}).observe({ type: 'first-input', buffered: true });

new PerformanceObserver((entryList) => {
    let cls = 0;
    for (const entry of entryList.getEntries()) {
        if (!entry.hadRecentInput) {
            cls += entry.value;
        }
    }
    console.log(`CLS: ${cls}`);
}).observe({ type: 'layout-shift', buffered: true });

// 場景：迴圈中只想在特定條件停下
for (let i = 0; i < 1000; i++) {
    processItem(items[i]); // 只想在 i === 500 時停下
}

### 5.4 Event Listener Breakpoint

Sources 面板右側的 **Event Listener Breakpoints** 提供按事件類別分組的中斷：

| 類別 | 常用事件 |
|------|----------|
| **Mouse** | click, dblclick, mousedown, mouseup |
| **Keyboard** | keydown, keyup, keypress |
| **Touch** | touchstart, touchmove, touchend |
| **XHR** | readystatechange, load, error |
| **Timer** | setTimeout, setInterval, requestAnimationFrame |
| **Animation** | animationstart, animationend |
| **Clipboard** | copy, cut, paste |
| **Script** | Script First Statement（腳本首次執行） |

### 5.5 Watch 變數

| 操作 | 說明 |
|------|------|
| **+** 新增 Watch | 輸入任意 JavaScript 表達式 |
| 變數名稱 | 監控特定變數值 |
| 表達式 | 如 `users.length`、`this.state` |
| 比較 | 如 `oldValue !== newValue` |

#### 除錯面板區塊

| 區塊 | 說明 |
|------|------|
| **Watch** | 自訂監控表達式 |
| **Call Stack** | 函式呼叫堆疊 |
| **Scope** | 作用域中的變數（Local / Closure / Global） |
| **Breakpoints** | 所有已設定的中斷點 |

### 5.6 Call Stack 分析

```mermaid
graph TB
    A["Global Context"] --> B["handleSubmit()"]
    B --> C["validateForm()"]
    C --> D["checkEmail()"]
    D --> E["regexp.test()"]

    style E fill:#f96,stroke:#333

// async/await 的完整呼叫鏈
async function loadDashboard() {
    const user = await fetchUser();         // 斷點設在此
    const orders = await fetchOrders(user.id);
    const stats = await calculateStats(orders);
    renderDashboard(stats);
}

// DevTools 會顯示完整的 async 呼叫鏈：
// loadDashboard (async)
//   → fetchUser
//     → fetch('/api/user')
//   → fetchOrders
//     → fetch('/api/orders')

Settings → Preferences → Debugger → ✓ Enable async stack traces

/node_modules/
/vendor/
/jquery\.min\.js$
/vue\.runtime\.esm\.js$
/react\.production\.min\.js$
/lodash\.min\.js$

// === Snippet: Performance Report ===
(function() {
    const nav = performance.getEntriesByType('navigation')[0];
    const resources = performance.getEntriesByType('resource');

    console.group('📊 效能報告');

    console.log('頁面載入時間:', (nav.loadEventEnd - nav.startTime).toFixed(2) + 'ms');
    console.log('DOM Ready:', (nav.domContentLoadedEventEnd - nav.startTime).toFixed(2) + 'ms');
    console.log('TTFB:', (nav.responseStart - nav.requestStart).toFixed(2) + 'ms');
    console.log('資源數量:', resources.length);
    console.log('總傳輸大小:', (resources.reduce((sum, r) => sum + (r.transferSize || 0), 0) / 1024).toFixed(1) + 'KB');

    console.groupCollapsed('資源詳細');
    console.table(resources.map(r => ({
        名稱: r.name.split('/').pop().substring(0, 40),
        類型: r.initiatorType,
        時間: r.duration.toFixed(1) + 'ms',
        大小: r.transferSize ? (r.transferSize / 1024).toFixed(1) + 'KB' : 'cached'
    })));
    console.groupEnd();

    console.groupEnd();
})();

// === Snippet: Accessibility Checker ===
(function() {
    const issues = [];

    // 檢查無 alt 的圖片
    $$('img:not([alt])').forEach(img => {
        issues.push({ type: '圖片無 alt', element: img.outerHTML.substring(0, 80) });
    });

    // 檢查空連結
    $$('a[href="#"], a:not([href])').forEach(a => {
        issues.push({ type: '空連結', element: a.outerHTML.substring(0, 80) });
    });

    // 檢查表單無 label
    $$('input:not([aria-label]):not([aria-labelledby])').forEach(input => {
        const id = input.id;
        if (!id || !$(`label[for="${id}"]`)) {
            issues.push({ type: '輸入欄無 label', element: input.outerHTML.substring(0, 80) });
        }
    });

    // 檢查對比度不足的文字
    $$('*').forEach(el => {
        const style = getComputedStyle(el);
        if (style.fontSize && parseFloat(style.fontSize) < 12) {
            issues.push({ type: '字體過小', element: el.tagName + '.' + el.className });
        }
    });

    console.group(`♿ 無障礙檢查報告 (${issues.length} 個問題)`);
    console.table(issues);
    console.groupEnd();
})();

// 複製為 fetch 後可在 Console 修改再發送
fetch("https://api.example.com/users", {
    headers: {
        "Authorization": "Bearer eyJhbGc...",
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ name: "test", role: "admin" }),
    method: "POST"
}).then(r => r.json()).then(console.log);

// 在 Console 中攔截 WebSocket
const OrigWebSocket = window.WebSocket;
window.WebSocket = function(...args) {
    const ws = new OrigWebSocket(...args);

    ws.addEventListener('message', (event) => {
        console.log('📥 WS Received:', JSON.parse(event.data));
    });

    const origSend = ws.send.bind(ws);
    ws.send = function(data) {
        console.log('📤 WS Sent:', JSON.parse(data));
        origSend(data);
    };

    return ws;
};

Performance → ⚙️ Settings：
- CPU: 4× slowdown（模擬低階裝置）
- Network: Slow 3G（模擬慢速網路）
- ✓ Enable advanced paint instrumentation（進階繪製檢測）
- ✓ Screenshots
- ✓ Memory

Command Menu (Ctrl+Shift+P) → Show FPS meter

// ❌ Bad: 長時間佔用主執行緒
function processLargeDataset(data) {
    for (let i = 0; i < data.length; i++) {
        heavyComputation(data[i]); // 可能執行 > 50ms
    }
}

// ✅ Good: 使用分批處理
async function processLargeDataset(data) {
    const BATCH_SIZE = 100;
    for (let i = 0; i < data.length; i += BATCH_SIZE) {
        const batch = data.slice(i, i + BATCH_SIZE);
        batch.forEach(item => heavyComputation(item));

        // 讓出主執行緒，允許瀏覽器處理使用者互動
        await new Promise(resolve => setTimeout(resolve, 0));
    }
}

// ✅ Better: 使用 requestIdleCallback
function processInIdle(data, index = 0) {
    requestIdleCallback((deadline) => {
        while (index < data.length && deadline.timeRemaining() > 0) {
            heavyComputation(data[index]);
            index++;
        }
        if (index < data.length) {
            processInIdle(data, index);
        }
    });
}

// ✅ Best: 使用 Web Worker
const worker = new Worker('processor.js');
worker.postMessage({ data: largeDataset });
worker.onmessage = (e) => {
    console.log('處理完成:', e.data);
};

// ✅ Modern: 使用 scheduler.postTask() (Chrome 94+)
async function processWithScheduler(data) {
    for (const item of data) {
        await scheduler.postTask(() => heavyComputation(item), {
            priority: 'background'
        });
    }
}

// ❌ Bad: 強制同步 Layout（讀寫交錯）
const elements = document.querySelectorAll('.item');
elements.forEach(el => {
    const width = el.offsetWidth;    // 讀取 → 觸發 Layout
    el.style.width = width * 2 + 'px'; // 寫入 → 觸發下次讀取重新 Layout
});

// ✅ Good: 批次讀取 → 批次寫入
const elements = document.querySelectorAll('.item');
const widths = Array.from(elements).map(el => el.offsetWidth); // 批次讀取
elements.forEach((el, i) => {
    el.style.width = widths[i] * 2 + 'px'; // 批次寫入
});

// ✅ Better: 使用 requestAnimationFrame
const elements = document.querySelectorAll('.item');
const widths = Array.from(elements).map(el => el.offsetWidth);
requestAnimationFrame(() => {
    elements.forEach((el, i) => {
        el.style.width = widths[i] * 2 + 'px';
    });
});

### 7.6 Lighthouse 使用方式

#### 執行 Lighthouse 審計

1. DevTools → **Lighthouse** 面板
2. 選擇類別：
   - ✓ Performance
   - ✓ Accessibility
   - ✓ Best Practices
   - ✓ SEO
   - ✓ PWA（漸進式 Web 應用）
3. 選擇裝置：Mobile / Desktop
4. 點擊 **Analyze page load**

#### Lighthouse 指標

| 指標 | 英文 | 良好 | 需改善 | 差 |
|------|------|------|--------|-----|
| **FCP** | First Contentful Paint | ≤ 1.8s | ≤ 3s | > 3s |
| **LCP** | Largest Contentful Paint | ≤ 2.5s | ≤ 4s | > 4s |
| **TBT** | Total Blocking Time | ≤ 200ms | ≤ 600ms | > 600ms |
| **CLS** | Cumulative Layout Shift | ≤ 0.1 | ≤ 0.25 | > 0.25 |
| **SI** | Speed Index | ≤ 3.4s | ≤ 5.8s | > 5.8s |
| **INP** | Interaction to Next Paint | ≤ 200ms | ≤ 500ms | > 500ms |

### 7.7 Core Web Vitals 分析

Core Web Vitals 是 Google 定義的核心使用者體驗指標。

```mermaid
graph LR
    subgraph "Core Web Vitals"
        A["LCP<br/>Largest Contentful Paint<br/>最大內容繪製<br/>≤ 2.5s"] 
        B["INP<br/>Interaction to Next Paint<br/>互動到下次繪製<br/>≤ 200ms"]
        C["CLS<br/>Cumulative Layout Shift<br/>累積版面位移<br/>≤ 0.1"]
    end

    A --- D["載入效能"]
    B --- E["互動回應"]
    C --- F["視覺穩定性"]

#### 功能一覽

| 功能 | 說明 | 用途 |
|------|------|------|
| **Paint flashing** | 綠色高亮重繪區域 | 找出不必要的重繪 |
| **Layout Shift Regions** | 藍色高亮版面位移區域 | 診斷 CLS 問題 |
| **Layer borders** | 橘色顯示合成圖層邊界 | 檢查圖層數量 |
| **Frame Rendering Stats** | 顯示即時 FPS 和 GPU 記憶體 | 監控動畫效能 |
| **Scrolling performance issues** | 標示影響捲動效能的元素 | 優化捲動體驗 |
| **Highlight ad frames** | 標示廣告框架 | 識別廣告影響 |
| **Core Web Vitals** | 頁面上顯示 CWV 覆蓋層 | 即時監控 CWV |
| **Disable local fonts** | 停用本地字體 | 測試 Web 字體載入 |
| **Emulate CSS media** | 模擬列印 / 螢幕媒體 | 測試列印樣式 |
| **Emulate vision deficiencies** | 模擬視覺障礙 | 無障礙測試 |
| **Disable AVIF / WebP** | 停用圖片格式支援 | 測試回退機制 |
| **Emulate prefers-color-scheme** | 模擬深色/淺色模式 | 測試主題切換 |
| **Emulate prefers-reduced-motion** | 模擬減少動畫偏好 | 無障礙動畫測試 |
| **Emulate auto dark mode** | 模擬自動深色模式 | 測試自動深色佈局 |
| **Emulate prefers-contrast** | 模擬對比度偏好 | 無障礙對比度測試 |

#### CSS 媒體功能模擬

Rendering 面板可模擬多種 CSS 媒體功能，無需修改系統設定：

```css
/* 可在 Rendering 面板中模擬的媒體查詢 */
@media (prefers-color-scheme: dark) { /* 深色模式 */ }
@media (prefers-reduced-motion: reduce) { /* 減少動畫 */ }
@media (prefers-contrast: more) { /* 高對比度 */ }
@media (forced-colors: active) { /* 強制色彩模式 */ }
@media print { /* 列印樣式 */ }

/* ❌ Bad: 過於複雜的選取器 */
.container > div:nth-child(odd) > .item:not(.hidden):hover { }

/* ✅ Good: 簡化選取器 */
.item-odd:hover { }

// 自訂 Performance 標記
performance.mark('component-render-start');
// ... 渲染邏輯 ...
performance.mark('component-render-end');
performance.measure(
    'Component Render',
    'component-render-start',
    'component-render-end'
);

// 這些自訂標記會出現在 Performance 面板的 Timings 列

### 8.3 Allocation Timeline

#### 操作步驟

1. Memory 面板 → 選擇 **Allocation instrumentation on timeline**
2. 勾選 **Record allocation stacks**
3. 點擊 **Start**
4. 執行操作
5. 點擊 **Stop**

#### 解讀結果

- **藍色柱狀** 表示分配的記憶體
- **灰色柱狀** 表示已被 GC 回收的記憶體
- 持續存在的藍色柱狀可能是洩漏

### 8.4 記憶體洩漏診斷流程

```mermaid
flowchart TD
    A["懷疑記憶體洩漏"] --> B["開啟工作管理員<br/>Shift+Esc"]
    B --> C{"記憶體持續<br/>增加?"}
    C -->|否| D["非記憶體洩漏<br/>可能是正常使用"]
    C -->|是| E["取 Heap Snapshot #1"]
    E --> F["執行疑似洩漏操作"]
    F --> G["手動觸發 GC<br/>Memory → 🗑️"]
    G --> H["取 Heap Snapshot #2"]
    H --> I["使用 Comparison 視圖"]
    I --> J{"Delta > 0 的<br/>可疑物件?"}
    J -->|是| K["檢查 Retainers<br/>找出引用鏈"]
    K --> L["修復洩漏原因"]
    J -->|否| M["擴大測試範圍<br/>重複操作多次"]

// ❌ Bad: 元件銷毀後事件監聽器未清除
export default {
    mounted() {
        window.addEventListener('resize', this.handleResize);
        this.interval = setInterval(this.fetchData, 5000);
    },
    // 沒有 beforeUnmount / beforeDestroy
};

// ✅ Good: 正確清理
export default {
    mounted() {
        window.addEventListener('resize', this.handleResize);
        this.interval = setInterval(this.fetchData, 5000);
    },
    beforeUnmount() {
        window.removeEventListener('resize', this.handleResize);
        clearInterval(this.interval);
    }
};

// ✅ Vue 3 Composition API + 自動清理
import { onMounted, onUnmounted } from 'vue';
import { useEventListener } from '@vueuse/core';

setup() {
    // VueUse 自動在 onUnmounted 時清理
    useEventListener(window, 'resize', handleResize);
}

// ❌ Bad: 異步操作在組件卸載後更新 state
useEffect(() => {
    fetch('/api/data')
        .then(r => r.json())
        .then(data => setData(data)); // 組件可能已卸載
}, []);

// ✅ Good: 使用 AbortController
useEffect(() => {
    const controller = new AbortController();

    fetch('/api/data', { signal: controller.signal })
        .then(r => r.json())
        .then(data => setData(data))
        .catch(err => {
            if (err.name !== 'AbortError') throw err;
        });

    return () => controller.abort(); // Cleanup
}, []);

// ✅ Good: 使用 cleanup flag
useEffect(() => {
    let isMounted = true;

    fetchData().then(data => {
        if (isMounted) setData(data);
    });

    return () => { isMounted = false; };
}, []);

// LocalStorage
localStorage.setItem('user', JSON.stringify({ name: '王小明' }));
JSON.parse(localStorage.getItem('user'));
localStorage.removeItem('user');
localStorage.clear();

// 查看所有 localStorage 內容
console.table(
    Object.entries(localStorage).map(([key, value]) => ({
        key,
        value: value.substring(0, 100),
        size: new Blob([value]).size + ' bytes'
    }))
);

// 列出所有 IndexedDB 資料庫
const databases = await indexedDB.databases();
console.table(databases);

// 開啟並讀取資料
const request = indexedDB.open('myDB', 1);
request.onsuccess = (event) => {
    const db = event.target.result;
    const tx = db.transaction('users', 'readonly');
    const store = tx.objectStore('users');
    const getAllRequest = store.getAll();
    getAllRequest.onsuccess = () => {
        console.table(getAllRequest.result);
    };
};

### 9.4 Service Worker

#### 操作方式

1. Application → Service Workers
2. 查看已註冊的 Service Worker

| 功能 | 說明 |
|------|------|
| **Update** | 強制更新 Service Worker |
| **Unregister** | 取消註冊 |
| **Update on reload** | 每次載入時更新 |
| **Bypass for network** | 繞過 Service Worker |

#### Service Worker 生命週期

```mermaid
stateDiagram-v2
    [*] --> Installing: register()
    Installing --> Installed: install event 完成
    Installing --> Redundant: install 失敗
    Installed --> Activating: 無其他 SW 控制中<br/>或 skipWaiting()
    Installed --> Waiting: 有其他 SW 控制中
    Waiting --> Activating: 舊 SW 被取代
    Activating --> Activated: activate event 完成
    Activating --> Redundant: activate 失敗
    Activated --> Redundant: 被新版取代

// 查詢儲存配額
const estimate = await navigator.storage.estimate();
console.log(`使用: ${(estimate.usage / 1024 / 1024).toFixed(2)} MB`);
console.log(`配額: ${(estimate.quota / 1024 / 1024).toFixed(2)} MB`);
console.log(`使用率: ${(estimate.usage / estimate.quota * 100).toFixed(2)}%`);

<!-- ❌ Bad: HTTP 資源 -->
<script src="http://cdn.example.com/app.js"></script>
<img src="http://images.example.com/logo.png">

<!-- ✅ Good: 使用 HTTPS -->
<script src="https://cdn.example.com/app.js"></script>
<img src="https://images.example.com/logo.png">

<!-- ✅ Better: 協議相對 URL 或直接使用 HTTPS -->
<script src="//cdn.example.com/app.js"></script>

<!-- ✅ Best: CSP 自動升級 -->
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("https://app.example.com")
            .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
            .allowedHeaders("Content-Type", "Authorization", "X-Request-ID")
            .allowCredentials(true)
            .maxAge(86400);
    }
}

location /api/ {
    # CORS Headers
    add_header 'Access-Control-Allow-Origin' 'https://app.example.com' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    add_header 'Access-Control-Max-Age' '86400' always;

    # Handle OPTIONS preflight
    if ($request_method = 'OPTIONS') {
        return 204;
    }

    proxy_pass http://backend;
}

> **實務案例**：建議先使用 `Content-Security-Policy-Report-Only` 模式部署 CSP，收集違規報告後再逐步收緊策略。Chrome Console 會清楚顯示哪些資源違反了 CSP 規則，方便調整設定。

---

## 第十一章：Recorder 面板、AI 輔助與其他進階功能

### 11.1 Recorder 面板（使用者流程錄製）

Recorder 面板可讓你直接在 DevTools 中錄製、重播及評估使用者操作流程，是自動化測試和效能分析的強大工具。

#### 開啟方式

`text
// 方法一：選單
DevTools → ⋮ → More tools → Recorder

// 方法二：Command Menu
Ctrl+Shift+P → Show Recorder

#### 重播與除錯

| 操作 | 說明 |
|------|------|
| **Replay** | 正常速度重播 |
| **Slow replay** | 慢速重播，便於觀察 |
| **Set breakpoint** | 在步驟上設定中斷點 |
| **Step through** | 逐步執行 |
| **Measure performance** | 重播並產生 Performance 追蹤 |

#### 匯出格式

| 格式 | 用途 |
|------|------|
| **JSON** | DevTools 原生格式，可再次匯入 |
| **Puppeteer** | Node.js 自動化腳本 |
| **Puppeteer (Replay)** | 使用 @puppeteer/replay 庫 |
| **Playwright** | 跨瀏覽器自動化腳本 |
| **擴充功能** | 透過第三方擴充功能匯出為其他格式 |

#### 企業應用場景

| 場景 | 說明 |
|------|------|
| **回歸測試** | 錄製關鍵流程，每次發布前重播驗證 |
| **效能基準** | 定期錄製並評估使用者流程效能 |
| **Bug 重現** | 錄製 Bug 重現步驟，附在 Issue 中 |
| **新人培訓** | 錄製標準操作流程供新成員學習 |
| **E2E 基礎** | 匯出為 Puppeteer/Playwright 腳本作為 E2E 測試基礎 |

> **注意**：Recorder 不會自動擷取懸停（hover）事件，需手動在錄製完成後新增懸停步驟。此功能僅適用於 Chrome（Chrome 97+），不適用於 Chromium。

### 11.2 AI 輔助功能（Gemini 整合）

Chrome DevTools 整合了 Google Gemini AI，可直接在開發工具中使用 AI 協助除錯。

#### 功能概覽

| 功能 | 說明 |
|------|------|
| **修正樣式錯誤** | AI 分析元素樣式並建議修正方案 |
| **分析網路要求** | AI 解析請求/回應標頭，解釋錯誤原因 |
| **瞭解來源檔案** | AI 說明腳本程式碼的用途 |
| **調查網頁成效** | AI 分析效能問題並提出優化建議 |

#### 啟用方式

1. 確認使用最新版 Chrome 並已登入 Google 帳號
2. 開啟 DevTools → **Settings** → **AI innovations**
3. 啟用 AI 輔助功能
4. 同意 Google 服務條款

#### 使用方式

##### 樣式除錯

`text
// 在 Elements 面板中選取元素
// 右鍵 → Ask AI 或在 AI 面板中輸入提示

提示範例：
- "Can you center this element?"
- "Why does this element overflow its container?"
- "How to make this layout responsive?"

##### 效能分析

`text
// 錄製 Performance 追蹤後
// 在 AI 面板中詢問

提示範例：
- "Help me optimize my LCP score"
- "Explain this Long Task and suggest improvements"
- "What is causing layout shifts on this page?"

#### 注意事項

| 項目 | 說明 |
|------|------|
| **區域限制** | 需位於支援的地區 |
| **年齡限制** | 必須年滿 18 歲 |
| **實驗性功能** | 功能仍在實驗階段，可能會變動 |
| **資料隱私** | 可透過企業政策控管資料使用方式 |
| **準確性** | AI 回應可能不完全正確，需驗證 |

> **實務案例**：AI 輔助功能特別適合快速分析複雜的 CSS 佈局問題和理解第三方庫的原始碼。但對於企業敏感資料，需注意資料可能會被傳送到 Google 伺服器，建議先確認企業的隱私政策。

### 11.3 其他實用面板

Chrome DevTools 提供多個額外的實用面板，可透過 Command Menu 或 `⋮ → More tools` 開啟。

#### Coverage（程式碼涵蓋率）面板

分析頁面中 JavaScript 和 CSS 的使用率，找出未使用的程式碼。

`text
開啟：Ctrl+Shift+P → Show Coverage

// 常見優化方式
// 1. 將未使用的 CSS 延遲載入
<link rel="preload" href="non-critical.css" as="style" onload="this.rel='stylesheet'">

// 2. 使用 dynamic import 延遲載入 JavaScript
const module = await import('./heavy-module.js');

// 3. Tree Shaking 移除未使用的 exports
import { specificFunction } from './utils'; // 只引入需要的函式

| 分析項目 | 說明 |
|----------|------|
| **Summary** | 元素數、樣式表數、樣式規則數等統計 |
| **Colors** | 頁面使用的所有顏色（含對比度分析） |
| **Font info** | 字體使用統計 |
| **Unused declarations** | 未使用的 CSS 宣告 |
| **Media queries** | 全部媒體查詢列表 |

#### Animations（動畫）面板

檢查和修改頁面上的 CSS 動畫和 CSS Transition。

`text
開啟：Ctrl+Shift+P → Show Animations

| 功能 | 說明 |
|------|------|
| **Diff 檢視** | 以 diff 格式顯示修改前後差異 |
| **檔案分組** | 按修改的檔案分組 |
| **還原** | 右鍵可還原特定修改 |
| **複製** | 複製修改後的完整檔案內容 |

#### Issues（問題）面板

自動偵測頁面中的問題，包含相容性、效能和安全性問題。

`text
開啟：Ctrl+Shift+P → Show Issues

| 功能 | 說明 |
|------|------|
| **3D 圖層檢視** | 以 3D 視角檢視頁面圖層堆疊 |
| **圖層詳細資訊** | 查看圖層大小、原因、記憶體佔用 |
| **合成原因** | 為何元素被提升為獨立圖層 |
| **慢速捲動區域** | 標示影響捲動效能的區域 |

#### Performance Monitor（效能監控）面板

即時監控頁面的效能指標。

`text
開啟：Ctrl+Shift+P → Show Performance Monitor

| 功能 | 說明 |
|------|------|
| **Location** | 模擬地理位置（經緯度） |
| **Orientation** | 模擬裝置方向（加速度計、陀螺儀） |
| **Touch** | 強制啟用觸控模式 |
| **Idle** | 模擬閒置狀態 |

#### WebAuthn 面板

模擬驗證器（Authenticator），用於測試 WebAuthn 身份驗證流程。

`text
開啟：Ctrl+Shift+P → Show WebAuthn

| 功能 | 說明 |
|------|------|
| **播放器列表** | 顯示頁面中所有媒體播放器 |
| **屬性** | codec、解析度、位元率等技術資訊 |
| **事件** | 媒體事件時間軸 |
| **訊息** | 錯誤和警告訊息 |

### 11.4 遠端除錯

Chrome DevTools 支援遠端除錯 Android 裝置、WebView 和其他 Chrome 實例。

#### Android 遠端除錯

1. **手機設定**：
   - 設定 → 開發人員選項 → 啟用 USB 除錯
   - （若未看到開發人員選項，前往「關於手機」點擊「版本號碼」7 次）

2. **USB 連接**：
   - 使用 USB 線連接手機與電腦
   - 手機上允許 USB 除錯授權

3. **開啟 Chrome Inspect**：

4. **除錯操作**：
- 在裝置列表中找到手機上開啟的 Chrome 分頁
- 點擊 **inspect** 開啟 DevTools
- DevTools 會同步顯示手機畫面並允許完整除錯

#### Port Forwarding（通訊埠轉送）

讓 Android 裝置存取電腦上的本地開發伺服器：

1. 在 `chrome://inspect` 頁面點擊 **Port forwarding...**
2. 設定轉送規則：

| 裝置埠 | 本機位址 | 說明 |
|--------|----------|------|
| `8080` | `localhost:8080` | 本地開發伺服器 |
| `3000` | `localhost:3000` | React 開發伺服器 |
| `4200` | `localhost:4200` | Angular 開發伺服器 |

3. 勾選 **Enable port forwarding**
4. 手機上即可透過 `localhost:8080` 存取電腦的開發伺服器

#### WebView 遠端除錯

除錯 Android 應用中的 WebView：

1. 確認 App 已啟用 WebView 除錯：

```java
// Android App 程式碼
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
 WebView.setWebContentsDebuggingEnabled(true);
}

// webpack.config.js - 生產環境使用 hidden-source-map
module.exports = {
    devtool: 'hidden-source-map', // 產生 .map 但不在 JS 中引用
};

// 在 DevTools 中手動載入：
// Sources → 右鍵 JS 檔案 → Add source map...
// 輸入 .map 檔案 URL

## Bug 報告

**環境資訊：**
- 瀏覽器版本：Chrome 131.0.6778.85
- 作業系統：Windows 11
- 螢幕解析度：1920×1080
- 網路環境：公司內網 / 4G / WiFi

**重現步驟：**
1. 開啟頁面 https://app.example.com/dashboard
2. 點擊「帳務查詢」按鈕
3. 輸入日期範圍 2025/01/01 ~ 2025/12/31
4. 點擊「查詢」

**預期行為：**
顯示查詢結果列表

**實際行為：**
頁面卡住無回應

**附加資訊：**
- Console 錯誤截圖：[附圖]
- Network 面板截圖：[附圖]
- HAR 檔案：[附件]

// .vscode/settings.json - 團隊標準 Chrome Debug 設定
{
    "debug.javascript.debugByLinkOptions": "always",
    "debug.javascript.autoAttachFilter": "smart",
    "debug.javascript.terminalOptions": {
        "skipFiles": [
            "<node_internals>/**",
            "**/node_modules/**"
        ]
    }
}

## DevTools 驗證清單

- [ ] Console 無新增錯誤/警告
- [ ] Network 所有 API 正常回應
- [ ] 無新增效能問題（Performance 錄製）
- [ ] 無新增記憶體洩漏（Memory Snapshot）
- [ ] Lighthouse Performance ≥ 90
- [ ] RWD 測試通過（Mobile / Tablet / Desktop）