State Inspector እርስዎ ባሉበት ገጽ ላይ Redux, Zustand, Pinia እና Vuex stores ያገኛል, ሁኔታቸውን እንደ ቀጥታ ዛፍ ያሳያሉ, እና አራሚ ሳይከፍቱ ድርጊቶችን, የ patch state ወይም የጥሪ store ድርጊቶችን እንዲልኩ ያስችልዎታል.
የፊት-ፍጻሜ ሳንካዎች ብዙውን ጊዜ በምልክት ከማድረግ ይልቅ በግዛት ይኖራሉ፡- መቼም የማይገለበጥ ባንዲራ፣ የቆየ ንጥል ነገር የያዘ ዝርዝር፣ የተጠቃሚ ነገር በይነገጹ የሚጠብቀውን መስክ ይጎድለዋል። Framework devtools ሊያሳዩት ይችላሉ, ነገር ግን ትክክለኛው ቅጥያ ሲጫን ብቻ, ግንባታው ያጋልጠዋል እና ማረም የሚከፍቱበት ማሽን ላይ ነዎት. በማስተናገጃ ቦታ ላይ፣ የስራ ባልደረባችን ላፕቶፕ ወይም የምርት ገፅ፣ ብዙ ጊዜ እንደዛ አይደለም።
ይህ መሳሪያ stores በቀጥታ ከገጹ ላይ ያነባል. Redux store react-redux እጅ ወደ Provider ፣ Pinia እና Vuex በተጫኑበት Vue መተግበሪያ ( Vue 3 እና Vue 2) እና Zustand window ላይ በተጋለጠው store ወይም ከሱ በሚያነቡት ክፍሎች በኩል ይገኛል። እያንዳንዱ store ከተገኘበት ቦታ ጋር ተዘርዝሯል እና ግዛቱ Maps ፣ Sets ፣ Dates ፣ ተግባሮችን እና የክብ ማጣቀሻዎችን በተከታታይ ከማስቀመጥ ይልቅ ተነባቢ ሆኖ የሚያቆይ ሊሰበር የሚችል ዛፍ ሆኖ ይታያል።
Live ሁነታ የተመረጠውን store በየሁለት ሰከንዱ እንደገና ያነባል፣ የተቀየሩትን የከፍተኛ ደረጃ ቁልፎች ያደምቃል እና አጭር የለውጥ ምዝግብ ማስታወሻ ይይዛል፣ ስለዚህ ገጹን ጠቅ በማድረግ እያንዳንዱ መስተጋብር የትኛውን የግዛት ክፍል እንደሚነካ ይመልከቱ። ማጣሪያ በትልቁ የግዛት ዛፍ ላይ ማንኛውንም ቁልፍ ወይም መንገድ ያገኛል፣ እና Copy state JSON የሳንካ ሪፖርት ወይም ለሙከራ ማሳያ ቅጽበታዊ እይታ ይሰጥዎታል።
ማንበብ በቂ በማይሆንበት ጊዜ በቦታው ላይ ይቀይሩት፡ የ Redux ድርጊትን ይላኩ፣ አንድን ነገር ወደ Zustand ግዛት ያዋህዱ ወይም ከድርጊቶቹ አንዱን ይደውሉ፣ $patch a Pinia store ወይም ድርጊቶቹን በክርክር ያሂዱ፣ እና ሚውቴሽን ያከናውኑ ወይም በ Vuex ውስጥ መላክ፣ የስም ቦታ ያላቸው ሞጁሎችን ጨምሮ። ዛፉ እና ገጹ ወዲያውኑ ይሻሻላል. መሳሪያው ምን ሊደርስበት እንደማይችልም ግልጽ ነው፡ በአንድ ሞጁል ውስጥ የተቀመጠ እና ለበይነገጹ ፈፅሞ ያልተሰጠ store ከውጭ የማይታይ ነው፣ እና ፓኔሉ በእድገት ወቅት እንዴት እንደሚያጋልጥ ያብራራል።
Redux እና Redux Toolkit ፣ Zustand ፣ Pinia እና Vuex በ Vue 2 እና Vue 3 ላይ፣ በራስ ሰር የተገኙ - ምንም ማዋቀር እና ምንም devtools በግንባታው ውስጥ መንጠቆ የለም።
Maps ፣ Sets ፣ Dates ፣ ተግባራትን ፣ የክፍል ምሳሌዎችን እና ክብ ማጣቀሻዎችን የሚያከናውን ሊሰበር የሚችል ዛፍ ሆኖ Pinia እና Vuex ጌተርስ ለየብቻ ይታያል።
Live ሁነታ የተቀየሩትን የከፍተኛ ደረጃ ቁልፎችን ያደምቃል እና እያንዳንዱን ለውጥ በጊዜ ማህተም ይመዘግባል፣ ስለዚህ ማሻሻያዎችን ለመግለጽ ግንኙነቶችን ካርታ ማድረግ ይችላሉ።
Redux ድርጊቶችን ይላኩ፣ Zustand እና Pinia እርምጃዎችን ከነክርክሮች ጋር ይደውሉ፣ $patch Pinia state፣ ወደ Zustand state ይቀላቀሉ እና በ Vuex ውስጥ ይግቡ ወይም ይላኩ።
አንድ ትልቅ የግዛት ዛፍ በቁልፍ ወይም በዱካ ያጣሩ፣ ከዚያ መላውን ግዛት እንደ JSON ለስህተት ሪፖርት፣ ለሙከራ መሣሪያ ወይም ለማነፃፀር ይቅዱ።
በመተግበሪያው ውስጥ ምንም የሚጫን ነገር የለም እና ምንም የማረም ግንባታ አያስፈልግም - stores በሚገኙበት ቦታ ሁሉ በማዘጋጀት ላይ፣ በምርት እና በሌሎች ሰዎች ድረ-ገጽ ላይ ይሰራል።
ስህተቱ በመረጃው ውስጥ ወይም በእይታ ውስጥ መሆኑን ያረጋግጡ store ቀድሞውኑ የተሳሳተ እሴት ከያዘ ችግሩ ችግሩ አይደለም።
ጠቅ በማድረግ store ለመድረስ አስቸጋሪ ወደሆነ ሁኔታ ያስቀምጡት - ባዶ ጋሪ፣ ጊዜው ያለፈበት ክፍለ ጊዜ፣ አንድ ሺህ ንጥሎች - እና በይነገጹ እንዴት እንደሚቋቋም ይመልከቱ።
Redux DevTools ወይም Vue Devtools ያልተገናኙበትን የተዘረጋውን ግንባታ ቀጥታ stores ያንብቡ።
የትኛው መስተጋብር የትኛውን የግዛት ክፍል እንደሚያዘምን ለማወቅ መተግበሪያውን ጠቅ ያድርጉ እና የለውጥ ምዝግብ ማስታወሻውን ይመልከቱ።
በይነገጽ ምን እንዳሳየ ከመግለጽ ይልቅ store ትክክለኛ JSON ቅጽበታዊ ፎቶ ወደ ቲኬቱ ያክሉ።
በ React ወይም Vue ገጽ ላይ በ DevSuite Pro dock ውስጥ State Inspector አዶን ጠቅ ያድርጉ። የሚያገኛቸው store ሁሉ ቤተ መጻሕፍቱ እና የት እንደተገኘ ተዘርዝረዋል።
ሁኔታውን እንደ ዛፍ ለማየት store ይምረጡ። የሚፈልጓቸውን ቅርንጫፎች ዘርጋ ወይም በቀጥታ ወደ ቁልፍ ወይም መንገድ ለመዝለል ማጣሪያውን ይተይቡ።
Live ስርጭት በርቶ ከገጹ ጋር ይገናኙ እና የለውጥ ምዝግብ ማስታወሻውን ይመልከቱ፡ እያንዳንዱ ግቤት ጊዜውን እና የተቀየሩትን ከፍተኛ-ደረጃ ቁልፎች ያሳያል።
እንደ JSON አንድ ድርጊት፣ መጣፊያ ወይም ክርክሮችን ያስገቡ እና ያሂዱት። ዛፉ እና ገጹ ወዲያውኑ ይዘምናሉ፣ ስለዚህ ኮዱን ሳይነኩ የጠርዝ ጉዳዮችን መሞከር ይችላሉ።
Copy state JSON store አሁን እንዳለ፣ ወደ ትኬት፣ የሙከራ ወይም የንፅፅር መሳሪያ ለመለጠፍ ዝግጁ ሆኖ ይይዛል።
DevSuite Pro ን በነፃ ይጫኑ እና 74+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።
