หากคุณกำลังเริ่มหัดเขียน Vue.js อยู่ละก็ รับรองว่าคุณต้องมีคำถามว่าแล้วเราจะ Debug มันยังไงดี เพราะถึงแม้จะ Inspect ดูโค้ด เราก็มองไม่เห็นค่าใน Compoent ของ Vue.js อยู่ดี ว่าแล้วเราก็จะต้องมาหาตัวช่วยกันสักหน่อย
วันนี้ดูเพลินจึงขอแนะนำ Extension ของ Browser Chrome และ EDGE ที่จะทำให้คุณสามารถดีบั๊ก Vue.js ได้ ส่วนวิธีการติดตั้งและการใช้งานจะเป็นยังไงนั้นมาดูกันได้เลยจ้า
วิธีดีบั๊ก Vue.js โดยใช้ Chrome/EDGE ด้วย Extension Vue.js devtools
- เริ่มด้วยการติดตั้ง Extension Vue.js devtools บนก่อน โดย
ใน Chrome Download ที่นี่
ใน EDGE Download ที่นี่
- วิธีการใช้งานก็เพียงคลิกขวาบนหน้าเว็บไซต์ และเลือก Inspect
- จากนั้นคลิกที่ Tab Vue คุณก็จะสามารถ Debug Vue.js ได้แล้ว
เทคนิค วิธีใช้งาน Vue.js devtools บน Chrome/EDGE เบื้องต้น
- วิธีค้น Compnent ที่ต้องการดีบั๊คใน Vue.js devtools โดยในตัวอย่างนี้เราจะทำการค้นหา Component ที่มีชื่อว่า "SwOrderDetail"
โดยคุณสามารถเปิด Chrome DevTools ขึ้นมา จากนั้นไปที่ Tab "Vue" โดยหน้าจอจะมีรายละเอียดดังนี้
1. ช่องค้นหา Component (จากตัวอย่าง เราค้นหาคำว่า orderDetail)
2. รายการ Component ทั้งหมดใน Vue App
3. Component ที่ถูก Select อยู่
4. ช่องค้นหาตัวแปร และ Method และอื่น ๆ ใน Componen t(จากตัวอย่าง เราค้นหาคำว่า id)
5. ตัวแปร และ Method และอื่น ๆ ใน Component
- เมื่อคุณเอา Mouse ชี้ที่ Component ด้านขวา ในหน้า App Browser ก็จะทำการ Select element ที่ถูกสร้างขึ้นมาบนหน้า HTML ได้
