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

หลายคนที่เขียน Vue.js คุณต้องเคยเจอปัญหา Vue.js Devtools inspection is not available because it's in production mode or explicitly disabled by the author. อย่างแน่นอน

และถึงแม้คุณจะพยายามแก้ไขทุกทางแล้ว ไม่ว่าจะเป็นใส่ Config แบบนี้
Vue.config.devtools = true
หรือว่าว่าจะใส่ Config แบบนี้
"start:dev": "vue-cli-service build --mode=development"
แต่ปัญหานี้กลับยังไม่หายไปสักที วันนี้ดูเพลินจะขอเสนอวิธีการแก้ปัญหานี้ให้คุณอย่างง่าย ๆ ด้วยการใช้ Extension ที่ชื่อว่า Vue force dev

วิธีแก้ปัญหาดีบั๊ก Vue.js ใน Chrome ไม่ได้

  1. ก่อนที่จะทำการ Debug Vue.js บน Chrome ได้นั้น คุณจำเป็นต้องติดตั้ง Extenstion ที่มีชื่อว่า Vue.js devtools กันซะก่อน อ่านรายละเอียดเพิ่มเติม คลิกที่นี่
  2. วิธีแรกคือการ Config ในไฟล์ Instance ของ Vue (ไฟล์เดียวกับที่เราเรียก import vue from 'vue' นั้นแหละครับ) โดยเราจะเพิ่มบรรทัด "Vue.config.devtools = true" ลงไป
    import Vue from 'vue';
    Vue.use(VueI18n);
    Vue.use(Vuex);
    Vue.config.devtools = true;
  3. วิธีที่สองคือการ Config ในไฟล์ package.json โดยให้ค้นหา "start:dev" จากนั้นแก้บรรทัดนี้ตามด้านล่าง
    scripts: {
        "start:dev": "vue-cli-service build --mode=development"
    }
  4. วิธีที่สามคือการติดตั้ง Extension Vue force dev บน Chrome โดยคุณสามารถ Download ได้ที่นี่

 

แก้ปัญหา Devtools inspection is not available because it's in production mode or explicitly disabled by the author

  1. ปัญหาคือ เมื่อคลิกใช้งาน Vue.js devtool แล้ว จะมี Warning ขึ้นมากว่า Vue.js is detected on this page. Devtools .....

    และใน Chrome DevTools ก็ไม่แสดง Tab "Vue" ขึ้นมาให้เลือก
  2. และหลังจากที่ติดตั้ง Extension Vue force dev เรียบร้อยแล้ว คุณก็จะสามารถ Debug Vue.js ได้แล้ว

 

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

เป็นยังไงกันบ้างคะสำหรับบทความ แก้ปัญหา Vue.js Fix devtools inspection is not available ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย

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

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

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

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

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

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

ดูเพลิน 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