لوحة DevTools التي تقوم بفك تشفير تدفقات بيانات React Router و Remix
React Router Inspector، من مطور مستقل، هو ملحق ل أدوات مطور Chrome لتصحيح تطبيقات React Router v6/v7 و Remix. يقوم بفك تشفير الحمولة الخاصة بالتحميل والإجراء إلى قيم قابلة للقراءة ويظهر عمليات الجلب من الخادم التي تفوتها علامة الشبكة. يضيف الملحق لوحة أدوات مخصصة مع قوائم طلبات مفككة، وسجلات وحدة تحكم مجمعة، وألواح قابلة لتغيير الحجم. يستهدف مطوري الويب الذين يحتاجون إلى رؤية على مستوى المسار وتدفق بيانات أكثر وضوحًا بين الخادم والعميل أثناء التطوير.
ما هو استخدام React Router Inspector؟
الإضافة هي لوحة أدوات تطوير مخصصة فقط تم بناؤها لعرض كيفية تصرف محملات المسارات والإجراءات في الوقت الحقيقي. إنها تتصل بأدوات مطوري Chrome وتعرض كل طلب بيانات مع الرؤوس، والتوقيت، والأجسام المفككة، مما يمنح المطورين رؤية محددة للمسار بدلاً من حمولات الشبكة الخام. هذا يناسب المهندسين الذين يعملون على مشاريع React Router v6 و v7 أو Remix الذين يحتاجون إلى فحص القيم المفككة مثل التواريخ، والخرائط، و BigInts.
كيف تكشف عن نشاط التقديم من جانب الخادم؟
الأداة تكشف عن عمليات جلب SSR التي لا تكشف عنها أدوات المتصفح القياسية، مما يظهر عمليات الجلب من جانب الخادم جنبًا إلى جنب مع طلبات العميل. يمكن أن تتكامل مع مكون إضافي مرافق لـ Vite لبث سجلات الخادم إلى اللوحة، بحيث يرى المطورون كل من سجلات المتصفح وسجلات الخادم/SSR في عرض موحد واحد. كما تقدم اللوحة أيضًا تصفية المصدر وزر الحفاظ للاحتفاظ بالبيانات عبر التنقلات من أجل تصحيح الأخطاء خطوة بخطوة.
كيف تتعامل مع أنواع البيانات المعقدة وراحة المطور؟
المفتش يفكك تنسيقات turbo-stream إلى قيم حقيقية، مع الحفاظ على الأنواع المعقدة مثل التواريخ، والخرائط، و BigInts بدلاً من ترك كتل مشفرة غير شفافة. تستهدف واجهة المستخدم المطورين مع نوافذ قابلة للتغيير وإبراز الأخطاء، وتعرض عمليات GraphQL و REST في تخطيط على نمط الشبكة. من أجل التكامل الكامل مع سجلات الخادم، تتطلب الإضافة مكون vite-plugin-rr-inspector المرافق في المشاريع المعتمدة على Vite.
أداة تطوير مركزة لتصحيح الأخطاء على مستوى المسار مع مقايضة واضحة
هذه الإضافة هي خيار مستهدف للمطورين الذين يحتاجون إلى رؤية مفككة ومحددة للمسار في المحملات والإجراءات ولأولئك الذين يتطلبون رؤية جلب SSR أثناء التطوير. تعتمد على أدوات مطوري Chrome، ومن أجل سجلات الخادم، تعتمد على مكون Vite، لذا فهي ليست مناسبة لتصحيح الأخطاء في إصدارات الإنتاج أو المشاريع التي لا تحتوي على إعداد تطوير Vite. استخدمها عندما تحتاج إلى رؤية مباشرة وقابلة للقراءة في تدفقات البيانات المدفوعة بالموجه.
