State Inspector מוצא את stores Redux, Zustand, Pinia ו- Vuex בדף שבו אתה נמצא, מציג את מצבן כעץ חי, ומאפשר לך לשלוח פעולות, לתקן מצב או להתקשר לפעולות store מבלי לפתוח באג.
באגים קדמיים חיים לעתים קרובות במדינה ולא בסימון: דגל שלעולם לא מתהפך, רשימה שמחזיקה פריט מיושן, אובייקט משתמש שחסר את השדה שהממשק מצפה לו. Devtools של Framework יכולים להראות את זה, אבל רק כשהתוסף הנכון מותקן, ה-build חושף אותו ואתה נמצא במכונה שבה אתה יכול לפתוח באג. באתר בימוי, במחשב נייד של עמית או בדף הפקה, זה לרוב לא המקרה.
כלי זה קורא את stores ישירות מהעמוד. Redux נמצא דרך store react-redux ידיים Provider שלה, Pinia ו- Vuex דרך אפליקציית Vue שהם מותקנים בה ( Vue 3 ו- Vue 2), ו- Zustand דרך store חשופה window או דרך הרכיבים שקוראים ממנה. כל store רשומה עם המקום שבו היא נמצאה, והמצב שלה מוצג כעץ מתקפל ששומר על Maps, Sets, Dates, פונקציות והפניות מעגליות במקום להיכשל בהסדרה.
מצב Live קורא מחדש את store שנבחרה כל שתי שניות, מדגיש את המקשים ברמה העליונה שהשתנו ושומר יומן שינויים קצר, כך שתוכל ללחוץ על הדף ולראות באיזה חלק של המצב נוגעת כל אינטראקציה. מסנן מוצא כל מפתח או נתיב בעץ מצב גדול, והעתק Copy state JSON נותן לך תמונת מצב עבור דוח באג או מתקן בדיקה.
כאשר הקריאה אינה מספיקה, שנה אותה במקום: שלח פעולת Redux, מיזוג אובייקט למצב Zustand או התקשר לאחת הפעולות שלו, $patch store Pinia או הפעל את הפעולות שלה עם ארגומנטים, וביצוע מוטציות או פעולות שיגור ב- Vuex, כולל מודולים עם רווחי שמות. העץ והדף מתעדכנים מיד. הכלי גם ברור למה הוא לא יכול להגיע: store שנשמרה בתוך מודול ומעולם לא נמסרה לממשק אינה נראית מבחוץ, והפאנל מסביר כיצד לחשוף כזו במהלך הפיתוח.
Redux ו- Redux Toolkit, Zustand, Pinia ו- Vuex ב- Vue 2 ו- Vue 3, נמצאו אוטומטית - ללא הגדרות וללא הוק של כלים ל-devtools ב-build.
מצב מקונן כעץ מתקפל המטפל 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+ כלי פיתוח לדפדפן שלך.
