มาเข้าใจถึงควาเจ็บปวดของการ Debuggin in Node.js ก่อนนะ…

การ Debug ใน Node.js มันไม่เหมือนการ debug JavaScript ที่อยู่ฝั่ง Frontend ที่เราสามารถ set breakpoints ได้เต็มไปหมดแล้วก็นั่งกด refresh ไปเรื่อยๆๆๆๆๆแล้วทํา event ให้เข้า debug นั้นเอง

ใน Node.js สิ่งที่หลายคนจะทํานั้นก็คือ

console.log() !!!

https://itnext.io/the-absolute-easiest-way-to-debug-node-js-with-vscode-2e02ef5b1bad

และมันก็จะเต็มไปหมดและหมดเลย console.log everywhere ก็ว่าได้ (หลักการเดียวกับพวกชอบใช้ system.out.print ใน java เลย)

ดังนั้นผู้สร้าง Node.js เองก็รู้ว่ามันลําบาก เค้าเลยสร้าง options ตัวนึงที่เราเรียกว่า inspect ขึ้นมาเพื่อใช้ในการ Debugging บน Node.js นั้นเอง

Inspect คืออะไร?

inspect คือ option นึงที่เราสามารถส่งไปให้ Node.js process เปิด listener port ใช้สําหรับการ debugging client ได้ โดยปกติแล้วจะเปิดไปที่ port 9229 โดยแต่ละ process จะมี UUID ที่แตกต่างกัน เช่น


ws://127.0.0.1:9229/0f2c936f-b1cd-4ac9-aab3-f63b0f33d55e

แต่ต้องจําอย่างนึงไว้วาโดยปกติแล้ว Node จะ bind ไปที่ 127.0.0.1 (หรือ localhost เฉพาะในเครื่องตัวเอง) เพื่อทําการ debugging เท่านั้น แต่ถ้าต้องการที่จะให้เราสามารถ remote debugging ได้เราจะ bind ที่ 0.0.0.0 โดยสามารถดูวิธีใช้งานได้ ที่นี้ 

อ่าว แล้วไงต่อ? ได้ Web Socket (ws) มาแล้วเอาไปทําไร?

บอกตามตรงได้เอามาก็ไม่รู้จะเอาไปทําอะไร……ในเมื่อเราก็ยังใช้งานยากอยู่ดี ดังนั้นเราจึงไปใช้พวก Inspector Clients ต่างๆดีกว่า ที่ทําให้เราสามารถ insepct ได้ง่ายๆ เช่น Visual Studio Code

วิธีใช้งาน VSC ในการ Debugging

โดยชั้นตอนง่ายมากๆๆก็คือ

  1. กดไปที่ debug tab
    •  
  2. ไปสร้าง configuration ใหม่ โดยเลือกเป็น Node.js
  3. แล้วจะได้หน้าตาแบบนี้ออกมาเป็นอันเสร็จ!!!

แค่ 3 ขั้นตอนนี้เราก็จะสามารถ Debug Node.js ได้โดยไม่ต้องใช้ Console.log ซึ่งเป็นที่ท่ายอดนิยมแล้วละ 🙂

โดยหลังจากนี้เราก็แค่ไป set breakpoint ในจุดต่างๆๆที่เราต้องการจะทําการ debug แล้วกดก็รัน configuration นั้นๆๆก็จะ debug ได้อย่างง่ายดาย!

แต่สิ่งที่น่าสนใจกว่านั้นก็คือ Attributes  ต่างๆๆที่เราสามารถตั้งค่าได้เพื่อให้มันใช้งานได้ง่ายขึ้นต่างหากละ เช่น

ซึ่ง attributes เหล่านี้จะช่วยเรามากๆๆๆๆเลยเวลาที่เรารันโปรแกรมเวลาใช้งานจริง เช่น เพิ่ม env ให้มีค่าเหมือน environment จริงๆ หรือ ตัวแปรที่เราต้องการจะทดสอบ เป็นต้น

FYI: นอกจาก launch mode แบบข้างบนแล้ว ยังมี attach mode ด้วยอีกนะ ไว้ใช้สําหรับ attach เข้ากับ node ที่รันอยู่บนเครื่องเราและเปิก debug port เอาไว้นั้นเอง 🙂 (ถึงขั้น Attach แบบ Remote ก็ยังได้ แต่ต้องระบุ Address attribute เพิ่มขึ้นนั้นเอง)

 

 

 

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
0 Comment authors
Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

newest oldest most voted
trackback

[…] วิธีใช้ Visual Studio Code Debug Node.js […]