ตัวตรวจสอบ PixiJS ในเบราว์เซอร์สำหรับการดีบักฉากภาพ
เครื่องมือพัฒนา Pixi ซึ่งสร้างโดย bfanger เป็นส่วนขยายของ Chrome ที่มุ่งเป้าไปที่นักพัฒนาที่ทำงานกับ PixiJS และเนื้อหา 2D แบบโต้ตอบ มันฝังแท็บ 'Pixi' ที่ออกแบบมาโดยเฉพาะในเครื่องมือพัฒนา Chrome เพื่อดูฉาก PixiJS ที่กำลังทำงานโดยไม่ต้องแก้ไขไฟล์ต้นฉบับ ส่วนขยายนี้มีการแสดงผลกราฟฉากและช่วยให้สามารถปรับแต่งบนหน้าเว็บสำหรับเลย์เอาต์และสถานะได้ ออกแบบมาสำหรับนักพัฒนาเว็บ นักออกแบบเกม และนักเขียนโค้ดสร้างสรรค์ ช่วยเร่งการวินิจฉัยปัญหาการเรนเดอร์และการจัดชั้นระหว่างการพัฒนา。
Pixi Dev Tools ใช้ทำอะไร?
เครื่องมือนี้เป็นเครื่องมือเฉพาะที่เปิดเผยลำดับชั้นการแสดงผลของ PixiJS ภายใน Developer Tools ทำให้โครงสร้างของฉากมองเห็นได้เป็นต้นไม้ มันแมพ Stages, Containers, และ Sprites ลงในแผงที่สามารถนำทางได้เพื่อให้นักพัฒนาสามารถค้นหาน็อดในโปรเจกต์ที่ซับซ้อนได้ เป้าหมายคือการทำงานของ PixiJS ซึ่งการเข้าใจความสัมพันธ์ระหว่างพ่อ/ลูกและการใช้เท็กซ์เจอร์มีความสำคัญต่อการจัดลำดับการเรนเดอร์และการทดสอบการสัมผัส
มันช่วยการดีบักแบบวนซ้ำบนผืนผ้าใบสดได้อย่างไร?
Pixi Dev Tools สนับสนุนการแก้ไขคุณสมบัติของวัตถุแบบทันที เช่น ตำแหน่ง, ขนาด, การหมุน, อัลฟา, และจุดยึด ดังนั้นค่าจึงสามารถปรับได้ในขณะที่แอปทำงาน การเน้นภาพ เชื่อมโยงรายการตรวจสอบกับผืนผ้าใบ และการสลับสถานะการมองเห็นหรือการโต้ตอบช่วยให้คุณแยกปัญหาการเรนเดอร์ออกมาได้ การค้นหาและการกรองช่วยลดเวลาที่ใช้ในการค้นหาน็อดภายในกราฟฉากขนาดใหญ่
มันรวมเข้ากับการทำงานของนักพัฒนาได้ดีแค่ไหน?
ส่วนขยายนี้เพิ่มแท็บ Pixi ลงใน Chrome Developer Tools และสามารถส่งออกวัตถุแสดงผลที่เลือกไปยังคอนโซลทั่วโลกสำหรับการตรวจสอบแบบสคริปต์ ซึ่งเชื่อมโยงการตรวจสอบภาพกับการดีบักที่ขับเคลื่อนด้วยคอนโซล มันมีให้บริการผ่าน Chrome Web Store สำหรับเบราว์เซอร์ที่ใช้ Chromium และได้รับการดูแลเป็นโครงการโอเพนซอร์สโดยผู้มีส่วนร่วมในชุมชน PixiJS ดังนั้นการรวมเข้ากับกระบวนการพัฒนาที่ใช้เบราว์เซอร์จึงเหมาะสม
มันสามารถตรวจสอบการสร้างในผลิตภัณฑ์ได้หรือไม่ และเมื่อไหร่ที่มันไม่สามารถเติมข้อมูลได้?
แท็บ Pixi จะเติมข้อมูลเฉพาะเมื่อแอปพลิเคชัน PixiJS ทำงานบนหน้าที่ใช้งานอยู่และวัตถุ PIXI ทั่วโลกสามารถเข้าถึงได้ ดังนั้นมันจึงทำงานกับการสร้างในผลิตภัณฑ์ได้เฉพาะเมื่อรันไทม์ถูกเปิดเผยต่อหน้าต่าง เมื่อ PIXI ไม่ถูกเปิดเผย เครื่องมือการตรวจสอบจะยังคงว่างเปล่า ซึ่งจำกัดการใช้งานบนหน้าที่ถูกบันเดิลอย่างแน่นหนาหรืออยู่ในแซนด์บ็อกซ์ซึ่งห้องสมุดไม่สามารถเข้าถึงได้จาก DevTools
เครื่องมือดีบักที่มุ่งเน้นซึ่งเหมาะที่สุดสำหรับการตรวจสอบโครงการ PixiJS
ส่วนขยายนี้เป็นตัวเลือกที่เหมาะสมสำหรับนักพัฒนาที่เก็บ PixiJS runtime ให้เข้าถึงได้ในระหว่างการพัฒนาและต้องการการมองเห็นโดยตรงในลำดับชั้นการแสดงผล ประสิทธิภาพของมันจะลดลงเมื่อไลบรารีถูกซ่อนโดยท่อการสร้างหรือการจำกัดที่เข้มงวด ใช้มันเป็นเครื่องมือในระยะพัฒนาที่จะลดการลองผิดลองถูกในการจัดเรียงฉาก; โครงการที่ไม่สามารถเปิดเผย runtime จะพบว่าประโยชน์ลดน้อยลง.
