การตั้งจุดหยุด
หยุดการทำงานชั่วคราวและตรวจสอบสถานะ
การตั้งจุดหยุด เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
จุดพักการทำงานคืออะไร
จุดพักการทำงานบอกตัวแก้จุดบกพร่องให้หยุดการทำงานที่บรรทัดหนึ่งโดยเฉพาะ ขณะที่หยุดอยู่ คุณสามารถตรวจสอบตัวแปรและสแต็กการเรียกเพื่อทำความเข้าใจสถานะของโปรแกรมได้
เหตุใดจุดพักการทำงานจึงดีกว่าการบันทึกข้อความ
เมื่อเทียบกับการกระจายคำสั่งบันทึกข้อความไว้ตามจุดต่าง ๆ จุดพักการทำงานช่วยให้คุณตรวจสอบตัวแปรทุกตัวในขอบเขต ณ ช่วงเวลาหนึ่งได้โดยไม่ต้องเปลี่ยนโค้ด และยังดำเนินการต่อหรือก้าวต่อจากจุดนั้นได้
การเปิดแผงแหล่งที่มา
ใน DevTools ของเบราว์เซอร์ จุดพักการทำงานอยู่ในแผงแหล่งที่มา คุณเปิด DevTools เปลี่ยนไปที่แผงแหล่งที่มา แล้วค้นหาไฟล์สคริปต์ในแผนผังไฟล์
การตั้งจุดพักที่บรรทัด
คลิกบริเวณหมายเลขบรรทัดถัดจากคำสั่งเพื่อตั้งจุดพักการทำงานที่บรรทัดนั้น จะมีเครื่องหมายปรากฏขึ้น และการทำงานจะหยุดก่อนที่บรรทัดนั้นกำลังจะทำงาน
คำสั่ง debugger
การเพิ่มคำสั่ง debugger ลงในโค้ดจะเรียกจุดพักการทำงานผ่านโปรแกรมเมื่อเปิด DevTools อยู่ ควรนำคำสั่งนี้ออกก่อนส่งโค้ดใช้งานจริง
function compute(x) {
const doubled = x * 2
// a debugger statement on the next line would pause execution here
return doubled + 1
}จุดพักแบบมีเงื่อนไข
การคลิกขวาที่บรรทัดทำให้คุณเพิ่มเงื่อนไขได้ ตัวแก้จุดบกพร่องจะหยุดเฉพาะเมื่อนิพจน์เป็นจริง ซึ่งมีประโยชน์อย่างยิ่งภายในลูป
จุดบันทึกข้อความ
จุดบันทึกข้อความพิมพ์ข้อความโดยไม่หยุดการทำงาน คล้ายคำสั่งบันทึกข้อความชั่วคราวที่เพิ่มผ่าน DevTools แทนการแก้ไขโค้ดต้นฉบับ
การตรวจสอบตัวแปร
เมื่อหยุดการทำงาน แผงขอบเขตจะแสดงตัวแปรเฉพาะที่ ตัวแปรจากคลอสเชอร์ และตัวแปรส่วนกลางพร้อมค่าปัจจุบัน ทำให้คุณตรวจสอบสมมติฐานได้
นิพจน์เฝ้าดู
แผงเฝ้าดูจะประเมินนิพจน์ที่คุณกำหนดทุกครั้งที่หยุดการทำงาน ทำให้คุณติดตามค่าที่คำนวณขึ้นขณะก้าวผ่านโค้ดได้
จุดพักเมื่อเกิดเหตุการณ์
DevTools ยังสามารถหยุดการทำงานเมื่อเกิดเหตุการณ์ เช่น การคลิกหรือคำขอเครือข่าย โดยหยุดทันทีที่เหตุการณ์นั้นเกิดขึ้น
การจัดการจุดพักการทำงาน
แผงจุดพักการทำงานจะแสดงจุดพักทั้งหมดของคุณ คุณสามารถปิดใช้งานจุดพักชั่วคราวด้วยช่องทำเครื่องหมาย หรือลบออกเมื่อแก้จุดบกพร่องเสร็จแล้ว
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเรื่องจุดพักการทำงานของคุณ
สรุป
สรุป: จุดพักการทำงานจะหยุดการทำงานเพื่อให้ตรวจสอบได้
- ตั้งจุดพักได้ที่บริเวณหมายเลขบรรทัดในแผงแหล่งที่มา
- คำสั่ง debugger ทำให้โปรแกรมหยุดผ่านโค้ด
- จุดพักแบบมีเงื่อนไขจะหยุดเฉพาะเมื่อเงื่อนไขเป็นจริง
- ตรวจสอบขอบเขตและนิพจน์เฝ้าดูขณะหยุดการทำงาน
คำถามที่พบบ่อย
บทเรียน “การตั้งจุดหยุด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตั้งจุดหยุด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตั้งจุดหยุด”
หยุดการทำงานชั่วคราวและตรวจสอบสถานะ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การตั้งจุดหยุด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ