วิธีดีบั๊ค Vue.js บน Chrome/EDGE วิธีใช้ Vue.js devtools

หากคุณกำลังเริ่มหัดเขียน Vue.js อยู่ละก็ รับรองว่าคุณต้องมีคำถามว่าแล้วเราจะ Debug มันยังไงดี เพราะถึงแม้จะ Inspect ดูโค้ด เราก็มองไม่เห็นค่าใน Compoent ของ Vue.js อยู่ดี ว่าแล้วเราก็จะต้องมาหาตัวช่วยกันสักหน่อย

วันนี้ดูเพลินจึงขอแนะนำ Extension ของ Browser Chrome และ EDGE ที่จะทำให้คุณสามารถดีบั๊ก Vue.js ได้ ส่วนวิธีการติดตั้งและการใช้งานจะเป็นยังไงนั้นมาดูกันได้เลยจ้า

วิธีดีบั๊ก Vue.js โดยใช้ Chrome/EDGE ด้วย Extension Vue.js devtools

  1. เริ่มด้วยการติดตั้ง Extension Vue.js devtools บนก่อน โดย
    ใน Chrome Download ที่นี่
    ใน EDGE Download ที่นี่
  2. วิธีการใช้งานก็เพียงคลิกขวาบนหน้าเว็บไซต์ และเลือก Inspect
  3. จากนั้นคลิกที่ Tab Vue คุณก็จะสามารถ Debug Vue.js ได้แล้ว

เทคนิค วิธีใช้งาน Vue.js devtools บน Chrome/EDGE เบื้องต้น

  1. วิธีค้น 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
  2. เมื่อคุณเอา Mouse ชี้ที่ Component ด้านขวา ในหน้า App Browser ก็จะทำการ Select element ที่ถูกสร้างขึ้นมาบนหน้า HTML ได้

เป็นยังไงกันบ้างคะสำหรับบทความ วิธีดีบั๊ค Vue.js บน Chrome/EDGE วิธีใช้ Vue.js devtools ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

เทคนิคอื่นๆ เกี่ยวกับการเขียนโค้ด คลิก

อย่าลืมไปติดตาม Facebook fanpage ของเรา >> Click <<

หมวดหมู่เกี่ยวกับ Coding

เนื้อหาที่คล้ายกัน...

แก้ปัญหา Vue.js Fix devtools inspection is not available

แก้ปัญหา Vue.js Fix devtools inspection is not available

ดูเพลิน Admin - 06 ม.ค. 66

เรื่องราวเอื่น ๆ ในหมวดเทคนิคการเขียนโค้ด...

let value = 147/32; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.59 Result = 5let value = 147/33; let result_value = Math.round(value); console.info('Value = '+value+' Result = '+result_value); //ผลลัพธ์ Value = 4.454 Result = 4