ใช้ Chrome Developer Tools เพื่อค้นหาตำแหน่งที่ประกาศฟังก์ชัน JavaScript ได้อย่างรวดเร็ว
ขั้นตอนการค้นหา
- เปิด DevTools - กด F12 หรือ Ctrl+Shift+I (Windows/Linux) / Cmd+Option+I (Mac)
- เปิด Search ทั่วโปรเจกต์ - กด Ctrl+Shift+F (Windows/Linux) / Cmd+Option+F (Mac)
- เปิด Regular Expression - คลิกไอคอน
.*(หรือกด Alt+R) เพื่อเปิดโหมด Regex - ค้นหา - พิมพ์ชื่อฟังก์ชันหรือ pattern เช่น
function\s+myFunction
วิธีเพิ่มเติม
1. ค้นหาในไฟล์เฉพาะ (Ctrl+P)
- กด Ctrl+P พิมพ์ชื่อไฟล์
- ในไฟล์นั้น กด Ctrl+F ค้นหาในไฟล์
2. Go to Definition (ใน Sources Tab)
- ในแท็บ Sources คลิกขวาที่ชื่อฟังก์ชัน → Go to definition
- หรือ วางเมาส์ที่ฟังก์ชัน กด Ctrl + คลิก
3. ใช้ Console
// พิมพ์ชื่อฟังก์ชันใน Console myFunction // จะแสดง [Function: myFunction] คลิกเพื่อไปที่ definition
4. Call Stack (ขณะ Debug)
- ตั้ง Breakpoint
- เมื่อหยุดที่ breakpoint → ดู Call Stack ด้านขวา
- คลิกที่ frame ใด frame นั้นเพื่อไปที่โค้ด
เคล็ดลับ Regex สำหรับค้นหา
| Pattern | ค้นหา |
|---|---|
function\s+myFunc | Function declaration |
myFunc\s*=\s*function | Function expression |
const\s+myFunc\s*=\s* | Arrow function assignment |
class\s+MyClass | Class definition |
หมายเหตุ
ภาพประกอบในบทความต้นฉบับ (ไอคอน regex, หน้าต่าง DevTools) ไม่ได้รวมอยู่ในเนื้อหานี้ เนื่องเป็นภาพจากระบบเดิม สามารถทำตามขั้นตอนข้างต้นได้โดยตรงใน Chrome DevTools ปัจจุบัน
