แผง DevTools ที่ถอดรหัสข้อมูลการไหลของ React Router และ Remix
React Router Inspector ซึ่งพัฒนาโดยนักพัฒนาที่เป็นอิสระ เป็นส่วนขยาย Chrome DevTools สำหรับการดีบัก React Router v6/v7 และแอปพลิเคชัน Remix มันถอดรหัสโหลดเดอร์และแอคชันเพย์โหลดให้เป็นค่าที่อ่านได้และแสดงการดึงข้อมูลจากเซิร์ฟเวอร์ที่แท็บเครือข่ายพลาดไป ส่วนขยายนี้เพิ่มแผง DevTools ที่มีรายการคำขอที่ถอดรหัสแล้ว บันทึกคอนโซลรวม และพาเนลที่ปรับขนาดได้ มันมุ่งเป้าไปที่นักพัฒนาเว็บที่ต้องการความชัดเจนในระดับเส้นทางและการไหลของข้อมูลระหว่างเซิร์ฟเวอร์และไคลเอ็นต์ที่ชัดเจนในระหว่างการพัฒนา。
React Router Inspector ใช้ทำอะไร?
ส่วนขยายนี้เป็นแผง DevTools ที่สร้างขึ้นเพื่อการพัฒนาเท่านั้น ซึ่งแสดงให้เห็นว่าผู้โหลดเส้นทางและการกระทำทำงานอย่างไรในเวลาจริง มันเชื่อมต่อกับ Chrome DevTools และแสดงรายการคำขอข้อมูลทุกคำขอพร้อมกับส่วนหัว เวลา และเนื้อหาที่ถอดรหัส ทำให้นักพัฒนามีความสามารถในการมองเห็นตามเส้นทางแทนที่จะเป็นข้อมูลเครือข่ายดิบ ซึ่งเหมาะสำหรับวิศวกรที่ทำงานกับ React Router v6, v7 หรือโครงการ Remix ที่ต้องการตรวจสอบค่าที่ถอดรหัส เช่น วันที่ แผนที่ และ BigInts.
มันเปิดเผยกิจกรรมการเรนเดอร์ฝั่งเซิร์ฟเวอร์อย่างไร?
เครื่องมือจะแสดงการดึงข้อมูล SSR ที่เครื่องมือเบราว์เซอร์มาตรฐานไม่เปิดเผย โดยแสดงการดึงข้อมูลจากฝั่งเซิร์ฟเวอร์ควบคู่ไปกับคำขอจากลูกค้า มันสามารถรวมเข้ากับปลั๊กอิน Vite ที่เป็นเพื่อนเพื่อสตรีมบันทึกเซิร์ฟเวอร์เข้าสู่แผง ทำให้นักพัฒนาเห็นบันทึกทั้งจากเบราว์เซอร์และเซิร์ฟเวอร์/SSR ในมุมมองเดียวที่รวมกัน แผงยังมีการกรองแหล่งที่มาและสวิตช์ Preserve เพื่อรักษาข้อมูลข้ามการนำทางสำหรับการดีบักแบบขั้นตอน.
มันจัดการกับประเภทข้อมูลที่ซับซ้อนและความสะดวกสบายของนักพัฒนาอย่างไร?
ตัวตรวจสอบถอดรหัสรูปแบบ turbo-stream เป็นค่าจริง รักษาประเภทที่ซับซ้อน เช่น วันที่ แผนที่ และ BigInts แทนที่จะทิ้งบล็อคที่เข้ารหัสที่ไม่โปร่งใส UI มุ่งเป้าไปที่นักพัฒนาด้วยพาเนลที่ปรับขนาดได้และการเน้นข้อผิดพลาด และแสดงรายการการดำเนินการ GraphQL และ REST ในรูปแบบเครือข่าย สำหรับการรวมบันทึกเซิร์ฟเวอร์อย่างเต็มรูปแบบ ส่วนขยายต้องการเพื่อนปลั๊กอิน vite-plugin-rr-inspector ในโครงการที่ใช้ Vite.
เครื่องมือพัฒนาแบบมุ่งเน้นสำหรับการดีบักระดับเส้นทางพร้อมการแลกเปลี่ยนที่ชัดเจน
ส่วนขยายนี้เป็นตัวเลือกที่มุ่งเป้าไปยังนักพัฒนาที่ต้องการการมองเห็นที่ถอดรหัสได้และมีขอบเขตเส้นทางในโหลดเดอร์และการกระทำ และสำหรับผู้ที่ต้องการการมองเห็นการดึงข้อมูล SSR ในระหว่างการพัฒนา มันขึ้นอยู่กับ Chrome DevTools และสำหรับบันทึกเซิร์ฟเวอร์จะต้องใช้ปลั๊กอิน Vite ดังนั้นจึงไม่เหมาะสำหรับการดีบักการสร้างในผลิตภัณฑ์หรือโครงการที่ไม่มีการตั้งค่าการพัฒนา Vite ใช้เมื่อคุณต้องการข้อมูลเชิงลึกที่อ่านได้โดยตรงเกี่ยวกับการไหลของข้อมูลที่ขับเคลื่อนโดยเราเตอร์.
