ตรวจสอบ Blazor components และ services จากภายใน Chrome DevTools
Blazor Dev Tools ซึ่งสร้างโดย Alex Howard เป็นส่วนขยายของ Chrome ที่ช่วยให้นักพัฒนาสามารถดีบักแอปพลิเคชัน ASP.NET Core Blazor ในระหว่างการพัฒนา มันเพิ่มแผงการตรวจสอบไปยัง DevTools ของเบราว์เซอร์เพื่อแสดงความสัมพันธ์ของคอมโพเนนต์และข้อมูลระหว่างการทำงานโดยไม่ต้องพึ่งพาการบันทึกในคอนโซล ส่วนขยายนี้ตรวจจับโฮสต์ Server และ WebAssembly และต้องการการรวมระบบขนาดเล็กผ่านแพ็คเกจ NuGet กลุ่มเป้าหมายคือ นักพัฒนาที่ใช้ Blazor ซึ่งชอบการดีบักที่มีการมองเห็นและรับรู้ระหว่างการทำงานในขณะที่เขียนโค้ดในเครื่องท้องถิ่น.
เครื่องมือเปิดเผยส่วนประกอบภายในแบบเรียลไทม์อย่างไร
ส่วนขยายให้กระบวนการตรวจสอบแบบภาพ ที่ย้ายการดีบักออกจากบันทึกคอนโซลและเข้าสู่แผง DevTools ที่เฉพาะเจาะจง ภายในแผงนั้นคุณสามารถดูต้นไม้ส่วนประกอบแบบเรียลไทม์และตรวจสอบค่าพารามิเตอร์ พารามิเตอร์ที่เรียงลำดับ ชนิดที่ประกาศ และสถานะภายในสำหรับโหนดที่เลือก ตัวเลือกองค์ประกอบเชื่อมโยงองค์ประกอบ DOM กับรายการส่วนประกอบของพวกเขา ช่วยให้คุณติดตามเส้นทางการเรนเดอร์และการเปลี่ยนแปลงสถานะขณะโต้ตอบกับหน้าเว็บ
สิ่งที่คุณต้องติดตั้งและที่มันปรากฏ
การติดตั้งมีสองส่วน: เพิ่มส่วนขยาย Chrome และรวมแพ็คเกจ NuGet ในโปรเจกต์ Blazor จากนั้นลงทะเบียนบริการใน Program.cs หลังจากตั้งค่าแล้ว ตัวตรวจสอบจะปรากฏเป็นแท็บ 'Blazor' ใน DevTools (เปิดด้วย F12 หรือ Inspect) เครื่องมือจะตรวจจับโฮสติ้ง Server หรือ WebAssembly โดยอัตโนมัติ ดังนั้นกระบวนการตรวจสอบเดียวกันจึงทำงานได้ทั้งสองโมเดลโฮสติ้ง
มันจัดการการผลิตและความปลอดภัยอย่างไร
ความปลอดภัยถูกสร้างเข้าไปในการควบคุมการทำงาน เครื่องมือจะปิดตัวเองนอกโหมดการพัฒนา ป้องกันไม่ให้เปิดเผยข้อมูลเมตาของส่วนประกอบในเว็บไซต์การผลิต การควบคุมอัตโนมัตินั้นหมายความว่าโปรเจกต์จะไม่ให้บริการการเชื่อมต่อที่จำเป็นสำหรับการตรวจสอบหลังจากการปรับใช้ โดยรักษาพารามิเตอร์ของส่วนประกอบและการจัดเรียงบริการให้ออกจากการสร้างสาธารณะในขณะที่ยังคงการวินิจฉัยในท้องถิ่นและการจัดเตรียม
ใครได้รับประโยชน์และมันเปลี่ยนแปลงกระบวนการดีบักอย่างไร
มันเหมาะสำหรับนักพัฒนาที่ย้ายจาก JavaScript devtools ไปยัง .NET แผงนี้เสนอการไหลของการตรวจสอบที่คล้ายกับ React ซึ่งลดความจำเป็นในการแมพ HTML ไปยังไฟล์ .razor ด้วยตนเอง ผู้ดู DI แสดงบริการที่ส่วนประกอบแก้ไข ซึ่งช่วยเมื่อแก้ไขปัญหาพฤติกรรมที่ขึ้นอยู่กับบริการในโค้ดเบสขนาดกลางถึงขนาดใหญ่ ทีมที่ชอบการติดตามภาพมากกว่าการบันทึกแบบ ad-hoc จะได้รับประโยชน์จากการเพิ่มผลผลิตที่ชัดเจนที่สุด
เหมาะสมที่สุดสำหรับการทำงานที่ยอมรับการเปลี่ยนแปลงโครงการเล็กน้อย
เครื่องมือนี้เป็นตัวเลือกที่ใช้งานได้จริงสำหรับนักพัฒนา Blazor ที่ต้องการการมองเห็นในระหว่างการพัฒนาโดยตรง เครื่องมือนี้มีการแลกเปลี่ยนที่ต้องเพิ่มการเชื่อมต่อในระหว่างการทำงานเล็กน้อยในโครงการและยอมรับว่าตัวตรวจสอบจะไม่สามารถใช้งานได้หลังจากการปรับใช้ ดังนั้นจึงเหมาะกับทีมที่ให้ความสำคัญกับการวินิจฉัยปัญหาของส่วนประกอบที่รวดเร็วและมองเห็นได้ในขณะที่เขียนโค้ดในท้องถิ่นมากกว่าการตรวจสอบหลังการปรับใช้จากระยะไกล.
