چگونه با Vue.js Devtools کامپوننت‌ها، وضعیت و ایونت‌ها را دیباگ کنیم؟

برای دیباگ کردن یک اپلیکیشن Vue، معمولاً باید بین کد منبع و مرورگر رد و بدل شوید و پس از انجام تغییرات سرور را مجدد راه‌اندازی کنید تا تغییرات را ببینید، اما این فرآیند زمان‌بر است. برای افزایش کارایی دیباگ، می‌توانید از افزونه مرورگر مانند Vue.js Devtools استفاده کنید.

Vue.js Devtools یک افزونه مرورگر برای Chrome و Firefox و همچنین اپلیکیشن مستقل Electron است که توسط Guillaume Chau و Evan You از تیم اصلی Vue.js ساخته شده است. این ابزار نمای بصری از عملکرد داخلی اپلیکیشن Vue شما ارائه می‌دهد تا بتوانید کامپوننت‌ها، داده‌ها، خصوصیات محاسبه شده و رویدادها را از مرورگر بررسی کنید، همچنین اکشن‌ها، گترها و میوتیشن‌های Vuex را مشاهده نمایید.

با Devtools شما دقیقاً می‌توانید ببینید که کدام رویداد اجرا شده و چه داده‌ای (payload) داشته است. علاوه بر رویدادها، کامپوننت‌ها به صورت یک ساختار شبیه DOM نمایش داده می‌شوند تا بتوانید خصوصیات کامپوننت مانند داده‌ها، computed properties و props را تحلیل کنید.

در این آموزش، ابتدا یک اپلیکیشن نمونه Vue ایجاد می‌کنید، افزونه Vue.js Devtools را نصب می‌کنید، سپس ویژگی‌های جدید به اپ اضافه کرده و آن‌ها را با این افزونه مرورگر تست می‌کنید. این ابتدا ابتدای مسیر دیباگ کردن کد با استفاده از Vue.js Devtools است.

مرحله اول: ایجاد اپلیکیشن نمونه Vue

ابتدا یک اپلیکیشن جدید Vue با Vue CLI ایجاد کنید. برای این کار ترمینال خود را باز کرده و دستور زیر را اجرا کنید.

npm create vue@latest

زمانی که گزینه‌های تنظیمات اپلیکیشن نمایش داده شد، گزینه Manually select features را انتخاب کنید. سپس Choose Vue version، Babel و Vuex را انتخاب کنید. سپس کلید ENTER را زده و باقی تنظیمات را به صورت پیش‌فرض یا مورد نظر خود پر کنید.

وقتی پروژه favorite-airports ساخته شد، ترمینال را باز کنید و به شاخه ریشه پروژه بروید:

cd favorite-airports

سپس یک پوشه جدید بسازید:

mkdir src/data

در ادیتور متنی خود فایلی به نام src/data/airports.js بسازید و محتوای زیر را در آن وارد کنید:

export default [
  {
    name: "Cincinnati/Northern Kentucky International Airport",
    abbreviation: "CVG",
    city: "Hebron",
    state: "KY",
    construction: false
  },
  {
    name: "John Glenn Columbus International Airport",
    abbreviation: "CMH",
    city: "Columbus",
    state: "OH",
    construction: false
  },
  {
    name: "Chicago O'Hare International Airport",
    abbreviation: "ORD",
    city: "Chicago",
    state: "IL",
    construction: true
  },
  {
    name: "Southwest Florida International Airport",
    abbreviation: "RSW",
    city: "Fort Myers",
    state: "FL",
    construction: false
  },
  {
    name: "Hartsfield-Jackson Atlanta International Airport",
    abbreviation: "ATL",
    city: "Atlanta",
    state: "GA",
    construction: false
  },
  {
    name: "Northwest Arkansas National Airport",
    abbreviation: "XNA",
    city: "Fayetteville",
    state: "AR",
    construction: false
  }
];

این یک آرایه از آبجکت‌ها است که شامل اطلاعات چند فرودگاه در ایالات متحده می‌باشد. در این اپلیکیشن، قرار است داده‌ها را تکرار کنید و کارت‌هایی شامل نام، اختصار، شهر و ایالت بسازید. این داده‌ها جهت بررسی رویدادها و اجرای آن‌ها در Vue.js Devtools استفاده خواهند شد.

فایل را ذخیره کنید، سپس یک کامپوننت تک فایل (SFC) به نام AirportCard.vue در پوشه components بسازید.

فایل components/AirportCard.vue را باز کنید و محتوای زیر را در آن قرار دهید:

<template>
  <div class="airport" @click="$emit('favorite-airport', airport)" :class="{ 'is-under-construction': airport.construction }">
    <p class="abbr">{{ airport.abbreviation }}</p>
    <p class="name">{{ airport.name }}</p>
    <p class="city-state">{{ airport.city }}, {{ airport.state }}</p>
    <p v-if="airport.construction" class="construction">Under Construction</p>
  </div>
</template>

<script>
export default {
  name: "AirportCard",
  props: {
    airport: {
      type: Object,
      required: true
    }
  }
};
</script>

<style scoped>
.airport {
  border: 1px solid black;
  padding: 1rem;
  margin-bottom: 1rem;
  cursor: pointer;
}

.airport p:first-child {
  font-weight: bold;
  font-size: 1.5rem;
}

.airport p:last-child {
  font-style: italic;
  color: gray;
}

.is-under-construction {
  border-color: red;
  color: red;
}
</style>

در این کامپوننت، یک prop به نام airport تعریف شده که داده‌ها را از والد دریافت می‌کند. همچنین رویداد click اجرا می‌شود تا یک رویداد سفارشی favorite-airport با payload داده فرودگاه به والد ارسال شود. در CSS هم استایل‌هایی برای کارت فرودگاه و حالت‌های خاص از جمله وقتی فرودگاه در حال ساخت است تعریف شده است.

در ادامه، در فایل App.vue کد زیر را جایگزین محتویات قبلی کنید:

<template>
  <div id="app">
    <AirportCard
      v-for="airport in airports"
      :key="airport.abbreviation"
      :airport="airport"
      @favorite-airport="addToFavorites"
    />

    <div v-if="favorites.length">
      <h2>Favorite Airports</h2>
      <AirportCard
        v-for="airport in favorites"
        :key="airport.abbreviation"
        :airport="airport"
      />
    </div>
  </div>
</template>

<script>
import airports from "./data/airports.js";
import AirportCard from "./components/AirportCard.vue";
import { mapState, mapActions } from "vuex";

export default {
  name: "App",
  components: {
    AirportCard
  },
  computed: {
    ...mapState(["favorites"]),
    airports() {
      return airports;
    }
  },
  methods: {
    ...mapActions(["addToFavorites"])
  }
};
</script>

در این کد، با استفاده از v-for کارت‌های فرودگاه از آرایه داده شده ساخته می‌شود. رویداد سفارشی favorite-airport وقتی کارت کلیک شود با action Vuex مرتبط می‌شود. همچنین بخش جداگانه‌ای برای نمایش فرودگاه‌های منتخب کاربر وجود دارد.

پروژه را با دستور زیر اجرا کنید:

npm run serve

این سرور روی localhost:8080 اجرا خواهد شد. مرورگر خود را باز کنید و به این آدرس بروید. لیست کارت‌های فرودگاه را مشاهده خواهید کرد.

نصب Vue.js Devtools

برای استفاده از Vue.js Devtools ابتدا باید افزونه را روی مرورگر خود نصب کنید.

اگر از مرورگرهای مبتنی بر Chromium مانند Google Chrome، Microsoft Edge یا Opera استفاده می‌کنید، به فروشگاه افزونه Chrome مراجعه کنید و عبارت “Vue Devtools” را جستجو کنید. اطمینان حاصل کنید که نسخه‌ای که نصب می‌کنید توسط “vuejs-dev” ارائه شده باشد و با نسخه Vue 3 شما سازگار باشد (نسخه بتا برای Vue 3).

در مرورگر Firefox نیز به فروشگاه افزونه Firefox بروید و “Vue Devtools” را جستجو و افزونه منتشر شده توسط Evan You را نصب کنید.

کاربران Safari یا دیگر مرورگرهای پشتیبانی نشده می‌توانند از اپلیکیشن مستقل Electron از طریق npm استفاده کنند.

بررسی کامپوننت‌ها و داده‌ها در Devtools

در مرورگر پس از بازکردن localhost:8080، ابزار Inspect را باز کنید (CMD+ALT+I در مک و CTRL+ALT+I در ویندوز). در نوار بالای پنل Inspect، تب “Vue” را انتخاب کنید.

در اینجا لیستی از کامپوننت‌های Vue مشاهده می‌شود. کامپوننت App و سپس کامپوننت‌های AirportCard که در صفحه هستند نمایش داده می‌شوند.

هنگامی که یک کامپوننت انتخاب شود، در پنل جزئیات، داده‌ها، props و computed properties مربوط به آن نمایش داده می‌شود.

این قابلیت به شما امکان می‌دهد تا وضعیت رندر شده هر کامپوننت را به صورت دقیق بررسی و حتی مستقیماً در Browser آن را هایلایت کنید.

تغییر داده‌ها در Devtools برای تست سریع

می‌توانید به صورت مستقیم داخل Vue.js Devtools مقدار داده‌های کامپوننت‌ها را تغییر دهید تا تست‌های سریع روی ظاهر یا رفتار کامپوننت‌ها بدون تغییر کد اصلی داشته باشید.

مثلاً با گذاشتن مقدار true در فیلد construction در داده یک فرودگاه، کارت آن به شکل قرمز رنگ (حالت در حال ساخت) تغییر خواهد کرد.

دیباگ رویدادهای Vue

در کامپوننت AirportCard.vue، با استفاده از @click رویداد کلیک را شنیده و با استفاده از $emit رویداد سفارشی favorite-airport همراه داده فرودگاه ارسال می‌شود.

در Vue.js Devtools، بخش Timeline (زمان‌بندی) امکان مشاهده رویدادهای مختلف از جمله کلیک‌ها و رویدادهای سفارشی را به صورت گرافیکی به شما می‌دهد.

با کلیک روی کارت فرودگاه، این رویدادها به صورت نقاط رنگی نمایش داده شده و با انتخاب هر رویداد اطلاعات دقیق در مورد زمان و payload آن قابل مشاهده است.

مدیریت وضعیت با Vuex و بررسی در Devtools

به فایل src/store/index.js کد زیر را اضافه کنید:

export default createStore({
  state() {
    return {
      favorites: []
    };
  },
  mutations: {
    UPDATE_FAVORITES(state, airport) {
      state.favorites.push(airport);
    }
  },
  actions: {
    addToFavorites({ commit, state }, airport) {
      if (!state.favorites.find(fav => fav.abbreviation === airport.abbreviation)) {
        commit("UPDATE_FAVORITES", airport);
      }
    }
  }
});

در App.vue هنگام دریافت رویداد سفارشی favorite-airport با addToFavorites اکشن Vuex فراخوانی می‌شود که وضعیت favorites را به‌روزرسانی می‌کند.

در Vue.js Devtools بخش Vuex می‌توانید وضعیت (state) فعلی، اکشن‌ها و mutations را به صورت بصری مشاهده و بررسی کنید. همچنین می‌توانید ببینید که انتخاب کارت‌ها چگونه وضعیت favorites را به‌روزرسانی می‌کند.

با افزودن بخشی برای نمایش فرودگاه‌های منتخب در App.vue، می‌توانید لیست انتخاب شده‌ها را در صفحه نیز مشاهده کنید.

نتیجه‌گیری

Vue.js Devtools ابزاری رایگان برای مرورگرهای Chromium و Firefox است و همچنین به صورت اپلیکیشن مستقل نیز قابل دریافت است. در این آموزش شما یک اپلیکیشن نمونه ساختید، داده‌ها را رندر کردید، توسط Devtools به بررسی کامپوننت‌ها، تغییر داده‌ها، مشاهده رویدادها و مانیتورینگ وضعیت Vuex پرداختید.

برای یادگیری بیشتر درباره Vue.js Devtools، به مستندات رسمی آن به نشانی https://devtools.vuejs.org/ مراجعه کنید.

از همراهی شما برای یادگیری با پارمین کلود سپاسگزاریم.