ในโพสต์นี้ เราจะกล่าวถึงกระบวนการดีบักแอป NodeJS

สำหรับเวอร์ชันวิดีโอของบทช่วยสอนนี้ โปรดดูที่ "ลิงก์" นี้

ทำไมไม่เพียงแค่ console.log?

คำถามที่ดี. ความจริงก็คือ console.log ใช้ได้ดีและนั่นอาจเป็นวิธีที่ทุกคน (รวมถึงฉันด้วย) เรียนรู้วิธีดูว่าเกิดอะไรขึ้นในแอปพลิเคชันของตน ไม่ว่าจะในโหนดหรือในเบราว์เซอร์ ปัญหาจะขยายขนาดเมื่อคุณเริ่มจัดการกับแอปพลิเคชันที่ซับซ้อนมากขึ้นซึ่งมีนามธรรมและแพ็คเกจที่นำเข้าหลายชั้น

const users = await axios.get('url');

for (const user of users) {
  const [firstName, lastName] = user.names;
  // ...
}

ในโค้ดด้านบน คุณอาจเดาได้ว่าเกิดอะไรขึ้น แต่ถ้าเราไม่รู้ว่าเกิดอะไรขึ้นจากคำขอ API เราอาจจะต้อง console.log เนื้อหาของวัตถุสองสามครั้งเพื่อทำความเข้าใจโครงสร้าง แล้วรหัสนี้ล่ะ?

const fetchUsers = async (url) => {
  const users = await axios.get(url);
  if (!users.length) {
    return [];
  }
  return users;
};

(async () => {
  const users = await fetchUsers('https:/someurl.com');
  console.log(users);
})();

ยังค่อนข้างตรงไปตรงมาใช่ไหม? คุณสามารถมองเห็นข้อผิดพลาดได้หรือไม่? อาจต้องใช้เวลาสองสาม console.logs เพื่อจำกัดให้แคบลง แต่ไม่ใช่กับดีบักเกอร์!

โอเค ดี มันทำงานยังไงล่ะ?

ขั้นแรกคุณต้องสร้างไฟล์ launch.json ในโครงการที่คุณกำลังดำเนินการอยู่ คุณสามารถทำได้หากคุณคลิกที่ส่วน Run & Debug ของ VSCode (ปุ่มที่สี่ทางซ้าย) ในกรณีของ "บทช่วยสอน" ของฉัน ฉันเลือกที่จะดีบักไฟล์ index.js ของฉัน ดังนั้น launch.json ของฉัน

หลังจากนี้ คุณสามารถกลับไปที่โปรแกรมแก้ไขและตั้งค่าเบรกพอยต์ที่ใดก็ได้ในไฟล์ของคุณ (วงกลมสีแดงที่ปรากฏขึ้นเมื่อคุณเลื่อนเมาส์ไปทางด้านซ้ายของหมายเลขบรรทัด) จากนั้น เปิดโค้ดของคุณโดยใช้ปุ่มเล่นที่ด้านซ้ายบนของโปรแกรมแก้ไขโค้ด

คุณอยู่ในโหมดแก้ไขข้อบกพร่อง! ที่กึ่งกลางด้านบนของหน้าจอ คุณจะเห็นปุ่มบางปุ่มที่เกี่ยวข้องกับขั้นตอนการดีบักที่คุณดำเนินการได้ จากซ้ายไปขวา:

  • ดำเนินการต่อ: อนุญาตให้โปรแกรมของคุณดำเนินการให้เสร็จสิ้น (หากไม่มีจุดพักอื่น)
  • ก้าวข้าม: ทบทวนโค้ดของคุณทีละบรรทัด
  • ก้าวเข้าสู่: เข้าสู่ฟังก์ชันที่กำลังดำเนินการ
  • ก้าวออก: ออกจากฟังก์ชันที่กำลังดำเนินการอยู่
  • รีสตาร์ท: เริ่มกระบวนการแก้ไขข้อบกพร่องอีกครั้ง
  • หยุด: หยุดกระบวนการแก้ไขข้อบกพร่อง

นั่นคือทั้งหมดที่มีให้! ในวิดีโอ บทช่วยสอน ฉันกล่าวถึงวิธีการดีบักเซิร์ฟเวอร์ NodeJS ซึ่งเป็นกระบวนการที่ยุ่งยากกว่าเล็กน้อย