State Inspector আপনি যে পৃষ্ঠায় আছেন সেখানে Redux, Zustand, Pinia এবং Vuex stores খুঁজে পান, তাদের অবস্থা একটি লাইভ ট্রি হিসাবে দেখায় এবং আপনাকে ডিবাগার না খুলেই অ্যাকশন, প্যাচ স্টেট বা কল store অ্যাকশন পাঠাতে দেয়।
ফ্রন্ট-এন্ড বাগগুলি প্রায়শই মার্কআপের পরিবর্তে রাজ্যে বাস করে: একটি পতাকা যা কখনই উল্টে যায় না, একটি তালিকায় একটি পুরানো আইটেম রয়েছে, একটি ব্যবহারকারী অবজেক্ট ইন্টারফেসের প্রত্যাশিত ক্ষেত্রটি অনুপস্থিত। ফ্রেমওয়ার্ক 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 একটি Pinia store বা আর্গুমেন্ট সহ এটির ক্রিয়াগুলি চালান, এবং নামস্থান মডিউল সহ Vuex এ মিউটেশন বা প্রেরণের ক্রিয়া করুন৷ গাছ এবং পাতা অবিলম্বে আপডেট. টুলটি কী পৌঁছাতে পারে না সে সম্পর্কেও স্পষ্ট: একটি মডিউলের ভিতরে রাখা একটি store এবং কখনও ইন্টারফেসে হস্তান্তর করা হয় না বাইরে থেকে অদৃশ্য, এবং প্যানেলটি ব্যাখ্যা করে কিভাবে বিকাশের সময় একটিকে প্রকাশ করা যায়।
Vue 2 এবং Vue 3 -এ Redux এবং Redux Toolkit, Zustand, Pinia এবং Vuex, স্বয়ংক্রিয়ভাবে পাওয়া যায় — কোনো সেটআপ নেই এবং বিল্ডে কোনো ডেভটুল হুক নেই।
একটি কলাপসিবল ট্রি হিসাবে নেস্টেড স্টেট যা Maps, Sets, Dates, ফাংশন, ক্লাস ইনস্ট্যান্স এবং সার্কুলার রেফারেন্স পরিচালনা করে, Pinia এবং Vuex গেটার আলাদাভাবে দেখানো হয়।
Live মোড উচ্চ-স্তরের কীগুলিকে হাইলাইট করে যা পরিবর্তিত হয় এবং একটি টাইমস্ট্যাম্পের সাথে প্রতিটি পরিবর্তন লগ করে, যাতে আপনি রাষ্ট্রীয় আপডেটগুলিতে ইন্টারঅ্যাকশন ম্যাপ করতে পারেন।
Redux অ্যাকশন পাঠান, আর্গুমেন্ট সহ Zustand এবং Pinia অ্যাকশনকে কল করুন, $patch Pinia স্টেট, Zustand স্টেটে একত্রিত করুন এবং Vuex এ কমিট বা প্রেরণ করুন।
কী বা পাথ দ্বারা একটি বড় স্টেট ট্রি ফিল্টার করুন, তারপর একটি বাগ রিপোর্ট, একটি পরীক্ষা ফিক্সচার বা একটি তুলনার জন্য পুরো রাজ্যটিকে JSON হিসাবে অনুলিপি করুন৷
অ্যাপটিতে ইনস্টল করার মতো কিছুই নেই এবং কোনও ডিবাগ বিল্ডের প্রয়োজন নেই — এটি স্টেজিং, প্রোডাকশন এবং অন্যান্য লোকেদের সাইটে কাজ করে, যেখানেই stores পৌঁছানো যায়।
বাগটি ডেটা বা ভিউতে আছে কিনা তা পরীক্ষা করুন: যদি store ইতিমধ্যেই ভুল মান ধারণ করে, তাহলে উপাদানটি সমস্যা নয়।
store এমন একটি অবস্থায় রাখুন যেখানে ক্লিক করে পৌঁছানো কঠিন — একটি খালি কার্ট, একটি মেয়াদ শেষ হওয়া সেশন, এক হাজার আইটেম — এবং দেখুন কিভাবে ইন্টারফেসটি মোকাবেলা করে৷
একটি স্থাপন করা বিল্ডের লাইভ stores পড়ুন যেখানে Redux DevTools বা Vue Devtools সংযুক্ত নেই।
রাজ্যের কোন অংশে কোন মিথস্ক্রিয়া আপডেট হয় তা জানতে অ্যাপের মাধ্যমে ক্লিক করুন এবং পরিবর্তন লগ দেখুন।
ইন্টারফেসটি কী দেখিয়েছে তা বর্ণনা করার পরিবর্তে টিকিটে store একটি সঠিক JSON স্ন্যাপশট যোগ করুন।
React বা Vue পৃষ্ঠায় DevSuite Pro ডকের State Inspector আইকনে ক্লিক করুন। এটি খুঁজে পাওয়া প্রতিটি store তার লাইব্রেরি এবং এটি কোথায় পাওয়া গেছে তার সাথে তালিকাভুক্ত করা হয়েছে।
একটি গাছের অবস্থা দেখতে একটি store নির্বাচন করুন৷ আপনার প্রয়োজনীয় শাখাগুলি প্রসারিত করুন, বা সরাসরি একটি কী বা পথে যেতে ফিল্টারে টাইপ করুন।
Live চালু হলে, পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করুন এবং পরিবর্তন লগ দেখুন: প্রতিটি এন্ট্রি সময় এবং পরিবর্তিত শীর্ষ-স্তরের কীগুলি দেখায়।
JSON হিসাবে একটি অ্যাকশন, একটি প্যাচ বা আর্গুমেন্ট লিখুন এবং এটি চালান। গাছ এবং পৃষ্ঠা সরাসরি আপডেট হয়, যাতে আপনি কোড স্পর্শ না করে প্রান্তের ক্ষেত্রে পরীক্ষা করতে পারেন।
Copy state JSON store ক্যাপচার করে যেমন এটি এখন আছে, একটি টিকিট, একটি পরীক্ষা বা একটি তুলনা টুলে পেস্ট করার জন্য প্রস্তুত৷
বিনামূল্যে DevSuite Pro ইনস্টল করুন এবং আপনার ব্রাউজারের জন্য ৭৪+ ডেভলপার টুল আনলক করুন।
