ngLens: APM ใน DevTools สำหรับการตรวจสอบเวลารันของ Angular
ngLens โดย Gowtham (heygauti) เป็นส่วนขยาย Chrome DevTools ที่ทำหน้าที่เป็น APM ในเบราว์เซอร์สำหรับแอปพลิเคชัน Angular โดยมุ่งเน้นที่การเปิดเผยเหตุผลเบื้องหลังการอัปเดตของคอมโพเนนต์ มันแสดงภาพการทำงานในระหว่างการดำเนินการ เน้นการเรนเดอร์แบบลำดับชั้น และทำเครื่องหมายการรั่วไหลของหน่วยความจำเพื่อให้นักพัฒนาสามารถติดตามเส้นทาง API-to-UI และค้นหาจุดร้อนด้านประสิทธิภาพ มุ่งเป้าไปที่วิศวกรส่วนหน้าและผู้เชี่ยวชาญด้านประสิทธิภาพ มันช่วยลดรอบการวิเคราะห์สาเหตุที่แท้จริงในระหว่างการพัฒนาและการดีบักในผลิตภัณฑ์.
ngLens มุ่งเน้นที่การดำเนินการในระหว่างการทำงานมากกว่าต้นไม้ของส่วนประกอบแบบสถิติ
ngLens แสดงเส้นทางจากการเรียก API และที่เก็บสถานะผ่าน Signals ไปยังส่วนประกอบ UI โดยเสนอการแสดงภาพการดำเนินการแทนที่จะเป็นภาพรวมของส่วนประกอบแบบสถิติ ส่วนขยายนี้แสดงให้เห็นว่าการเปลี่ยนแปลงเพียงครั้งเดียวทำให้เกิดการเรนเดอร์แบบลำดับชั้น และมันรวมเข้ากับไลบรารีสถานะเช่น NgRx และ Signal Store การจัดแนวนี้ช่วยในการหาสาเหตุของการอัปเดต ทำให้ติดตามการไหลแบบอะซิงโครนัสที่แผง DevTools ทั่วไปไม่แสดงได้ง่ายขึ้น
มันแสดงจุดร้อนด้านประสิทธิภาพและชี้ไปที่การปรับแต่งที่ชัดเจน
เครื่องมือจะตรวจจับคอขวดในการดำเนินการและแนบคำแนะนำการปรับแต่งไปยังเส้นทางการเรียกที่มีปัญหา และมันจะทำเครื่องหมายการสมัครสมาชิกที่ยังไม่ปิดซึ่งบ่งชี้ถึงการรั่วไหลของหน่วยความจำ ข้อมูลประสิทธิภาพจะปรากฏในระหว่างการทำงาน ซึ่งสนับสนุนการวินิจฉัยปัญหาในภายใต้ภาระที่สมจริงแทนที่จะเป็นเพียงในเส้นทางสังเคราะห์ เนื่องจาก ngLens ทำงานภายใน DevTools โดยไม่มีแบ็คเอนด์ การติดตั้งจึงเกิดขึ้นทันทีและไม่ต้องการการพึ่งพาเซิร์ฟเวอร์ภายนอกสำหรับการโปรไฟล์
การวิเคราะห์ทั้งหมดทำงานในเครื่องและสามารถตรวจสอบหน้าโปรดักชันได้
ngLens ทำการติดตั้งและวิเคราะห์ภายในเบราว์เซอร์ดังนั้นข้อมูลจึงไม่ออกจากเครื่อง ซึ่งสะท้อนถึงการออกแบบที่มุ่งเน้นความเป็นส่วนตัว ส่วนขยายนี้ใช้การอนุมานคุณสมบัติ DOM เพื่อค้นหาแอป Angular แม้ว่าอุปกรณ์ดีบักมาตรฐานจะขาดหายไป ทำให้สามารถตรวจสอบในเว็บไซต์โปรดักชันได้ การเข้าถึงผ่านแท็บ ngLens ภายใน Chrome Developer Tools และแพ็คเกจนี้จัดจำหน่ายเป็นส่วนขยาย Chrome ที่เข้ากันได้กับเบราว์เซอร์ที่ใช้ Chromium
มันมุ่งเป้าไปที่ผู้เชี่ยวชาญ Angular และรวมเข้ากับเครื่องมือพัฒนา
ngLens ถูกออกแบบมาสำหรับนักพัฒนาฝั่งหน้าและวิศวกรด้านประสิทธิภาพที่ทำงานในโค้ด Angular; มันรองรับการเผยแพร่ Angular ที่หลากหลายและเสนอการดีบักหลายแอปสำหรับไมโครฟรอนเทนส์ โครงการนี้เป็นโอเพนซอร์สภายใต้ใบอนุญาต MIT และดูแลโดย Gowtham ดังนั้นทีมสามารถตรวจสอบแหล่งที่มาได้ เมื่อเปรียบเทียบกับแผงตรวจสอบทั่วไป ส่วนขยายนี้ทำหน้าที่เป็นโปรไฟเลอร์ระดับแอปพลิเคชันที่มุ่งเน้นการติดตามสาเหตุแทนที่จะเป็นการตรวจสอบ DOM อย่างกว้างขวาง
ngLens เป็นทางเลือกที่มุ่งเน้นสำหรับงานด้านประสิทธิภาพของ Angular
ngLens เหมาะสำหรับนักพัฒนาและวิศวกรด้านประสิทธิภาพที่มุ่งเน้นไปที่แอป Angular โดยมีความลึกซึ้งที่ตรงกับการทำงานเฉพาะทาง ข้อแลกเปลี่ยนคือขอบเขตที่แคบซึ่งจำกัดคุณค่าสำหรับทีมที่ใช้หลายเฟรมเวิร์ก นอกจากนี้ยังคาดหวังความคุ้นเคยกับ Chrome Developer Tools ซึ่งเพิ่มอุปสรรคในการเข้าถึงสำหรับผู้ที่ทำการดีบักแบบไม่เป็นทางการ กำหนดตารางการทำโปรไฟล์ที่มุ่งเน้นและรวมผลการค้นพบเข้ากับการตรวจสอบประสิทธิภาพเพื่อจัดลำดับความสำคัญในการแก้ไขอย่างมีประสิทธิภาพ.
