Debugging Skill
Overview
Skill สำหรับวิเคราะห์ปัญหา หาสาเหตุ และแก้ไขบั๊กอย่างมีประสิทธิภาพ
Debugging Process
Step 1: รวบรวมข้อมูล
- •อ่าน Error Message - เข้าใจ error ที่เกิดขึ้น
- •ดู Stack Trace - หา line และ file ที่เกิดปัญหา
- •ตรวจสอบ Logs - หา pattern หรือ context เพิ่มเติม
- •ถาม Context - สอบถามผู้ใช้ว่าเกิดอะไรขึ้นก่อนหน้า
Step 2: วิเคราะห์ปัญหา
- •Reproduce - พยายามทำซ้ำปัญหา
- •Isolate - แยกส่วนที่มีปัญหาออกมา
- •Hypothesis - ตั้งสมมติฐานสาเหตุ
- •Verify - ทดสอบสมมติฐาน
Step 3: แก้ไข
- •Fix - แก้ไขปัญหา
- •Test - ทดสอบว่าแก้ได้จริง
- •Verify Side Effects - ตรวจสอบผลกระทบอื่นๆ
- •Document - บันทึกสิ่งที่แก้ไข
Common Error Patterns
Frontend Errors
React
| Error | สาเหตุที่พบบ่อย |
|---|---|
| "Cannot read property of undefined" | ไม่ได้เช็ค null/undefined ก่อนใช้ |
| "Too many re-renders" | State update ใน render loop |
| "Invalid hook call" | Hook เรียกนอก component หรือ conditional |
| "Key prop missing" | ไม่ใส่ key ใน list items |
Angular
| Error | สาเหตุที่พบบ่อย |
|---|---|
| "ExpressionChangedAfterItHasBeenChecked" | State change ใน lifecycle hook |
| "NullInjectorError" | ไม่ได้ provide service |
| "Template parse errors" | Syntax ผิดใน template |
Vue
| Error | สาเหตุที่พบบ่อย |
|---|---|
| "Property X was accessed during render" | Reactive property ไม่ถูก define |
| "Maximum recursive updates exceeded" | Watcher loop |
Backend Errors
Spring Boot
| Error | สาเหตุที่พบบ่อย |
|---|---|
| "No qualifying bean" | Bean ไม่ถูก inject |
| "LazyInitializationException" | Entity access นอก transaction |
| "ConstraintViolationException" | Database constraint violation |
| "HttpMessageNotReadableException" | JSON parse error |
Node.js
| Error | สาเหตุที่พบบ่อย |
|---|---|
| "ECONNREFUSED" | Service/Database ไม่พร้อม |
| "CORS error" | CORS ไม่ถูกตั้งค่า |
| "JWT malformed" | Token format ผิด |
Python
| Error | สาเหตุที่พบบ่อย |
|---|---|
| "IntegrityError" | Duplicate key หรือ FK violation |
| "ValidationError" | Pydantic validation fail |
| "ImportError" | Module ไม่ถูก install |
Database Errors
| Error | สาเหตุที่พบบ่อย |
|---|---|
| "Connection refused" | Database ไม่ running หรือ config ผิด |
| "Duplicate key" | Primary key หรือ unique constraint |
| "Foreign key violation" | Reference ไปยัง row ที่ไม่มี |
| "Deadlock" | Transaction conflict |
Debugging Tools
Browser DevTools
- •Console - ดู errors และ logs
- •Network - ตรวจสอบ API calls
- •Sources - Breakpoints และ step through
- •React/Vue/Angular DevTools - Component inspection
Backend Debugging
- •Logging - เพิ่ม log statements
- •Debugger - Attach debugger (VSCode, IntelliJ)
- •Postman/Insomnia - Test API endpoints
- •Database clients - ตรวจสอบ data
Performance Debugging
- •Lighthouse - Web performance
- •Chrome Performance tab - Runtime performance
- •Memory profiler - Memory leaks
- •SQL EXPLAIN - Query optimization
Debugging Checklist
- • อ่าน error message ให้ละเอียด
- • ดู full stack trace
- • ตรวจสอบ recent changes
- • ลอง reproduce ปัญหา
- • เพิ่ม logging ถ้าจำเป็น
- • ตรวจสอบ dependencies/versions
- • ค้นหา similar issues
- • ทดสอบ fix อย่างละเอียด