ตรวจสอบและแก้ไขสถานะของคอมโพเนนต์ Angular ภายใน DevTools
Angular state inspector ซึ่งพัฒนาโดย Anton Lunev เป็นส่วนขยายของเบราว์เซอร์ Firefox ที่เปิดเผยข้อมูลภายในของแอปพลิเคชัน Angular สำหรับการดีบักและการตรวจสอบ แอปพลิเคชันจะแสดงคุณสมบัติของคอมโพเนนต์ ร้านจัดการสถานะ และต้นไม้ของคอมโพเนนต์ภายในเครื่องมือพัฒนาเบราว์เซอร์ เพื่อให้นักพัฒนาสามารถตรวจสอบและแก้ไขสถานะแบบเรียลไทม์ รองรับ NgRx, NGXS และ Akita จัดการ AngularJS ผ่าน Angular รุ่นใหม่ในแอปพลิเคชันไฮบริด และรวมเข้ากับคอนโซล ตั้งใจสำหรับนักพัฒนา Angular ที่ดีบักสถานะที่ซับซ้อนและการโยกย้าย.
Angular state inspector ใช้ทำอะไร?
เครื่องมือนี้รวมเข้ากับเครื่องมือพัฒนาในเบราว์เซอร์และเปิดเผยข้อมูลในระดับคอมโพเนนต์ ทำให้สามารถ ตรวจสอบแบบเรียลไทม์และแก้ไขในที่ ของคุณสมบัติของคอมโพเนนต์และสถานะของร้านค้า มันแสดงต้นไม้ของคอมโพเนนต์และให้ผู้พัฒนาสามารถเลือกองค์ประกอบเพื่อดูข้อมูลที่เกี่ยวข้อง และมันเปิดเผยคอมโพเนนต์ที่เลือกไปยังคอนโซลผ่านตัวแปรทั่วโลก เช่น $scope หรือ $ctrl งานการดีบักทั่วไปประกอบด้วย:
- ติดตามการไหลของข้อมูลระหว่างคอมโพเนนต์
- แก้ไขคุณสมบัติเพื่อสังเกตการเปลี่ยนแปลง UI ทันที
มันรองรับภาษาโปรแกรมและไลบรารีสถานะอะไรบ้าง?
มุ่งเป้าไปที่ระบบนิเวศของ Angular แอปนี้รองรับ AngularJS รุ่นเก่าอย่างชัดเจน รวมถึง Angular 2 และการเปิดตัว Angular ถัดไป ดังนั้นทีมที่ดูแลโค้ดเก่าหรือโมดูลที่ย้ายไปสามารถใช้ inspector เดียวกันได้ มันให้การรวมโดยตรงกับไลบรารีการจัดการสถานะ โดยเฉพาะ NgRx, NGXS, และ Akita ดังนั้นนักพัฒนาสามารถตรวจสอบภาพถ่ายของร้านค้าเคียงข้างสถานะของคอมโพเนนต์โดยไม่ต้องติดตั้งเครื่องมือแยกต่างหากสำหรับแต่ละรูปแบบ
มันเหมาะสำหรับนักพัฒนาที่ทำงานในโครงการ Angular ที่ซับซ้อนหรือไฮบริดหรือไม่?
ส่วนขยายนี้มุ่งเป้าไปที่นักพัฒนาเว็บและวิศวกรซอฟต์แวร์ที่มุ่งเน้นการย้าย Angular และการดีบักสถานะ; มันรองรับการตั้งค่า AngularJS-plus-modern แบบไฮบริดและมีให้สำหรับ Firefox และเบราว์เซอร์ที่ใช้ Chromium โครงการนี้เป็นโอเพนซอร์สบน GitHub และดูแลโดย Anton Lunev และการตอบรับจากชุมชนเป็นไปในเชิงบวก การรวมกันนั้นทำให้เครื่องมือนี้เหมาะสำหรับทีมที่ยอมรับการทำงานแบบขยายและชอบแหล่งที่มาที่มองเห็นได้และการอภิปรายในชุมชน.
ทางเลือกที่เหมาะสมสำหรับวิศวกร Angular โดยมีการแลกเปลี่ยนในการบำรุงรักษา
เครื่องมือนี้เหมาะสำหรับนักพัฒนารายบุคคลและทีมขนาดเล็กที่พึ่งพาการดีบักในเบราว์เซอร์และยูทิลิตี้ที่ดูแลโดยชุมชน เนื่องจากเป็นส่วนขยายโอเพนซอร์สที่ดูแลโดยนักพัฒนาที่เป็นอิสระเพียงคนเดียว ทีมองค์กรที่ต้องการตารางการอัปเดตที่รับประกันหรือการสนับสนุนอย่างเป็นทางการควรถือว่ามันเป็นเครื่องมือช่วยในการตรวจสอบมากกว่าการพึ่งพาหลัก ตรวจสอบส่วนขยายในบิลด์ staging และตรวจสอบที่เก็บโครงการก่อนที่จะรวมเข้ากับกระบวนการดีบักมาตรฐาน.
ข้อดี
- การตรวจสอบแบบเรียลไทม์และการแก้ไขในที่ของคุณสมบัติของส่วนประกอบ
- รองรับ NgRx, NGXS และ Akita stores
- จัดการแอปพลิเคชัน AngularJS แบบไฮบริดและ Angular สมัยใหม่
- การรวมคอนโซลเปิดเผยส่วนประกอบที่เลือกผ่าน $scope หรือ $ctrl
ข้อเสีย
- ดูแลโดยนักพัฒนาที่เป็นอิสระเพียงคนเดียว ซึ่งอาจส่งผลต่อการสนับสนุน
- ต้องการการทำงานที่ใช้ DevTools; ไม่มีแอปพลิเคชันตรวจสอบแบบสแตนด์อโลน
