การอ่านสแต็กเทรซ
ติดตามข้อผิดพลาดย้อนกลับไปยังต้นเหตุ
การอ่านสแต็กเทรซ เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
สแต็ก trace คืออะไร
สแต็ก trace คือรายการการเรียกฟังก์ชันที่กำลังทำงานอยู่ในขณะที่เกิดข้อผิดพลาด แสดงเส้นทางที่โปรแกรมใช้จนมาถึงจุดล้มเหลว
การอ่านจากบนลงล่าง
เฟรมบนสุดของ trace คือจุดที่เกิดข้อผิดพลาด แต่ละบรรทัดถัดลงมาจะแสดงผู้เรียกต่อเนื่องลงไปจนถึงจุดเริ่มต้นเดิมของโปรแกรม
ส่วนประกอบของเฟรม
โดยทั่วไปแต่ละเฟรมจะระบุชื่อฟังก์ชัน ตามด้วยไฟล์ หมายเลขบรรทัด และคอลัมน์ที่เกิดการเรียก ซึ่งช่วยระบุตำแหน่งที่แน่นอนได้
ข้อความข้อผิดพลาด
เหนือเฟรมต่าง ๆ จะมีชื่อและข้อความข้อผิดพลาด เช่น TypeError ที่อธิบายว่าเกิดอะไรขึ้น ควรอ่านส่วนนี้ก่อน เพราะมักอธิบายสาเหตุไว้
function getName(user) {
return user.name
}
// calling getName with undefined would throw a TypeError
console.log("Reading the message tells you what failed")การติดตามลำดับการเรียก
เมื่ออ่านลงด้านล่าง คุณจะสร้างลำดับเหตุการณ์ขึ้นใหม่ได้ว่า ฟังก์ชันใดเรียกฟังก์ชันใด จนมาถึงบรรทัดที่ล้มเหลว
โค้ดของคุณกับโค้ดไลบรารี
trace มักมีเฟรมของไลบรารีรวมอยู่ด้วย ให้สนใจเฟรมบนสุดที่เป็นของไฟล์ต้นฉบับของคุณเอง เพราะโดยทั่วไปจุดที่ต้องแก้ไขจะอยู่ตรงนั้น
สแต็ก trace แบบไม่พร้อมกัน
DevTools สมัยใหม่จะเชื่อมการเรียกแบบไม่พร้อมกันเข้าด้วยกัน โดยแสดงบริบทต้นทางของพรอมิสหรือเครื่องจับเวลา เพื่อไม่ให้ trace ขาดหายตรงรอยต่อ
การสร้าง trace ด้วยตนเอง
console.trace พิมพ์สแต็กการเรียกปัจจุบันโดยไม่ทำให้เกิดข้อผิดพลาด ช่วยให้คุณเห็นว่าฟังก์ชันถูกเรียกมาถึงจุดนั้นได้อย่างไร
function inner() {
console.trace("reached inner")
}
function outer() {
inner()
}
outer()คุณสมบัติ stack ของ Error
อ็อบเจ็กต์ Error มีคุณสมบัติ stack ซึ่งเก็บ trace ในรูปข้อความ คุณสามารถบันทึกข้อความนี้หรือส่งไปยังบริการรายงานข้อผิดพลาดได้
const err = new Error("Something failed")
console.log(typeof err.stack)โค้ดย่อและแผนผังแหล่งที่มา
โค้ดสำหรับใช้งานจริงมักถูกย่อให้เล็กลง ทำให้ trace อ่านได้ยาก แผนผังแหล่งที่มาจะแปลงตำแหน่งในโค้ดย่อกลับไปยังไฟล์ต้นฉบับ เพื่อให้ trace อ่านได้ง่าย
จาก trace ไปสู่การแก้ไข
ใช้ข้อความข้อผิดพลาด เฟรมบนสุดของโค้ดผู้ใช้ และหมายเลขบรรทัดร่วมกันเพื่อระบุตำแหน่งข้อผิดพลาด จากนั้นตรวจสอบตัวแปรตรงจุดนั้นเพื่อยืนยันสาเหตุ
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเรื่องสแต็ก trace ของคุณ
สรุป
สรุป: สแต็ก trace เผยเส้นทางที่นำไปสู่ข้อผิดพลาด
- เฟรมบนสุดคือจุดที่เกิดข้อผิดพลาด
- เฟรมด้านล่างคือผู้เรียก
- ให้สนใจเฟรมบนสุดที่อยู่ในโค้ดของคุณเอง
- แผนผังแหล่งที่มาทำให้ trace ของโค้ดย่ออ่านได้ง่าย
const err = new Error("fail")
console.log(typeof err.stack)คำถามที่พบบ่อย
บทเรียน “การอ่านสแต็กเทรซ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การอ่านสแต็กเทรซ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การอ่านสแต็กเทรซ”
ติดตามข้อผิดพลาดย้อนกลับไปยังต้นเหตุ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การอ่านสแต็กเทรซ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- นอกเหนือจาก console.log
- การตั้งจุดหยุด
- การไล่ทำงานทีละขั้นในโค้ด
- การอ่านสแต็กเทรซ