C-React: แสดงผลการเรนเดอร์ของคอมโพเนนต์ใน React
C-React เป็นเครื่องมือส่วนเสริมของ Chrome ที่พัฒนาโดย C-React ซึ่งให้การแสดงผลแบบภาพของ React ของคอมโพเนนต์ เครื่องมือโอเพนซอร์สนี้ช่วยให้ผู้ใช้สามารถดูต้นไม้คอมโพเนนต์ของ DOM เฝ้าตรวจสอบรูปแบบการแสดงผลบนหน้าเว็บ และเข้าถึงเมตริกการทำงานได้
โดยการรวมเครื่องมือ C-React Developer Tool เข้ากับแผงพัฒนา Chrome ผู้ใช้สามารถอัปเดตและสื่อสารกับหน้าเว็บได้เพื่อแสดงผลการเปลี่ยนแปลงของคอมโพเนนต์ โดยเครื่องมือนี้ยังมีเมตริกการทำงานสำหรับคอมโพเนนต์เพื่อส่งเสริมเวลาโหลดที่มีประสิทธิภาพ
เพื่อเริ่มต้นใช้งานเพียงแค่ติดตั้ง C-React DevTool จาก Chrome Web Store จากนั้นเปิดแอปพลิเคชัน React ของคุณที่ถูกแสดงผลโดย C-React's Custom Renderer เปิด Chrome Developer Tools และคลิกที่แผง C-React ขณะคุณไล่ทำเครื่องหมายผ่านหน้าเว็บของคุณ ต้นไม้คอมโพเนนต์จะอัปเดตได้แบบไดนามิก ให้การแสดงผลที่ชัดเจนเมื่อคลิกที่โหนดต้นไม้จะเน้นส่วนที่เกี่ยวข้องบนหน้าเว็บของคุณ
แม้ว่าเครื่องมือ C-React Dev Tool จะเข้ากันได้กับหน้าเว็บใดก็ได้ แต่จะไม่แสดงเวลาโหลดสำหรับองค์ประกอบที่เฉพาะเจาะจงหรือเน้นส่วนที่เกี่ยวข้องเมื่อคลิกที่โหนดต้นไม้เว้นแต่หน้าเว็บจะถูกแสดงผลโดย C-React's Custom Renderer