يعثر State Inspector على stores Redux و Zustand و Pinia و Vuex على الصفحة التي تتواجد فيها، ويعرض حالتها كشجرة حية، ويتيح لك إرسال الإجراءات أو تصحيح الحالة أو استدعاء إجراءات store دون فتح مصحح أخطاء.
غالبًا ما تعيش أخطاء الواجهة الأمامية في حالة وليس في علامة: علامة لا تقلب أبدًا، أو قائمة تحتوي على عنصر قديم، أو كائن مستخدم يفتقد الحقل الذي تتوقعه الواجهة. يمكن لأدوات تطوير إطار العمل إظهار ذلك، ولكن فقط عند تثبيت الامتداد الصحيح، يكشفه الإصدار وتكون على جهاز يمكنك من خلاله فتح مصحح الأخطاء. في موقع التدريج، أو الكمبيوتر المحمول الخاص بزميل، أو صفحة الإنتاج، لا يكون هذا هو الحال غالبًا.
تقوم هذه الأداة بقراءة stores مباشرة من الصفحة. يتم العثور على Redux من خلال أيدي react-redux store Provider ، Pinia و Vuex من خلال تطبيق Vue المثبتين فيه ( Vue 3 و Vue 2)، و Zustand من خلال store مكشوف على window أو من خلال المكونات التي تقرأ منه. يتم إدراج كل store مع مكان العثور عليه، وتظهر حالته كشجرة قابلة للطي تجعل Maps Sets Dates والوظائف والمراجع الدائرية قابلة للقراءة بدلاً من الفشل في إجراء تسلسل.
يعيد الوضع Live قراءة store المحدد كل ثانيتين، ويسلط الضوء على مفاتيح المستوى الأعلى التي تغيرت ويحتفظ بسجل تغيير قصير، حتى تتمكن من النقر حول الصفحة ومشاهدة أي جزء من الحالة يمسه كل تفاعل. يعثر المرشح على أي مفتاح أو مسار في شجرة حالة كبيرة، ويمنحك Copy state JSON لقطة لتقرير خطأ أو أداة اختبار.
عندما لا تكون القراءة كافية، غيّرها في مكانها: أرسل إجراء Redux ، أو ادمج كائنًا في حالة Zustand أو استدعِ أحد إجراءاته، أو قم بتصحيح store Pinia $patch أو قم بتشغيل إجراءاته باستخدام الوسائط، وارتكب تغييرات أو أرسل إجراءات في Vuex ، بما في ذلك الوحدات ذات مساحة الأسماء. يتم تحديث الشجرة والصفحة على الفور. كما أن الأداة واضحة أيضًا بشأن ما لا يمكنها الوصول إليه: store الذي يتم الاحتفاظ به داخل وحدة نمطية ولم يتم تسليمه مطلقًا إلى الواجهة يكون غير مرئي من الخارج، وتشرح اللوحة كيفية الكشف عن أحد المتاجر أثناء التطوير.
تم العثور على Redux و Redux Toolkit و Zustand و Pinia و Vuex على Vue 2 و Vue 3 تلقائيًا - لا يوجد إعداد ولا توجد أدوات تطوير في البناء.
الحالة المتداخلة كشجرة قابلة للطي تتعامل مع Maps Sets Dates والوظائف ومثيلات الفئة والمراجع الدائرية، مع عرض حروف Pinia و Vuex بشكل منفصل.
يسلط الوضع Live الضوء على مفاتيح المستوى الأعلى التي تغيرت ويسجل كل تغيير بطابع زمني، حتى تتمكن من تعيين التفاعلات لتحديثات الحالة.
إرسال إجراءات Redux ، واستدعاء إجراءات Zustand و Pinia باستخدام الوسائط، وحالة Pinia $patch ، والدمج في حالة Zustand ، والالتزام أو الإرسال في Vuex.
قم بتصفية شجرة حالة كبيرة حسب المفتاح أو المسار، ثم انسخ الحالة بأكملها بتنسيق JSON للحصول على تقرير خطأ أو اختبار أو مقارنة.
لا يوجد شيء يمكن تثبيته في التطبيق ولا حاجة إلى إنشاء تصحيح الأخطاء - فهو يعمل على التدريج والإنتاج وعلى مواقع الأشخاص الآخرين، أينما يمكن الوصول إلى stores.
تحقق مما إذا كان الخطأ موجودًا في البيانات أو في طريقة العرض: إذا كان store يحمل بالفعل قيمة خاطئة، فإن المكون ليس هو المشكلة.
ضع store في حالة يصعب الوصول إليها بالنقر فوق - عربة فارغة، أو جلسة منتهية الصلاحية، أو ألف عنصر - وشاهد كيف تتعامل الواجهة.
اقرأ stores المباشرة للبنية المنشورة حيث لا يتم توصيل Redux DevTools أو Vue Devtools.
انقر فوق التطبيق وشاهد سجل التغيير لمعرفة التفاعلات التي يتم تحديثها لأي جزء من الولاية.
أضف لقطة JSON دقيقة store إلى التذكرة بدلاً من وصف ما أظهرته الواجهة.
انقر فوق أيقونة State Inspector في DevSuite Pro في صفحة React أو Vue. يتم إدراج كل store تجده مع مكتبته ومكان العثور عليه.
حدد store لترى حالته كشجرة. قم بتوسيع الفروع التي تحتاجها، أو اكتب عامل التصفية للانتقال مباشرة إلى المفتاح أو المسار.
مع تشغيل Live ، تفاعل مع الصفحة وشاهد سجل التغيير: يعرض كل إدخال الوقت ومفاتيح المستوى الأعلى التي تغيرت.
أدخل إجراءً أو تصحيحًا أو وسيطات بتنسيق JSON وقم بتشغيله. يتم تحديث الشجرة والصفحة على الفور، حتى تتمكن من اختبار حالات الحافة دون لمس الرمز.
Copy state JSON تلتقط store كما هو الآن، جاهزًا للصقه في تذكرة أو اختبار أو أداة مقارنة.
قم بتثبيت DevSuite Pro مجانًا وافتح أكثر من 74 أداة للمطورين لمتصفحك.
