การไล่ทำงานทีละขั้นในโค้ด
ก้าวข้าม เข้าไปใน และออกจากฟังก์ชันทีละขั้น
การไล่ทำงานทีละขั้นในโค้ด เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การก้าวผ่านโค้ด
เมื่อหยุดที่จุดพักการทำงานแล้ว คุณสามารถก้าวผ่านโค้ดทีละการทำงาน เพื่อดูว่าสถานะเปลี่ยนแปลงไปอย่างไรในแต่ละบรรทัด
ดำเนินการต่อ
ปุ่มดำเนินการต่อจะทำให้โปรแกรมทำงานตามปกติจนถึงจุดพักถัดไปหรือจนกว่าโปรแกรมจะทำงานเสร็จ ใช้ปุ่มนี้เมื่อคุณตรวจสอบจุดที่หยุดอยู่เพียงพอแล้ว
ก้าวข้าม
การก้าวข้ามจะทำให้บรรทัดปัจจุบันทำงานจนเสร็จ รวมถึงฟังก์ชันที่บรรทัดนั้นเรียกใช้ แล้วหยุดที่บรรทัดถัดไปในฟังก์ชันเดิม โดยจะไม่เข้าไปในฟังก์ชันที่ถูกเรียก
function helper() {
return 5
}
function main() {
const a = helper()
const b = a + 1
return b
}ก้าวเข้า
การก้าวเข้าจะเข้าไปในฟังก์ชันที่ถูกเรียกบนบรรทัดปัจจุบัน แล้วหยุดที่คำสั่งแรกของฟังก์ชันนั้น เพื่อให้คุณแก้จุดบกพร่องภายในฟังก์ชันได้
function helper() {
const x = 10
return x
}
function main() {
return helper()
}ก้าวออก
การก้าวออกจะทำให้ฟังก์ชันปัจจุบันทำงานจนเสร็จ แล้วหยุดที่บรรทัดถัดจากคำสั่งเรียกที่พาคุณเข้ามา ใช้เมื่อไม่จำเป็นต้องตรวจสอบฟังก์ชันนั้นต่อแล้ว
การเลือกคำสั่งก้าว
ก้าวข้ามเมื่อเชื่อมั่นว่าฟังก์ชันทำงานถูกต้อง ก้าวเข้าเพื่อตรวจสอบฟังก์ชัน และก้าวออกเมื่อยืนยันแล้วว่าตรรกะภายในทำงานถูกต้อง
แผงสแต็กการเรียก
ขณะก้าวผ่านโค้ด แผงสแต็กการเรียกจะแสดงลำดับการเรียกฟังก์ชันที่นำมาสู่บรรทัดปัจจุบัน การคลิกเฟรมจะข้ามไปยังบริบทนั้น
การดูการเปลี่ยนแปลงของสถานะ
ขณะที่คุณก้าวผ่านโค้ด แผงขอบเขตและแผงเฝ้าดูจะอัปเดต ทำให้เห็นได้อย่างชัดเจนว่าบรรทัดใดแก้ไขตัวแปรโดยไม่คาดคิด
การก้าวผ่านลูป
ภายในลูป การก้าวผ่านโค้ดจะทำให้ส่วนตัวลูปทำงานซ้ำในแต่ละรอบ จุดพักแบบมีเงื่อนไขมักเร็วกว่าการก้าวผ่านหลายรอบด้วยตนเอง
function sumTo(n) {
let total = 0
for (let i = 1; i <= n; i++) {
total += i
}
return total
}การก้าวเข้าไปในโค้ดไลบรารี
การก้าวเข้าอาจพาคุณเข้าไปยังโค้ดภายในของไลบรารี DevTools มีคุณสมบัติให้ละเว้นสคริปต์ที่ระบุ เพื่อให้คุณอยู่ในโค้ดของตนเอง
ขั้นตอนการทำงานทั่วไป
ตั้งจุดพักใกล้ข้อผิดพลาดที่สงสัย จากนั้นก้าวผ่านทีละบรรทัดพร้อมดูตัวแปร จนพบจุดที่การทำงานจริงต่างจากที่คาดไว้
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเรื่องการก้าวผ่านโค้ดของคุณ
สรุป
สรุป: การก้าวผ่านโค้ดช่วยให้ควบคุมการทำงานทีละขั้น
- ก้าวข้ามจะทำให้บรรทัดทำงานโดยไม่เข้าไปในฟังก์ชันที่ถูกเรียก
- ก้าวเข้าจะเข้าไปในฟังก์ชันที่ถูกเรียก
- ก้าวออกจะทำให้ฟังก์ชันปัจจุบันทำงานจนเสร็จ
- สแต็กการเรียกแสดงเส้นทางที่โปรแกรมมาถึงจุดนั้น
คำถามที่พบบ่อย
บทเรียน “การไล่ทำงานทีละขั้นในโค้ด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การไล่ทำงานทีละขั้นในโค้ด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การไล่ทำงานทีละขั้นในโค้ด”
ก้าวข้าม เข้าไปใน และออกจากฟังก์ชันทีละขั้น คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การไล่ทำงานทีละขั้นในโค้ด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม
ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- นอกเหนือจาก console.log
- การตั้งจุดหยุด
- การไล่ทำงานทีละขั้นในโค้ด
- การอ่านสแต็กเทรซ