พี่ๆ Backend มันจะ Debug ยังไงหรอครับ ?

console.log() สิครับ …

คุณเบื่อกับการ console.log() แบบเดิมๆหรือไม่ ตอนนี้จะไม่เป็นอย่างงั้นอีกต่อไป …
บอกลาการ Debug แบบเดิมไปได้เลยครับ เพราะเราจะมาพร้อมกับ การ Debug แห่งศตวรรษที่ 21

ขอแนะนำ

Debug in Visual Studio Code

Visual Studio Code ก็คือโปรแกรมที่เอาไว้ใช้ในการเขียนโค้ดที่โคตรจะคลู แค่มีติดเครื่องไว้ก็เท่แล้วล่ะครับ ส่วนใครที่ยังไม่มีก็สามารถ Download ไปทดลองใช้กันได้เลยนะครับ

ซึ่งความสามารถพิเศษของมันก็คือไอ่เจ้า debugging ที่มีมาให้นี่แหละครับ ที่จะทำให้เราดูเทพทรูขึ้นมาทันที ไม่ต้องมา console.log() ใน function อีกต่อไป


demo is now

อย่างแรกเปิดโปรเจคขึ้นมาโดย Visual Studio Code แล้วเราจะเห็นที่เมนูด้านซ้ายจะมีรูปเหมือนแมลงสาบ… เอ่อนั้นแหละ กดมันซะหรือถ้าอยากดูเมพให้กดคีย์ลัด 
(command + shift + d) หมับเข้าให้ !!! ก็จะได้หน้าตาแบบนี้

จะเห็นว่ายังไม่มี Config เลย ดังนั้นให้กดที่รูปเฟืองเพื่อเพิ่ม Config

อาจจะมีให้เลือก Environment ในที่นี้ผมใช้ Node.js เพราะผมใช้ Express ในการ demo โปรเจค backend ของผม หรือใครจะใช้ภาษาอื่นก็ให้เลือก more ได้เลยครับ

โปรแกรมจะเปิดไฟล์ launch.json ขึ้นมา ให้เรากดที่ปุ่ม Add Configuration แล้วเลือก Launch via NPM

ก็จะได้โค้ด config ออกมาเป็นแบบนี้ครับ หลังจากนั้นให้เราไปเพิ่ม script "debug" ในไฟล์ package.json

"scripts": {
"debug": "node --nolazy --debug-brk=5858 myProgram.js"
}

ตรง myProgram.js ให้เปลี่ยนตามโปรเจคของแต่ละคน ว่าไฟล์ที่ใช้ในการ start server คือไฟล์ไหน เช่นถ้าเป็นโปรเจคที่ใช้ Express application generator ก็จะประมาณนี้ครับ

"scripts": {
"start": "node ./bin/www",
"debug": "node --nolazy --debug-brk=5858 ./bin/www"
}

หลังจากนั้นกลับมาที่ debugging ด้วย (command + shift + d) ผัวะเข้าให้ !!! 
เลือก configuration ให้เป็น Launch via NPM ที่เราได้ทำไว้ แล้วกดปุ่ม Start Debugging สีเขียวๆ

หลังจากนั้นก็ตั้งจิตอธิษฐาน นึกถึงครูบาอาจารย์ ที่เคยอบรมสั่งสอนเรา สาธุ 99



ถ้าคุณเห็น Debug Console แบบนี้แสดงว่าคุณได้ไปต่อ … ไปค่ะ ไปให้สุด

แต่ถ้าหากเจอ Error แบบนี้

ให้แก้โดยการใส่

"protocol": "legacy"

เพิ่มเข้าไปใน configurations ในไฟล์ launch.json แล้วลองกด Start ดูอีกทีครับ

หลังจากที่เรากดปุ่ม Start Debugging ไปมันก็จะไป Start Server ให้เราด้วย และตอนนี้การ Debug ก็พร้อมแล้ว เราก็แค่ไป Breakpoints ไว้ใน Function ที่เราต้องการจะ Debug

พี่คร้าบบบ Breakpoints ทำยังไงคร้าบบบบ ? ก็แค่ไปกดให้มีจุดกลมๆแดงๆหน้าโค้ดบรรทัดนั้นๆ แล้วก็ไปลองเรียกใช้ API จากหน้าเว็บหรือ Postman ก็ได้

เมื่อเราเรียก API มันก็จะมาหยุดตรงบรรทัดที่เราใส่ Breakpoints เอาไว้ แล้วยังสามารถดูค่าต่างๆได้ที่ tab ทางซ้ายมือ เช่น ค่า req หรือ res เหยดดดดดดด …


มีใครสังเกตุเห็นอะไรแปลกๆที่โผล่ขึ้นมาตอนกด Start Debugging มั้ยครับ นั้นก็คือ

ผ่ามมม … มันเอาไว้ใช้จัดการตอนที่โปรแกรมมันติด Breakpoints ครับ การทำงานก็ตามสัญลักษณ์เลยครับ น่าจะพอเดาๆกันได้ ถ้าเรา Debug เสร็จแล้วก็กดไอ่ปุ่มสีแดง เพื่อ Stop Debugging ครับ จอบอ นะ