این extension (افزونه) یکی از کاربردی ترین ابزارهای کار با Vue.js هست که تنها برای Chrome و Firefox طراحی شده است.

ابزار vue.js-devtools به هنگام کار با Vue.js به شما کمک می کند تا به data ها و پارامترهای پروژه دسترسی داشته و تمامی کامپوننت ها و اجزای Vuejs را ببینید تا مشکل یابی یا debug کردن سایت و یا اپلیکیشن ها برای شما راحت تر شود.

نحوه نصب افزونه vue.js-devtools در مرورگر کروم:

برای نصب این افزونه در مرورگر کروم، در ابتدا باید به Chrome Web Store (سایت رسمی افزونه های کروم) رفته و افزونه رسمی vue.js devtools را، همانند راهنمای زیر، نصب کنید. این افزونه نسخه بتا هم دارد که پیشنهاد می شود از نسخه رسمی و تست شده استفاده کنید.

برای نصب این افزونه به صورت زیر عمل می کنیم:

در ابتدا به سایت رسمی دانلود افزونه های Chrome رفته و Vuejs devtools را سرچ کنید. یا با استفاده از این لینک مستقیم به صفحه ی مربوطه بروید.

شکل 1 - افزونه Vue.js devtools در وبسایت رسمی افزونه های مرورگر کروم

بعد از نصب و اضافه کردن این افزونه به کروم، باید به قسمت تنظیمات این افزونه بروید و از فعال بودن گزینه ی "Allow to access file URLs" اطمینان حاصل کنید.

شکل 2 - تنظیمات افزونه ها در مرورگر کروم

شکل 3 - تنظیمات افزونه Vue.js dev tools در مرورگر کروم

نحوه نصب افزونه vue.js-devtools در مرورگر فایرفاکس:

برای نصب این افزونه باید به صفحه رسمی افزونه های مرورگر فایرفاکس بروید یا از طریق این لینک به صورت مستقیم به صفحه دانلود این افزونه هدایت شوید.

شکل 4 - دانلود افزونه Vue.js dev tools از وبسایت رسمی دانلود افزونه ها در مرورگر فایرفاکس

پس از دانلود و نصب افزونه، برای تنظیمات بیشتر و شخصی سازی کردن این افزونه می توانید از مسیر زیر به بخش تنظیمات این افزونه بروید. (همانند تصویر)

Menu > Add-ons and Themes

شکل 5 - تنظیمات افزونه ها در مرورگر فایرفاکس

در بخش تنظیمات Manage > Vue.js devtoo

شکل 6 - تنظیمات افزونه Vue.js dev tools در مرورگر فایرفاکس

راهنمای استفاده از افزونه Vue.js devtools:

پس از نصب، روش کار با این افزونه را برایتان توضیح می دهیم. با استفاده از این افزونه ما در مرورگر به data و instance ها و ساختار کامپوننت های پروژه دسترسی داریم و می توانیم تمامی این قسمت ها را با جزئیات در این افزونه ببینیم.

برای دیدن این اطلاعات، در صفحه پروژه خود که در مرورگر باز کرده اید، کلیک راست کرده و گزینه inspect یا inspect element را بزنید.

شکل 7 - روش باز کردن منوی ابزار Vue.js dev tools

اکنون بعد از اینکه پنجره مربوط به inspect باز شد، می توانید ببینید که Tab جدیدی به عنوان Vue به inspect مرورگر شما اضافه شده است.

روی این tab کلیک کرده و وارد این قسمت شوید.

همانطور که در صفحه مشاهده می کنید، در سمت راست شما می توانید تمامی dataها و instance ها را در صفحه اول ببینید.

همچنین در سمت چپ می توانید ساختار کامپوننت ها و ساختار کلی پروژه Vue.js خودتان را ببینید که از Root آغاز می شود.

در بخش های دیگر این ابزار شما می توانید Routeها، Eventها و همچنین Vuex پروژه خود را با جزئیات زیر نظر بگیرید و همچنین با کمک گرفتن از console مرورگر خود به راحتی پروژه خود را debug کنید.

امیدوارم از این بخش هم بهره کامل را برده باشید. در پروژه های بزرگ به این ابزار نیاز جدی پیدا می کنید پس بهتر است که آن را خوب یاد بگیرید.

منابع:

https://vueschool.io/lessons/using-vue-dev-tools-with-vuejs-3

https://devtools.vuejs.org/guide/installation.html#using-global-package

راهنمای نصب و نحوه کار با ابزار vue.js-devtools