วิธีการใช้ VS Code ในการ debug โค๊ด JavaScript

ปกติคนที่เขียน JavaScript เชื่อว่าเกือบทุกคน ต้องใช้ console.log แน่ๆ ผมก็เป็นหนึ่งในนั้น บางครั้ง เราต้องการเทสอะไรไวๆ ก็ console.log มันซะเลย วันนี้ผมมาแชร์อีกวิธีนึงในการ debug JavaScript ของเราครับ

ซึ่งจริงๆ Debugging ใน JavaScript ทำได้หลายแบบมาก

• Debugging ผ่าน Terminal
• Debugging โดยการ attach ไปเปิด Browser
• Debugging Node.js หรือ React.js ก็ทำได้

วันนี้เริ่มจาก Debugging ง่ายๆ ด้วยการ debug JavaScript ธรรมดากันก่อน

VS Code

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

Debugging Extension

ตัว Debugging Extension สำหรับ Node.js เนี่ย มันเป็น built-in ที่ติดมากับ VS Code เลย ฉะนั้น เราไม่ต้องติดตั้งอะไรเพิ่มเติม (รองรับทั้ง JavaScript และ TypeScript)

หากใช้ภาษาอื่นๆ เราก็ต้องลง debugging ของภาษานั้นๆ

เริ่มต้นโปรเจ็ค

ก่อนไปที่ debug เรามาเริ่มต้นสร้างโปรเจ็ค JavaScript ขึ้นมาก่อน สร้างโฟลเดอร์ใหม่ และข้างในมีไฟล์ 1 ไฟล์ ผมตั้งชื่อให้มันว่า app.js

1
const users = [
2
  {
3
    id: 1,
4
    name: 'Chuck Norris'
5
  },
6
  {
7
    id: 2,
8
    name: 'John Doe'
9
  }
10
]
11

12
const hello = (name) => `Hello ${name}`
13
const message = hello('John Doe')
14

15
const user = users.find((user) => {
16
  return user.id === 1
17
})
18

19
console.log('finished')

เริ่มต้น Debug

ที่แท็ปซ้ายมือ ชื่อว่า Run and Debug (หรือกด ⇧⌘D`) Ctrl + Shift + D สำหรับ Windows หากเราไม่มีไฟล์ launch.json เราจะได้หน้าตาดังรูปด้านล่าง

ทำการกดปุ่ม Run and Debug จากนั้นเลือก Node.js

เราสามารถสร้างไฟล์ launch.json ได้จากการกด Create a launch.json file เพื่อเป็น config file เวลาที่เราจะ debug มันก็จะมาอ่านไฟล์นี้ ว่าเราตั้งค่าอย่างไร ต้องการ debug file ไหน เปิด port อะไร เป็นต้น (ไฟล์จะถูกสร้างที่โฟลเดอร์ .vscode)

การใช้ Breakpoints

ก่อนที่จะกด Launch Debug เรามารู้จักเรื่องของ breakpoints กันก่อน breakpoints เป็นเหมือน จุดที่เราต้องการให้ debug มันหยุดทำงาน ณ บรรทัดนั้นๆ วิธีการเลือกว่า จะ breakpoint ที่บรรทัดไหน ก็แค่ เอาเมาท์ไปคลิ๊ก ด้านหน้าของบรรทัด

เมื่อถูกเลือก breakpoint จะมีปุ่มสีแดงๆ ทีนี้ทุกครั้งที่เรารัน Debug mode เนี่ย ตัวโปรแกรม มันจะมาหยุดการทำงานที่ breakpoint ที่เรากำหนดไว้

ณ จุดนี้ เราสามารถดูค่า ต่างๆ เมื่อเวลาโปรแกรมมันรันมาถึง บรรทัดที่เราต้องการได้ วิธีการเลื่อนไป breakpoint ถัดไป เราสามารถกด F5 หรือกดเครื่องหมาย ถัดไปได้

ความหมายของ Debug Actions

• Continue (F5) - ตัวแรกคือกดเพื่อไป breakpoint ถัดไป
• Step Over (F10) - ไป method ถัดไป
• Step Info (F11) - ไป method ถัดไป ลงลึกไปถึงว่า เรียก method อะไรบ้าง (ละเอียดกว่า Step Over)
• Step Out (Shift + F11) - เอาไว้ออกจาก method กลับไปก่อนหน้า
• Restart - เริ่ม debugging ใหม่
• Stop - หยุด Debugging

เมื่อเข้าสู่โหมด Debugging เราสามารถดู variables จากด้านซ้ายได้เลย เช่น อยากดูค่า hello หรือค่า user ว่ามันหา user id = 1 ได้ถูกต้องมั้ย ตามรูปด้านล่าง

เพียงแค่นี้เราก็สามารถ debug JavaScript ได้จาก VS Code เลย เมื่อโปรแกรมซับซ้อนขึ้น การ debug ก็จะมีประโยชน์มากขึ้นครับ ลองไปฝึก debug กันดูนะครับ

เดี๋ยวบทความน่าจะมาต่อเรื่องการ Debugging Mode Node.js และก็การ debug ผ่าน Web Browser ครับ

Happy Coding ❤️

Reference

• VS Code : Debugging