Browser DevTools Tips — Debug เร็วขึ้น 10 เท่า

Console Shortcuts ที่ไม่ค่อยรู้

// $0 — อ้างถึง element ที่เลือกใน Elements panel
$0.classList.add('highlight'); // เพิ่ม class ทันที

// $('selector') — เหมือน querySelector
$('.nav-item');

// $$('selector') — เหมือน querySelectorAll แต่ return array
$$('img').filter(img => !img.alt); // หารูปที่ไม่มี alt text

// $_ — ผลลัพธ์ล่าสุดใน console
2 + 2
$_ // 4

// copy() — copy ผลลัพธ์ไปที่ clipboard
copy($$('a').map(a => a.href)); // copy ทุก URL ในหน้า

Console Methods ที่มีประโยชน์

// console.table() — แสดง array ของ objects เป็น table
const users = [{ name: 'A', age: 25 }, { name: 'B', age: 30 }];
console.table(users);

// console.time() — วัดเวลาการ execute
console.time('fetch-users');
await fetch('/api/users');
console.timeEnd('fetch-users'); // "fetch-users: 123.45ms"

// console.group() — จัดกลุ่ม logs
console.group('User Auth');
console.log('Checking token...');
console.log('Token valid: true');
console.groupEnd();

// console.assert() — log เฉพาะเมื่อ condition false
console.assert(user.id > 0, 'Invalid user ID', user);

Network Tab

Filter bar:
- "fetch" — กรองเฉพาะ fetch/XHR requests
- "img" — กรองเฉพาะรูปภาพ
- "doc" — กรองเฉพาะ HTML documents
- "-" (minus) prefix — ยกเว้น เช่น "-favicon" ซ่อน favicon
- "domain:fonts.google.com" — กรองเฉพาะ domain

Throttling:
- เปิด "Slow 3G" เพื่อทดสอบบน slow connection
- เปิด "Offline" เพื่อทดสอบ offline behavior

// Monitor XHR/fetch จาก Console
monitorEvents(window, ['fetch']); // ดู fetch events

// ดู request ล่าสุด
performance.getEntriesByType('resource').slice(-5);

CSS Live Editing

Elements panel → Styles tab:
- คลิกที่สี → color picker เปิดขึ้น
- คลิก + → เพิ่ม rule ใหม่ใน inspector stylesheet
- Shift+คลิกที่สี → สลับ format (hex/rgb/hsl)
- กด ↑/↓ บนตัวเลข → เพิ่ม/ลด 1
- กด Shift+↑/↓ → เพิ่ม/ลด 10
- กด Alt+↑/↓ → เพิ่ม/ลด 0.1

Computed tab:
- ดู computed value ของทุก property
- คลิก → link ไปยัง rule ที่ apply
- กด filter แล้วพิมพ์ property ที่หา

Performance Tab

Record flow:
1. คลิก Record
2. ทำ action ที่ต้องการ profile
3. Stop
4. ดู Flame Chart

อ่าน Flame Chart:
- กว้าง = ใช้เวลานาน
- ซ้อนกัน = function calls nested
- สีแดง = Long Task (>50ms) — potential jank
- สีเหลือง = JavaScript execution
- สีม่วง = Rendering (Layout, Paint)
- สีเขียว = Painting

JavaScript Debugger

// หยุดที่บรรทัดนี้เสมอ
debugger;

// หยุดเมื่อ condition เป็น true
if (user.id === problematicId) debugger;

Breakpoints ใน Sources tab:
- คลิกเลขบรรทัด → Line breakpoint
- Right-click → Conditional breakpoint (หยุดเมื่อ condition เป็น true)
- Event Listener Breakpoints → หยุดเมื่อ event เกิดขึ้น
- XHR/Fetch Breakpoints → หยุดเมื่อ request ไปยัง URL นั้น

Accessibility Panel

Elements → Accessibility tab:
- ดู Accessibility tree ของ element
- ดูว่า screen reader จะอ่านอะไร
- ตรวจว่า role, name, state ถูกต้อง

หรือใช้:
- Lighthouse → Accessibility audit
- axe DevTools extension

Dark Mode / Prefers Testing

// จำลอง prefers-color-scheme โดยไม่ต้องเปลี่ยน OS
// DevTools → Rendering tab → Emulate CSS media feature:
// prefers-color-scheme: dark/light

// หรือจาก Console
window.matchMedia('(prefers-color-scheme: dark)').matches;

Useful Chrome DevTools Flags

DevTools → Settings (F1) → Experiments:
- "CSS Grid tooling" — แสดง grid overlay
- "CSS container queries support" — badge สำหรับ containers
- "CSS Flexbox tooling" — แสดง flexbox overlay

Keyboard Shortcuts ที่ใช้บ่อย