أداة Vue.js DevTools

يحتوي Vue على لوحة رائعة تتكامل مع Browser Developer Tools ، والتي تتيح لك فحص تطبيقك والتفاعل معه ، لتسهيل التصحيح والفهم


عندما تجرب Vue لأول مرة ، إذا فتحت Browser Developer Tools ، فستجد هذه الرسالة: "قم بتنزيل ملحق Vue Devtools للحصول على تجربة تطوير أفضل:https://github.com/vuejs/vue-devtools"

Hint to install the Vue devtools

هذا تذكير سهل لتثبيتملحق Vue Devtools. ما هذا؟ يحتوي أي إطار عمل شائع على ملحق devtools الخاص به ، والذي يضيف بشكل عام لوحة جديدة إلى أدوات مطور المستعرض تكون أكثر تخصصًا من تلك التي يشحنها المتصفح افتراضيًا. في هذه الحالة ، ستتيح لنا اللوحة فحص تطبيق Vue الخاص بنا والتفاعل معه.

ستكون هذه الأداة مساعدة رائعة عند إنشاء تطبيقات Vue. يمكن لأدوات المطور فحص تطبيق Vue فقط عندما يكون في وضع التطوير. هذا يضمن عدم تمكن أي شخص من استخدامها للتفاعل مع تطبيق الإنتاج الخاص بك (وسيجعل Vue أكثر أداءً لأنه لا يجب أن يهتم بأدوات التطوير)

لنقم بتثبيته!

هناك 3 طرق لتثبيت أدوات Vue Dev:

  • على كروم
  • على Firefox
  • كتطبيق مستقل

لا يتم دعم Safari و Edge والمتصفحات الأخرى بامتداد مخصص ، ولكن باستخدام التطبيق المستقل ، يمكنك تصحيح أخطاء تطبيق Vue.js الذي يعمل في أي متصفح.

قم بالتثبيت على Chrome

انتقل إلى هذه الصفحة على متجر Google Chrome:https://chrome.google.com/webstore/detail/vuedevtools/nhdogjmejiglipccpnnnanhbledajbpdوانقرإضافة إلى الكروم.

Add to chrome

تابع عملية التثبيت:

Add extension

تظهر أيقونة Vue.js devtools في شريط الأدوات. إذا لم يكن للصفحة مثيل Vue.js قيد التشغيل ، فسيكون باللون الرمادي.

Vue DevTools installed

إذا تم اكتشاف Vue.js ، فسيكون للرمز ألوان شعار Vue.

Icon colored

الأيقونة لا تفعل شيئًا سوى إظهار ذلك لنا هناكيكونمثيل Vue.js. لاستخدام devtools ، يجب أن نفتح لوحة Developer Tools ، باستخدام "View → Developer → Developer Tools" أوCmd-Alt-i

DevTools window

قم بالتثبيت على Firefox

يمكنك العثور على ملحق أدوات تطوير Firefox في متجر إضافات Mozilla:https://addons.mozilla.org/en-US/firefox/addon/vue-js-devtools/

Firefox addons store

انقر "أضف إلى Firefox"وسيتم تثبيت الامتداد. كما هو الحال مع Chrome ، تظهر أيقونة رمادية اللون في شريط الأدوات

Firefox addon installed

وعندما تزور موقعًا به مثيل Vue قيد التشغيل ، فسوف يتحول إلى اللون الأخضر ، وعندما نفتح أدوات التطوير ، سنرى "Vue" لوجة:

Vue devtools in Firefox

قم بتثبيت التطبيق المستقل

بدلاً من ذلك ، يمكنك استخدام تطبيق DevTools المستقل.

قم بتثبيته باستخدام ملفات

npm install -g @vue/devtools

//or

yarn global add @vue/devtools

وتشغيله عن طريق الاتصال

vue-devtools

سيؤدي هذا إلى فتح التطبيق المستقل القائم على الإلكترون.

Standalone Vue devtools

الآن ، الصق علامة البرنامج النصي التي تظهر لك:

<script src="http://localhost:8098"></script>

داخل المشروعindex.htmlملف ، وانتظر حتى يتم إعادة تحميل التطبيق ، وسيقوم تلقائيًا بالاتصال بالتطبيق:

Standalone Vue devtools connected

كيفية استخدام أدوات المطور

كما ذكرنا ، يمكن تنشيط Vue DevTools عن طريق فتح أدوات المطور في المتصفح والانتقال إلى لوحة Vue.

خيار آخر هو النقر بزر الماوس الأيمن على أي عنصر في الصفحة واختيار "فحص مكون Vue":

Inspect vue component

عندما تكون لوحة Vue DevTools مفتوحة ، يمكننا التنقل في شجرة المكونات. عندما نختار مكونًا من القائمة الموجودة على اليسار ، تعرض اللوحة اليمنى الخاصيات والبيانات التي يحتوي عليها:

Navigate the components tree

يوجد في الجزء العلوي 4 أزرار:

  • عناصر(اللوحة الحالية) ، والتي تسرد جميع مثيلات المكون التي تعمل في الصفحة الحالية. يمكن أن يكون لـ Vue مثيلات متعددة تعمل في نفس الوقت ، على سبيل المثال قد تدير أداة عربة التسوق الخاصة بك وعرض الشرائح ، مع تطبيقات منفصلة وخفيفة الوزن.
  • Vuexهو المكان الذي يمكنك فيه تفتيش الدولة التي تدار من خلالهاVuex.
  • الأحداثيظهر كل الأحداث المنبعثة
  • ينعشيعيد تحميل لوحة devtools

لاحظ الصغيرة= $vm0نص بجانب مكون؟ إنها طريقة سهلة لفحص أحد المكونات باستخدام وحدة التحكم. يؤدي الضغط على مفتاح "esc" إلى إظهار وحدة التحكم في الجزء السفلي من أدوات التطوير ، ويمكنك الكتابة$vm0للوصول إلى مكون Vue:

Component Console Shortcut

يعد فحص المكونات والتفاعل معها أمرًا رائعًا دون الحاجة إلى تخصيصها لمتغير عالمي في الكود.

مكونات التصفية

ابدأ في كتابة اسم المكون ، وستقوم شجرة المكونات بتصفية العناصر غير المتطابقة.

Filter components

حدد المكون في الصفحة

انقر على

Select component in the page

ويمكنك تحريك أي مكون في الصفحة بالماوس والنقر فوقه ، وسيتم فتحه في أدوات التطوير.

تنسيق أسماء المكونات

يمكنك اختيار إظهار المكونات في علبة الجمل أو استخدام الشرطات.

تصفية البيانات التي تم فحصها

في اللوحة اليمنى ، يمكنك كتابة أي كلمة لتصفية الخصائص التي لا تتطابق معها.

افحص DOM

انقر فوق الزر Inspect DOM ليتم إحضاره إلى عارض DevTools Elements ، باستخدام عنصر DOM الذي تم إنشاؤه بواسطة المكون:

Inspect DOM

فتح في المحرر

يحتوي أي مكون مستخدم (وليس مكونات على مستوى إطار العمل) على زر يفتحه في المحرر الافتراضي الخاص بك. سهل جدا.

تحميل مجانيكتيب Vue


المزيد من دروس vue: