หลายคนที่เขียน 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 ไม่ได้
- ก่อนที่จะทำการ Debug Vue.js บน Chrome ได้นั้น คุณจำเป็นต้องติดตั้ง Extenstion ที่มีชื่อว่า Vue.js devtools กันซะก่อน อ่านรายละเอียดเพิ่มเติม คลิกที่นี่
- วิธีแรกคือการ 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;
- วิธีที่สองคือการ Config ในไฟล์ package.json โดยให้ค้นหา "start:dev" จากนั้นแก้บรรทัดนี้ตามด้านล่าง
scripts: { "start:dev": "vue-cli-service build --mode=development" }
- วิธีที่สามคือการติดตั้ง Extension Vue force dev บน Chrome โดยคุณสามารถ Download ได้ที่นี่
แก้ปัญหา Devtools inspection is not available because it's in production mode or explicitly disabled by the author
- ปัญหาคือ เมื่อคลิกใช้งาน Vue.js devtool แล้ว จะมี Warning ขึ้นมากว่า Vue.js is detected on this page. Devtools .....
และใน Chrome DevTools ก็ไม่แสดง Tab "Vue" ขึ้นมาให้เลือก
- และหลังจากที่ติดตั้ง Extension Vue force dev เรียบร้อยแล้ว คุณก็จะสามารถ Debug Vue.js ได้แล้ว
สำหรับใครที่อยากจะอ่านรายละเอียดเรื่อง วิธีดีบั๊ค Vue.js บน Chrome/EDGE วิธีใช้ Vue.js devtools เพิ่มเติม คุณสามารถ คลิกที่นี่ เพื่ออ่านเนื้อหาเพิ่มเติมได้
บทความอื่น ๆ ที่เกี่ยวข้องกับ Vue.js
เป็นยังไงกันบ้างคะสำหรับบทความ แก้ปัญหา Vue.js Fix devtools inspection is not available ดูเพลินก็หวังว่าบทความของเราจะเป็นประโยชน์ต่อท่านไม่มากก็น้อย นอกจากนี้ เรายังมีบทความดี ๆ อีกมากมาย คุณสามารถลองคลิกเขาไปอ่านบทความอื่น ๆ ตามลิงค์ด้านล่างได้เลย