วิธีดีบักโค้ด Node.js โดยใช้เครื่องมือหลายตัว

Node.js เป็นรันไทม์ของ JavaScript โดยอิงจากเอ็นจิ้น V8 เดียวกับที่ใช้ในเบราว์เซอร์ Chrome ของ Google มักใช้เพื่อสร้างแอปพลิเคชันฝั่งเซิร์ฟเวอร์และเทอร์มินัลข้ามแพลตฟอร์ม Node.js ได้รับความนิยมเพิ่มขึ้นเรื่อยๆ ในช่วงทศวรรษที่ผ่านมา เนื่องจากติดตั้งง่าย ใช้งานได้จริง รวดเร็ว และช่วยให้นักพัฒนาเว็บฝั่งไคลเอ็นต์ใช้ทักษะของตนในที่อื่นๆ

อย่างไรก็ตาม การพัฒนาซอฟต์แวร์ยังคงเป็นงานที่ซับซ้อน และโค้ด Node.js ของคุณจะล้มเหลวในบางจุด บทช่วยสอนนี้สาธิตเครื่องมือต่างๆ เพื่อช่วยดีบักแอปพลิเคชันและค้นหาสาเหตุของปัญหา

ไปดำน้ำกันเลย

ภาพรวมการดีบัก

“การดีบัก” เป็นชื่อที่มอบให้กับวิธีการต่างๆ ในการแก้ไขข้อบกพร่องของซอฟต์แวร์ การแก้ไขข้อผิดพลาดมักจะตรงไปตรงมา การค้นหาสาเหตุของข้อบกพร่องนั้นซับซ้อนกว่ามากและต้องเกาศีรษะนานหลายชั่วโมง

ส่วนต่อไปนี้จะอธิบายข้อผิดพลาดทั่วไปสามประเภทที่คุณจะพบ

ข้อผิดพลาดทางไวยากรณ์

รหัสของคุณไม่เป็นไปตามกฎของภาษา ตัวอย่างเช่น เมื่อคุณข้ามวงเล็บปิดหรือสะกดคำผิด เช่น console.lag(x)

โปรแกรมแก้ไขโค้ดที่ดีสามารถช่วยระบุปัญหาทั่วไปได้โดย:

• รหัสสีที่ถูกต้องหรือไม่ถูกต้องคำสั่ง
• ตัวแปรตรวจสอบประเภท
• ฟังก์ชันเติมข้อความอัตโนมัติและชื่อตัวแปร
• เน้นวงเล็บที่ตรงกัน
• บล็อกรหัสเยื้องอัตโนมัติ
• การตรวจจับรหัสที่ไม่สามารถเข้าถึงได้
• การปรับโครงสร้างฟังก์ชันยุ่ง

โปรแกรมแก้ไขฟรี เช่น VS Code และ Atom รองรับ Node.js, JavaScript และ TypeScript อย่างดีเยี่ยม (ซึ่งแปลงเป็น JavaScript) โดยทั่วไปแล้ว ปัญหาทางไวยากรณ์พื้นฐานสามารถตรวจพบได้ก่อนที่คุณจะบันทึกและทดสอบโค้ดของคุณ

โค้ด Linter เช่น ESLint จะรายงานข้อผิดพลาดทางไวยากรณ์ การเยื้องที่ไม่ถูกต้อง และตัวแปรที่ไม่ได้ประกาศ ESLint เป็นเครื่องมือ Node.js ที่คุณสามารถติดตั้งได้ทั่วโลกด้วย:

 npm i eslint -g

คุณสามารถตรวจสอบไฟล์ JavaScript จากบรรทัดคำสั่งโดยใช้:

 eslint mycode.js

…แต่ง่ายกว่าที่จะใช้ปลั๊กอินตัวแก้ไข เช่น ESLint สำหรับ VS Code หรือ linter-eslint สำหรับ Atom ซึ่งจะตรวจสอบโค้ดโดยอัตโนมัติเมื่อคุณพิมพ์:

ข้อผิดพลาดลอจิก

รหัสของคุณทำงานแต่ไม่ทำงานตามที่คุณคาดหวัง ตัวอย่างเช่น ผู้ใช้จะไม่ออกจากระบบเมื่อร้องขอ รายงานแสดงตัวเลขที่ไม่ถูกต้อง ข้อมูลไม่ได้รับการบันทึกลงในฐานข้อมูลอย่างสมบูรณ์ ฯลฯ

ข้อผิดพลาดทางลอจิกอาจเกิดจาก:

• ใช้ตัวแปรผิด
• เงื่อนไขที่ไม่ถูกต้อง เช่น if (a > 5) แทนที่จะเป็น if (a < 5)
• การคำนวณที่ไม่คำนึงถึงลำดับความสำคัญของตัวดำเนินการ เช่น 1+2*3 ให้ผลลัพธ์เป็น 7 แทนที่จะเป็น 9

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

ข้อผิดพลาดรันไทม์ (หรือการดำเนินการ)

ข้อผิดพลาดจะปรากฏชัดก็ต่อเมื่อแอปพลิเคชันถูกเรียกใช้งาน ซึ่งมักจะนำไปสู่การหยุดทำงาน ข้อผิดพลาดรันไทม์อาจเกิดจาก:

• หารด้วยตัวแปรที่ตั้งไว้เป็นศูนย์
• พยายามเข้าถึงรายการอาร์เรย์ที่ไม่มีอยู่
• กำลังพยายามเขียนไปยังไฟล์แบบอ่านอย่างเดียว

ข้อผิดพลาดทางลอจิกและรันไทม์นั้นยากต่อการตรวจพบ แม้ว่าเทคนิคการพัฒนาต่อไปนี้สามารถช่วยได้:

1. ใช้การพัฒนาที่ขับเคลื่อนด้วยการทดสอบ: TTD สนับสนุนให้คุณเขียนการทดสอบก่อนที่จะพัฒนาฟังก์ชัน เช่น X ถูกส่งกลับจากฟังก์ชันY เมื่อ Z ถูกส่งผ่านเป็นพารามิเตอร์ การทดสอบเหล่านี้ดำเนินการในระหว่างการพัฒนาเบื้องต้นและการอัปเดตในภายหลัง เพื่อให้แน่ใจว่าโค้ดจะยังคงทำงานตามที่คาดไว้
2. ใช้ระบบติดตามปัญหา: ไม่มีอะไรเลวร้ายไปกว่าอีเมลที่อ้างว่า "ซอฟต์แวร์ของคุณใช้งานไม่ได้" ! ระบบติดตามปัญหาช่วยให้คุณบันทึกปัญหาเฉพาะ ขั้นตอนการทำสำเนาเอกสาร กำหนดลำดับความสำคัญ มอบหมายนักพัฒนา และติดตามความคืบหน้าของการแก้ไข
3. ใช้การควบคุมแหล่งที่มา: ระบบควบคุมต้นทาง เช่น Git จะช่วยคุณสำรองข้อมูลโค้ด จัดการการแก้ไข และระบุตำแหน่งที่มีการแนะนำจุดบกพร่อง ที่เก็บข้อมูลออนไลน์ รวมถึง Github และ Bitbucket ให้พื้นที่ว่างและเครื่องมือสำหรับโครงการขนาดเล็กหรือโอเพนซอร์ส

คุณจะยังคงพบข้อบกพร่องของ Node.js แต่ส่วนต่อไปนี้จะอธิบายวิธีค้นหาข้อผิดพลาดที่เข้าใจยากนั้น

ตั้งค่าตัวแปรสภาพแวดล้อม Node.js ที่เหมาะสม

ตัวแปรสภาพแวดล้อมที่ตั้งค่าไว้ในระบบปฏิบัติการโฮสต์สามารถควบคุมการตั้งค่าแอปพลิเคชันและโมดูลของ Node.js ที่พบบ่อยที่สุดคือ NODE_ENV ซึ่งมักจะถูกตั้งค่าเป็นการพัฒนาเมื่อทำการดีบั๊กหรือใช้งานจริงเมื่อทำงานบนเซิร์ฟเวอร์ที่ใช้งานจริง ตั้งค่าตัวแปรสภาพแวดล้อมบน macOS หรือ Linux ด้วยคำสั่ง:

 NODE_ENV=development

หรือที่พรอมต์คำสั่ง (คลาสสิค) ของ Windows:

 set NODE_ENV=development

หรือ Windows Powershell:

 $env:NODE_ENV="development"

ในกรอบงาน Express.js ยอดนิยม การตั้งค่า NODE_ENV เป็นการพัฒนาจะปิดใช้งานการแคชไฟล์เทมเพลตและแสดงข้อความแสดงข้อผิดพลาดอย่างละเอียด ซึ่งอาจเป็นประโยชน์เมื่อทำการดีบั๊ก โมดูลอื่นๆ อาจมีคุณสมบัติที่คล้ายคลึงกัน และคุณสามารถเพิ่มเงื่อนไข NODE_ENV ให้กับแอปพลิเคชันของคุณได้ เช่น

 // running in development mode? const devMode = (process.env.NODE_ENV !== 'production'); if (devMode) { console.log('application is running in development mode'); }

คุณยังสามารถใช้เมธอด util.debuglog ของโหนดเพื่อส่งข้อความแสดงข้อผิดพลาดแบบมีเงื่อนไขได้ เช่น

 import { debuglog } from 'util'; const myappDebug = debuglog('myapp'); myappDebug('log something');

แอปพลิเคชันนี้จะแสดงข้อความบันทึกเมื่อตั้งค่า NODE_DEBUG เป็น myapp หรือไวด์การ์ด เช่น * หรือ my*

ใช้ตัวเลือกบรรทัดคำสั่ง Node.js

โดยทั่วไปแล้วสคริปต์โหนดจะเปิดใช้งานพร้อมกับโหนดตามด้วยชื่อของสคริปต์รายการ:

 node app.js

คุณยังสามารถตั้งค่าตัวเลือกบรรทัดคำสั่งเพื่อควบคุมด้านรันไทม์ต่างๆ แฟล็กที่มีประโยชน์สำหรับการดีบัก ได้แก่:

• --check
  ไวยากรณ์ตรวจสอบสคริปต์โดยไม่ต้องดำเนินการ
• --trace-warnings
  ส่งออกการติดตามสแต็กเมื่อสัญญาจาวาสคริปต์ไม่แก้ไขหรือปฏิเสธ
• --enable-source-maps
  แสดงซอร์สแมปเมื่อใช้ทรานสพิลเลอร์ เช่น TypeScript
• --throw-deprecation
  เตือนเมื่อใช้ฟีเจอร์ Node.js ที่เลิกใช้แล้ว
• --redirect-warnings=file
  ส่งออกคำเตือนไปยังไฟล์แทนที่จะเป็น stderr
• --trace-exit
  ส่งออกการติดตามสแต็กเมื่อมีการเรียก process.exit()

ส่งออกข้อความไปยังคอนโซล

การแสดงข้อความคอนโซลเป็นวิธีที่ง่ายที่สุดวิธีหนึ่งในการดีบักแอปพลิเคชัน Node.js:

 console.log(`someVariable: ${ someVariable }`);

นักพัฒนาไม่กี่คนที่รู้ว่ามีวิธีคอนโซลอื่นๆ มากมาย:

console.log() ยังยอมรับรายการค่าที่คั่นด้วยเครื่องหมายจุลภาค:

 let x = 123; console.log('x:', x); // x: 123

…แม้ว่า ES6 destructuring จะให้ผลลัพธ์ที่คล้ายคลึงกันโดยใช้ความพยายามน้อยกว่า:

 console.log({ x }); // { x: 123 }

คำสั่ง console.dir() สวย-พิมพ์คุณสมบัติของวัตถุในลักษณะเดียวกับ util.inspect():

 console.dir(myObject, { depth: null, color: true });

ความขัดแย้งคอนโซล

นักพัฒนาบางคนอ้างว่าคุณ ไม่ ควรใช้ console.log() เพราะ:

• คุณกำลังเปลี่ยนรหัสและอาจเปลี่ยนแปลงบางสิ่งหรือลืมลบออกและ
• ไม่จำเป็นเมื่อมีตัวเลือกการดีบักที่ดีกว่า

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

ใช้ระบบบันทึกของบุคคลที่สาม

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

ใช้ตัวตรวจสอบ V8

เอ็นจิ้น V8 JavaScript จัดเตรียมไคลเอ็นต์การดีบักซึ่งคุณสามารถใช้ใน Node.js เริ่มแอปพลิเคชันโดยใช้การตรวจสอบโหนด เช่น

 node inspect app.js

ดีบักเกอร์หยุดที่บรรทัดแรกและแสดงพรอมต์ debug>:

 $ node inspect .\mycode.js < Debugger listening on ws://127.0.0.1:9229/143e23fb < For help, see: https://nodejs.org/en/docs/inspector < ok < Debugger attached. < Break on start in mycode.js:1 > 1 const count = 10; 2 3 for (i = 0; i < counter; i++) { debug>

ป้อนความช่วยเหลือเพื่อดูรายการคำสั่ง คุณสามารถก้าวผ่านแอปพลิเคชันโดยป้อน:

• ต่อ หรือ c : ดำเนินการต่อไป
• ถัดไป หรือ n : เรียกใช้คำสั่งถัดไป
• step หรือ s : ก้าวเข้าสู่ฟังก์ชันที่เรียกว่า
• out หรือ o : ออกจากฟังก์ชันแล้วกลับไปที่คำสั่งโทร
• หยุดชั่วคราว : หยุดรหัสชั่วคราว
• watch('myvar') : ดูตัวแปร
• setBreakPoint() หรือ sb() : ตั้งค่าเบรกพอยต์
• รีสตาร์ท : รีสตาร์ทสคริปต์
• .exit หรือ Ctrl | Cmd + D : ออกจากดีบักเกอร์

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

ใช้เบราว์เซอร์ Chrome เพื่อดีบัก Node.js Code

ตัวเลือกการตรวจสอบ Node.js ที่ใช้ด้านบนจะเริ่มต้นเซิร์ฟเวอร์ Web Socket ที่รับฟังพอร์ต localhost 9229 นอกจากนี้ยังเริ่มต้นไคลเอ็นต์การดีบักแบบข้อความ แต่สามารถใช้ไคลเอ็นต์แบบกราฟิกได้ เช่น ไคลเอ็นต์ที่สร้างใน Google Chrome และ Chrome เบราว์เซอร์เช่น Chromium, Edge, Opera, Vivaldi และ Brave

ในการดีบักเว็บแอปพลิเคชันทั่วไป ให้เริ่มต้นด้วยตัวเลือก –inspect เพื่อเปิดใช้งานเซิร์ฟเวอร์ Web Socket ของดีบักเกอร์ V8:

 node --inspect index.js

บันทึก:

• index.js สันนิษฐานว่าเป็นสคริปต์รายการของแอปพลิเคชัน
• ตรวจสอบให้แน่ใจว่าคุณใช้ --inspect ด้วยขีดกลางสองครั้งเพื่อให้แน่ใจว่าคุณไม่ได้เริ่มต้นไคลเอ็นต์ดีบักเกอร์แบบข้อความ
• คุณสามารถใช้ nodemon แทน node หากคุณต้องการรีสตาร์ทแอปพลิเคชันอัตโนมัติเมื่อไฟล์ถูกเปลี่ยน

โดยค่าเริ่มต้น ดีบักเกอร์จะยอมรับการเชื่อมต่อขาเข้าจากเครื่องท้องถิ่นเท่านั้น หากคุณกำลังเรียกใช้แอปพลิเคชันบนอุปกรณ์อื่น เครื่องเสมือน หรือคอนเทนเนอร์ Docker ให้ใช้:

 node --inspect=0.0.0.0:9229 index.js

คุณยังสามารถใช้ --inspect-brk แทน --inspect เพื่อหยุดการประมวลผล (ตั้งค่าเบรกพอยต์) ในบรรทัดแรก เพื่อให้คุณสามารถก้าวผ่านโค้ดได้ตั้งแต่เริ่มต้น

เปิดเบราว์เซอร์ที่ใช้ Chrome และป้อน chrome://inspect ในแถบที่อยู่เพื่อดูอุปกรณ์ในเครื่องและเครือข่าย:

หากแอปพลิเคชัน Node.js ของคุณไม่ปรากฏเป็น Remote Target ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้

• คลิก เปิด DevTools เฉพาะสำหรับโหนด แล้วเลือกที่อยู่และพอร์ต หรือ
• ตรวจสอบ เป้าหมายเครือข่ายของ Discover คลิก Configure จากนั้นเพิ่มที่อยู่ IP และพอร์ตของอุปกรณ์ที่ทำงานอยู่

คลิกลิงก์การ ตรวจสอบ ของเป้าหมายเพื่อเปิดใช้ไคลเอ็นต์ดีบักเกอร์ DevTools สิ่งนี้ควรเป็นที่คุ้นเคยสำหรับทุกคนที่ใช้ DevTools สำหรับการดีบักโค้ดฝั่งไคลเอ็นต์:

สลับไปที่แผง แหล่งที่มา คุณสามารถเปิดไฟล์ใดก็ได้โดยกด Cmd | Ctrl + P แล้วป้อนชื่อไฟล์ (เช่น index.js)

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

1. คลิก + เพิ่มโฟลเดอร์ลงในพื้นที่ทำงาน
2. เลือกตำแหน่งของโปรเจ็กต์ Node.js ของคุณ
3. กด ตกลง เพื่ออนุญาตการเปลี่ยนแปลงไฟล์

ตอนนี้คุณสามารถโหลดไฟล์จากแผนผังไดเร็กทอรีด้านซ้ายมือ:

คลิกหมายเลขบรรทัดใดก็ได้เพื่อตั้งค่าเบรกพอยต์ที่แสดงด้วยเครื่องหมายสีน้ำเงิน

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

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

โหลดและใช้เว็บแอปพลิเคชันของคุณเพื่อไปยังคำสั่งที่มีการตั้งค่าเบรกพอยต์ ในตัวอย่างนี้ http://localhost:3000/ ถูกเปิดในเบราว์เซอร์ใดๆ และ DevTools จะหยุดการทำงานในบรรทัดที่ 44:

แผงด้านขวามือจะแสดง:

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

แถวของไอคอนการดำเนินการแสดงอยู่ด้านบน Paused on breakpoint :

จากซ้ายไปขวา สิ่งเหล่านี้ดำเนินการดังต่อไปนี้:

• ดำเนินการดำเนินการ ต่อ : ดำเนินการต่อไปจนถึงเบรกพอยต์ถัดไป
• ก้าวข้าม : ดำเนินการคำสั่งถัดไปแต่อยู่ภายในบล็อครหัสปัจจุบัน — อย่าข้ามไปยังฟังก์ชันใด ๆ ที่เรียก
• ก้าวเข้าสู่ : รันคำสั่งถัดไปและข้ามไปยังฟังก์ชันใดก็ได้ตามความจำเป็น
• ก้าวออก : ดำเนินการประมวลผลต่อจนจบฟังก์ชันและกลับไปที่คำสั่งเรียก
• step : คล้ายกับ step into ยกเว้นว่ามันจะไม่กระโดดเข้าสู่ async functions
• ปิดการใช้งาน เบรกพอยต์ทั้งหมด
• หยุดชั่วคราวในข้อยกเว้น : หยุดการประมวลผลเมื่อเกิดข้อผิดพลาด

เบรกพอยต์แบบมีเงื่อนไข

บางครั้งจำเป็นต้องควบคุมเบรกพอยต์ให้มากขึ้น ลองนึกภาพคุณมีลูปที่วนซ้ำ 1,000 รอบ แต่คุณสนใจเฉพาะสถานะของการวนรอบสุดท้าย:

 for (let i = 0; i < 1000; i++) { // set breakpoint here }

แทนที่จะคลิก ดำเนินการต่อ 999 ครั้ง คุณสามารถคลิกขวาที่บรรทัด เลือก เพิ่มเบรกพอยต์แบบมีเงื่อนไข และป้อนเงื่อนไข เช่น i = 999 :

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

คะแนนบันทึก

จุดบันทึกใช้งาน console.log() อย่างมีประสิทธิภาพโดยไม่ต้องใช้รหัสใด ๆ! นิพจน์สามารถส่งออกได้เมื่อโค้ดรันบรรทัดใดๆ แต่จะไม่หยุดการประมวลผล ไม่เหมือนกับเบรกพอยต์

ในการเพิ่มจุดบันทึก ให้คลิกขวาที่บรรทัดใดก็ได้ เลือก เพิ่มจุดบันทึก และป้อนนิพจน์ เช่น 'loop counter i', i :

คอนโซล DevTools เอาต์พุตตัว loop counter i: 0 ถึงตัว loop counter i: 999 ในตัวอย่างด้านบน

ใช้ VS Code เพื่อดีบัก Node.js Applications

VS Code หรือ Visual Studio Code เป็นโปรแกรมแก้ไขโค้ดฟรีจาก Microsoft ที่ได้รับความนิยมจากนักพัฒนาเว็บ แอปพลิเคชันพร้อมใช้งานสำหรับ Windows, macOS และ Linux และได้รับการพัฒนาโดยใช้เทคโนโลยีเว็บในกรอบงานของอิเล็กตรอน

VS Code รองรับ Node.js และมีไคลเอนต์การดีบักในตัว แอปพลิเคชันส่วนใหญ่สามารถดีบั๊กได้โดยไม่ต้องกำหนดค่าใดๆ ตัวแก้ไขจะเริ่มเซิร์ฟเวอร์การดีบักและไคลเอนต์โดยอัตโนมัติ

เปิดไฟล์เริ่มต้น (เช่น index.js) เปิดใช้งานบานหน้าต่าง Run และ Debug คลิกปุ่ม Run and Debug แล้วเลือกสภาพแวดล้อม Node.js คลิกบรรทัดใดก็ได้เพื่อเปิดใช้งานเบรกพอยต์ที่แสดงเป็นไอคอนวงกลมสีแดง จากนั้นเปิดแอปพลิเคชันในเบราว์เซอร์เหมือนเดิม — VS Code หยุดการทำงานเมื่อถึงเบรกพอยต์:

บานหน้าต่าง Variables , Watch , Call Stack และ Breakpoints จะคล้ายกับที่แสดงใน Chrome DevTools บานหน้าต่าง Loaded Scripts จะแสดงสคริปต์ที่โหลดแล้ว แม้ว่าจะมีหลายสคริปต์ภายใน Node.js

แถบเครื่องมือของไอคอนการดำเนินการช่วยให้คุณ:

• ดำเนินการดำเนินการ ต่อ : ดำเนินการต่อไปจนถึงเบรกพอยต์ถัดไป
• ก้าวข้าม : ดำเนินการคำสั่งถัดไปแต่อยู่ภายในฟังก์ชันปัจจุบัน — อย่าข้ามไปยังฟังก์ชันใด ๆ ที่เรียก
• ก้าวเข้าสู่ : ดำเนินการคำสั่งถัดไปและข้ามไปยังฟังก์ชันใด ๆ ที่เรียก
• ก้าวออก : ดำเนินการประมวลผลต่อจนจบฟังก์ชันและกลับไปที่คำสั่งเรียก
• รีสตาร์ท แอปพลิเคชันและดีบักเกอร์
• หยุด แอปพลิเคชันและดีบักเกอร์

เช่นเดียวกับ Chrome DevTools คุณสามารถคลิกขวาที่บรรทัดใดก็ได้เพื่อเพิ่มเบรกพอยต์แบบ มีเงื่อนไข และ จุดบันทึก

สำหรับข้อมูลเพิ่มเติม โปรดดูการดีบักใน Visual Studio Code

การกำหนดค่าการดีบักขั้นสูงของโค้ด VS

อาจจำเป็นต้องมีการกำหนดค่า VS Code เพิ่มเติม หากคุณต้องการดีบักโค้ดบนอุปกรณ์อื่น เครื่องเสมือน หรือจำเป็นต้องใช้ตัวเลือกการเรียกใช้อื่น เช่น nodemon

VS Code จัดเก็บการกำหนดค่าการดีบักในไฟล์ launch.json ภายในไดเร็กทอรี .vscode ในโครงการของคุณ เปิดบานหน้าต่าง Run and Debug คลิก create a launch.json file และเลือกสภาพแวดล้อม Node.js เพื่อสร้างไฟล์นี้ มีตัวอย่างการกำหนดค่าให้:

คุณสามารถกำหนดการตั้งค่าการกำหนดค่าจำนวนเท่าใดก็ได้เป็นวัตถุในอาร์เรย์ "configurations" คลิก เพิ่มการกำหนดค่า… และเลือกตัวเลือกที่เหมาะสม

การกำหนดค่า Node.js แต่ละรายการสามารถ:

1. เริ่มกระบวนการเองหรือ
2. แนบกับเซิร์ฟเวอร์ Web Socket สำหรับการดีบัก อาจทำงานบนเครื่องระยะไกลหรือคอนเทนเนอร์ Docker

ตัวอย่างเช่น ในการกำหนดคอนฟิกูเรชันของ nodemon ให้เลือก Node.js: Nodemon Setup และเปลี่ยนสคริปต์รายการ "program" หากจำเป็น:

 { // custom configuration "version": "0.2.0", "configurations": [ { "console": "integratedTerminal", "internalConsoleOptions": "neverOpen", "name": "nodemon", "program": "${workspaceFolder}/index.js", "request": "launch", "restart": true, "runtimeExecutable": "nodemon", "skipFiles": [ "<node_internals>/**" ], "type": "pwa-node" } ] }

บันทึกไฟล์ launch.json และ nodemon (การกำหนดค่า “ชื่อ”) จะปรากฏในรายการดรอปดาวน์ที่ด้านบนของบานหน้าต่าง Run และ Debug คลิกไอคอนรันสีเขียวเพื่อเริ่มใช้การกำหนดค่านั้นและเปิดแอปพลิเคชันโดยใช้ nodemon:

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

สำหรับข้อมูลเพิ่มเติม โปรดดูที่การกำหนดค่า VS Code Launch

ส่วนขยาย VS Code ต่อไปนี้สามารถช่วยคุณดีบักโค้ดที่โฮสต์บนสภาพแวดล้อมเซิร์ฟเวอร์ระยะไกลหรือเซิร์ฟเวอร์แยก:

• ระยะไกล — คอนเทนเนอร์: เชื่อมต่อกับแอพที่ทำงานในคอนเทนเนอร์ Docker
• ระยะไกล — SSH: เชื่อมต่อกับแอพที่ทำงานบนเซิร์ฟเวอร์ระยะไกล
• ระยะไกล — WSL: เชื่อมต่อกับแอพที่ทำงานบนระบบย่อย Windows สำหรับ Linux (WSL)

ตัวเลือกการดีบัก Node.js อื่นๆ

คู่มือการดีบัก Node.js ให้คำแนะนำสำหรับโปรแกรมแก้ไขข้อความและ IDE ต่างๆ รวมถึง Visual Studio, JetBrains WebStorm, Gitpod และ Eclipse Atom เสนอส่วนขยายโหนดดีบัก ซึ่งรวมตัวดีบัก Chrome DevTools เข้ากับตัวแก้ไข

เมื่อแอปพลิเคชันของคุณเผยแพร่แล้ว คุณสามารถพิจารณาใช้บริการแก้ไขจุดบกพร่องเชิงพาณิชย์ เช่น LogRocket และ Sentry.io ซึ่งสามารถบันทึกและเล่นข้อผิดพลาดของไคลเอ็นต์และเซิร์ฟเวอร์ที่ผู้ใช้จริงพบได้

ต้องการความช่วยเหลือในการดีบักแอปพลิเคชันหรือไม่? เริ่มที่นี่ คลิกเพื่อทวีต

สรุป

ในอดีต การดีบัก JavaScript นั้นทำได้ยาก แต่มีการปรับปรุงครั้งใหญ่ในช่วงทศวรรษที่ผ่านมา ทางเลือกนั้นดี — หากไม่ ดีกว่า — เมื่อเทียบกับภาษาอื่นๆ

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

คุณสาบานด้วยแนวทางปฏิบัติในการดีบัก Node.js แบบใด แบ่งปันในส่วนความคิดเห็นด้านล่าง!