CHROME DEVTOOLS THAM KHẢO NHANH
Elements, Console, Network, Performance, debug
Elements
Kiểm Tra & Chỉnh Sửa
| 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
| 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
| $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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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ữ
| 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
| 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
| 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
| 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
| 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
| 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
| 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
| 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)
| 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
| 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
| 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 });