State Inspector

باگ‌های فرانت‌اند اغلب به‌جای نشانه‌گذاری در حالت زندگی می‌کنند: پرچمی که هرگز باز نمی‌شود، فهرستی که یک آیتم قدیمی را در خود نگه می‌دارد، یک شی کاربر که فیلد مورد انتظار رابط را از دست داده است. ابزارهای توسعه فریمورک می‌توانند آن را نشان دهند، اما تنها زمانی که پسوند مناسب نصب شده باشد، بیلد آن را در معرض دید قرار می‌دهد و شما در دستگاهی هستید که می‌توانید اشکال‌زدایی را باز کنید. در سایت استیجینگ، لپ تاپ همکار یا صفحه تولید، اغلب اینطور نیست.

این ابزار 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 ادغام کنید یا یکی از اکشن های آن را فراخوانی کنید، $patch یک Pinia store یا اقدامات آن را با آرگومان ها اجرا کنید، و جهش ها را انجام دهید یا اقداماتی را در Vuex ، از جمله ماژول های فضای نام، انجام دهید. درخت و صفحه بلافاصله به روز می شوند. این ابزار همچنین در مورد آنچه که نمی‌تواند به آن دسترسی پیدا کند، واضح است: store که در داخل یک ماژول نگهداری می‌شود و هرگز در اختیار رابط قرار نمی‌گیرد، از بیرون نامرئی است، و پنل توضیح می‌دهد که چگونه می‌توان آن را در طول توسعه در معرض دید قرار داد.