State Inspector ค้นหา stores Redux, Zustand, Pinia และ Vuex บนหน้าที่คุณกำลังดูอยู่ แสดงสถานะเป็นแผนผังสด และให้คุณส่งการดำเนินการ สถานะแพตช์ หรือเรียกใช้การดำเนินการ store โดยไม่ต้องเปิดดีบักเกอร์
ข้อบกพร่องส่วนหน้ามักจะอยู่ในสถานะมากกว่ามาร์กอัป: ธงที่ไม่เคยพลิก รายการที่เก็บรายการเก่า อ็อบเจ็กต์ผู้ใช้ไม่มีฟิลด์ที่อินเทอร์เฟซคาดหวัง Framework devtools สามารถแสดงได้ แต่เมื่อติดตั้งส่วนขยายที่ถูกต้องแล้วเท่านั้น บิลด์จึงเปิดเผยและคุณอยู่บนเครื่องที่คุณสามารถเปิดดีบักเกอร์ได้ บนไซต์ชั่วคราว แล็ปท็อปของเพื่อนร่วมงาน หรือเพจที่ใช้งานจริง มักไม่เป็นเช่นนั้น
เครื่องมือนี้จะอ่าน 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 hook ใน build
สถานะที่ซ้อนกันเป็นแผนผังแบบยุบได้ซึ่งจัดการ Maps, Sets, Dates, ฟังก์ชัน, อินสแตนซ์ของคลาส และการอ้างอิงแบบวงกลม โดยที่ Pinia และ Vuex getters จะแสดงแยกกัน
โหมด Live จะไฮไลต์คีย์ระดับบนสุดที่เปลี่ยนแปลง และบันทึกทุกการเปลี่ยนแปลงด้วยการประทับเวลา เพื่อให้คุณสามารถแมปการโต้ตอบกับการอัปเดตสถานะได้
ส่งการกระทำ Redux เรียกการกระทำของ Zustand และ Pinia พร้อมอาร์กิวเมนต์ $patch สถานะ Pinia รวมเข้ากับสถานะ Zustand และส่งมอบหรือส่งใน Vuex
กรองแผนผังสถานะขนาดใหญ่ตามคีย์หรือเส้นทาง จากนั้นคัดลอกสถานะทั้งหมดเป็น JSON สำหรับรายงานจุดบกพร่อง โปรแกรมทดสอบ หรือการเปรียบเทียบ
ไม่ต้องติดตั้งอะไรในแอปและไม่จำเป็นต้องสร้างการแก้ไขข้อบกพร่อง โดยใช้งานได้ทั้งบนระบบชั่วคราว ในการใช้งานจริง และบนไซต์ของผู้อื่น ทุกที่ที่ stores เข้าถึงได้
ตรวจสอบว่าจุดบกพร่องอยู่ในข้อมูลหรือในมุมมอง หาก store เก็บค่าที่ไม่ถูกต้องไว้แล้ว ส่วนประกอบก็ไม่ใช่ปัญหา
ทำให้ store อยู่ในสถานะที่เข้าถึงได้ยากโดยการคลิก เช่น รถเข็นเปล่า เซสชันที่หมดอายุ สินค้านับพันรายการ และดูว่าอินเทอร์เฟซรับมืออย่างไร
อ่าน stores สดของบิลด์ที่ปรับใช้โดยที่ Redux DevTools หรือ Vue Devtools ไม่ได้เชื่อมต่อ
คลิกผ่านแอปและดูบันทึกการเปลี่ยนแปลงเพื่อเรียนรู้ว่าการโต้ตอบใดอัปเดตส่วนใดของรัฐ
เพิ่มสแน็ปช็อต JSON ที่แน่นอนของ store ลงในตั๋ว แทนที่จะอธิบายว่าอินเทอร์เฟซแสดงอะไร
คลิกไอคอน State Inspector ใน DevSuite Pro dock บนหน้า React หรือ Vue store ทุกแห่งที่พบจะมีรายการอยู่ในห้องสมุดและสถานที่ที่พบ
เลือก store เพื่อดูสถานะเป็นต้นไม้ ขยายสาขาที่คุณต้องการ หรือพิมพ์ตัวกรองเพื่อข้ามไปยังคีย์หรือเส้นทางโดยตรง
เมื่อเปิดใช้ Live ให้โต้ตอบกับเพจและดูบันทึกการเปลี่ยนแปลง: แต่ละรายการจะแสดงเวลาและปุ่มระดับบนสุดที่เปลี่ยนแปลง
ป้อนการดำเนินการ โปรแกรมแก้ไข หรืออาร์กิวเมนต์เป็น JSON แล้วเรียกใช้ แผนผังและเพจจะอัปเดตทันที ดังนั้นคุณจึงสามารถทดสอบ Edge Case ได้โดยไม่ต้องแตะโค้ด
Copy state JSON จะบันทึก store ตามที่เป็นอยู่ในขณะนี้ พร้อมที่จะวางลงในตั๋ว เครื่องมือทดสอบ หรือเครื่องมือเปรียบเทียบ
ติดตั้ง DevSuite Pro ฟรีและปลดล็อกเครื่องมือสำหรับนักพัฒนามากกว่า 74 รายการสำหรับเบราว์เซอร์ของคุณ
