# Chrome DevTools Tham Khảo Nhanh

*Elements, Console, Network, Performance, debug*

> Source: Chrome DevTools Documentation (developer.chrome.com/docs/devtools) · MIT

## Elements

### Kiểm Tra & Chỉnh Sửa

| Command | Description |
|---------|-------------|
| `Right-click -> Inspect` | Mở panel Elements cho phần tử |
| `Double-click tag/attribute` | Chỉnh sửa HTML trực tiếp |
| `Delete key` | Xóa node đang chọn |
| `Ctrl+Z` | Hoàn tác thay đổi DOM |
| `H key` | Ẩn/hiện phần tử đang chọn |
| `Drag node` | Di chuyển phần tử trong cây DOM |

### Panel Styles

| Command | Description |
|---------|-------------|
| `element.style {}` | Thêm inline style cho phần tử |
| `Click property value` | Chỉnh sửa giá trị CSS trực tiếp |
| `Checkbox cạnh rule` | Bật/tắt thuộc tính CSS |
| `:hov button` | Ép pseudo-state (:hover, :focus) |
| `.cls button` | Thêm/xóa CSS class |
| `Color swatch` | Mở color picker |
| `Tab Computed` | Xem giá trị CSS tính toán cuối cùng |

## Console

### Console API

```
console.log("info");          console.warn("warning");
console.error("error");       console.table(arrayOrObj);
console.group("label");       console.groupEnd();
console.time("t"); /*...*/ console.timeEnd("t");
```

### Tiện Ích Console

| Command | Description |
|---------|-------------|
| `$0` | Phần tử đang chọn trong Elements |
| `$('sel') / $$('sel')` | Rút gọn querySelector / querySelectorAll |
| `copy(obj)` | Sao chép object thành chuỗi vào clipboard |
| `clear()` | Xóa đầu ra console |
| `monitor(fn)` | Log các lần gọi hàm fn |
| `monitorEvents(el, 'click')` | Log sự kiện trên phần tử |
| `keys(obj) / values(obj)` | Keys / values của object |
| `$_ ` | Kết quả của biểu thức vừa thực thi |

### Lọc

| Command | Description |
|---------|-------------|
| `Log levels dropdown` | Lọc theo verbose/info/warn/error |
| `Filter text box` | Tìm kiếm trong đầu ra console |
| `-url:extension` | Loại trừ message theo URL nguồn |
| `context: dropdown` | Lọc theo ngữ cảnh iframe/worker |

## Network

### Tính Năng Panel Network

| Command | Description |
|---------|-------------|
| `Filter bar` | Lọc theo loại: XHR, JS, CSS, Img, Doc, WS |
| `Search (Ctrl+F)` | Tìm kiếm trong tất cả body request/response |
| `Preserve log` | Giữ log khi điều hướng trang |
| `Disable cache` | Bỏ qua cache trình duyệt khi DevTools mở |
| `Throttling dropdown` | Giả lập Slow 3G, Fast 3G, Offline |
| `Block request URL` | Chuột phải vào request -> Block URL |

### Tab Chi Tiết Request

| Command | Description |
|---------|-------------|
| `Headers` | Header request/response, status code |
| `Payload` | Body POST, query parameters |
| `Preview` | Response được định dạng (JSON, HTML, ảnh) |
| `Response` | Body response thô |
| `Timing` | DNS, connect, TLS, TTFB, download |
| `Initiator` | Stack trace kích hoạt request |
| `Cookies` | Cookie được gửi/nhận |

### Sao Chép & Xuất

| Command | Description |
|---------|-------------|
| `Right-click -> Copy as cURL` | Sao chép request dưới dạng lệnh cURL |
| `Copy as fetch` | Sao chép dưới dạng fetch() JavaScript |
| `Export HAR` | Xuất tất cả request dưới dạng file HAR |
| `Copy response` | Sao chép body response vào clipboard |

## Sources

### Breakpoints

| Command | Description |
|---------|-------------|
| `Click số dòng` | Bật/tắt breakpoint dòng |
| `Right-click -> Conditional` | Dừng chỉ khi biểu thức đúng |
| `Right-click -> Logpoint` | Log mà không dừng thực thi |
| `DOM breakpoint` | Dừng khi subtree/attribute/node bị thay đổi |
| `XHR/Fetch breakpoint` | Dừng khi URL chứa chuỗi |
| `Event listener breakpoint` | Dừng khi loại sự kiện cụ thể xảy ra |

### Điều Khiển Debugger

| Command | Description |
|---------|-------------|
| `F8 / Ctrl+\` | Tiếp tục / Tạm dừng thực thi |
| `F10` | Bước qua lời gọi hàm tiếp theo |
| `F11` | Bước vào lời gọi hàm |
| `Shift+F11` | Bước ra khỏi hàm hiện tại |
| `Ctrl+Shift+P -> "never pause"` | Tắt tất cả breakpoint |

### Panel Debug

| Command | Description |
|---------|-------------|
| `Watch` | Theo dõi giá trị biểu thức |
| `Scope` | Biến local, closure, global |
| `Call Stack` | Chuỗi gọi hàm |
| `Snippets` | Lưu và chạy đoạn code JS tái sử dụng |

## Performance

### Ghi Lại

| Command | Description |
|---------|-------------|
| `Record button (Ctrl+E)` | Bắt đầu/dừng ghi performance |
| `Reload button` | Ghi performance khi tải trang |
| `Screenshots checkbox` | Chụp ảnh timeline |
| `CPU throttle dropdown` | Giả lập làm chậm CPU 4x/6x |
| `Network throttle` | Giả lập mạng chậm khi ghi |

### Đọc Flame Chart

| Command | Description |
|---------|-------------|
| `Main track` | Thực thi JavaScript (flame chart) |
| `Network track` | Timeline network request |
| `Frames track` | FPS và thời gian frame |
| `Timings track` | Marker FCP, LCP, DCL, Load |
| `Thanh vàng` | JavaScript (scripting) |
| `Thanh tím` | Layout / rendering |
| `Thanh xanh` | Painting / compositing |

### Bottom-Up & Summary

| Command | Description |
|---------|-------------|
| `Tab Summary` | Phân tích thời gian: scripting, rendering, v.v. |
| `Tab Bottom-Up` | Các hàm tốn thời gian nhất trước |
| `Tab Call Tree` | Phân cấp gọi hàm từ gốc đến lá |
| `Tab Event Log` | Danh sách sự kiện theo thứ tự thời gian |

## Application

### Lưu Trữ

| Command | Description |
|---------|-------------|
| `Local Storage` | Xem/sửa cặp key-value theo origin |
| `Session Storage` | Xem/sửa storage theo phiên |
| `IndexedDB` | Kiểm tra object store và record |
| `Cookies` | Xem/sửa/xóa cookie theo domain |
| `Cache Storage` | Kiểm tra cache của Service Worker |
| `Clear storage` | Xóa hàng loạt các loại storage đã chọn |

### Service Workers & Manifest

| Command | Description |
|---------|-------------|
| `Service Workers` | Xem đăng ký, trạng thái, push/sync |
| `Update on reload` | Ép cập nhật SW khi reload |
| `Bypass for network` | Bỏ qua SW, đi thẳng tới mạng |
| `Manifest` | Xem chi tiết web app manifest |
| `Offline checkbox` | Giả lập chế độ offline |

## Lighthouse

### Chạy Audit

| Command | Description |
|---------|-------------|
| `Mode: Navigation` | Audit toàn bộ lần tải trang |
| `Mode: Timespan` | Audit tương tác người dùng theo thời gian |
| `Mode: Snapshot` | Audit trạng thái trang hiện tại |
| `Categories` | Performance, Accessibility, Best Practices, SEO |
| `Device` | Giả lập Mobile hoặc Desktop |

### Các Chỉ Số Quan Trọng

| Command | Description |
|---------|-------------|
| `FCP (First Contentful Paint)` | Thời gian đến nội dung hiển thị đầu tiên |
| `LCP (Largest Contentful Paint)` | Thời gian đến phần tử lớn nhất hiển thị |
| `TBT (Total Blocking Time)` | Tổng thời gian bị chặn bởi long task |
| `CLS (Cumulative Layout Shift)` | Điểm độ ổn định bố cục |
| `SI (Speed Index)` | Tốc độ hiển thị nội dung |
| `INP (Interaction to Next Paint)` | Độ phản hồi với tương tác người dùng |

## Phím Tắt

### Mở DevTools

| Command | Description |
|---------|-------------|
| `F12 / Ctrl+Shift+I` | Bật/tắt DevTools |
| `Ctrl+Shift+J` | Mở panel Console |
| `Ctrl+Shift+C` | Mở Elements + chế độ inspect |
| `Ctrl+Shift+M` | Bật/tắt thanh công cụ thiết bị (responsive) |

### Điều Hướng & Tìm Kiếm

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+P` | Command Menu (chạy bất kỳ hành động nào) |
| `Ctrl+P` | Mở file (Go to File) |
| `Ctrl+Shift+F` | Tìm kiếm trên tất cả sources |
| `Ctrl+G` | Đến số dòng trong Sources |
| `Ctrl+[ / Ctrl+]` | Chuyển đổi giữa các panel |

### Chỉnh Sửa & Console

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+D` | Chuyển đổi vị trí dock DevTools |
| `Ctrl+L (Console)` | Xóa đầu ra console |
| `Shift+Enter (Console)` | Nhập nhiều dòng |
| `Esc` | Bật/tắt console drawer |
| `Ctrl+K (Console)` | Xóa console |

## Debug Mobile

### Device Toolbar

| Command | Description |
|---------|-------------|
| `Ctrl+Shift+M` | Bật/tắt thanh thiết bị |
| `Device dropdown` | Kích thước điện thoại/máy tính bảng có sẵn |
| `Responsive mode` | Tự do thay đổi kích thước viewport |
| `DPR dropdown` | Thay đổi tỷ lệ pixel thiết bị |
| `Throttling` | Giả lập CPU + mạng di động |
| `Show media queries` | Hiển thị CSS breakpoint |

### Remote Debugging (Android)

| Command | Description |
|---------|-------------|
| `1. Bật USB debugging` | Settings -> Developer Options trên thiết bị |
| `2. Kết nối USB` | Kết nối thiết bị Android với máy tính |
| `3. chrome://inspect` | Mở trong Chrome máy tính |
| `4. Click Inspect` | Mở DevTools cho trang mobile |

*Cần Chrome trên cả máy tính và thiết bị Android*

### Ghi Đè Sensors

| Command | Description |
|---------|-------------|
| `Geolocation` | Ghi đè tọa độ GPS |
| `Orientation` | Giả lập hướng thiết bị |
| `Touch` | Giả lập sự kiện cảm ứng |
| `Idle detection` | Ghi đè API phát hiện idle |

## Các Pattern Thường Gặp

### Debug Sự Cố Mạng

```
// Trong Console: theo dõi tất cả fetch request
const origFetch = window.fetch;
window.fetch = (...args) => {
  console.log('fetch:', args);
  return origFetch(...args);
};
```

### Quy Trình Performance

| Command | Description |
|---------|-------------|
| `1. Lighthouse audit` | Xác định vấn đề performance hàng đầu |
| `2. Performance recording` | Tìm long task trong flame chart |
| `3. Tab Coverage` | Tìm CSS/JS không dùng (Ctrl+Shift+P -> Coverage) |
| `4. Network waterfall` | Xác định tài nguyên blocking |
| `5. Tab Rendering` | Hiển thị paint/layout (Ctrl+Shift+P -> Rendering) |

### Đoạn Code Console Hữu Ích

```
// Liệt kê tất cả event listener trên phần tử
getEventListeners($0);

// Theo dõi layout shift
new PerformanceObserver(l => l.getEntries().forEach(
  e => console.log('CLS:', e)
)).observe({ type: 'layout-shift', buffered: true });
```