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

JavaScript Apr 6, 2023

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

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

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

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

เราจะใช้ VS Code ในการ Debug ใครยังไม่มี Download ได้ที่นี่

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

Debugging Extension

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

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

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

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

const users = [
  {
    id: 1,
    name: 'Chuck Norris',
  },
  {
    id: 2,
    name: 'John Doe',
  },
]

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

const user = users.find((user) => {
  return user.id === 1
})

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 ได้ถูกต้องมั้ย ตามรูปด้านล่าง