Hotwire Inspector: ส่วนขยาย DevTools สำหรับการดีบัก Hotwire
Hotwire Inspector โดย Radan Skorić เป็นส่วนขยาย Chrome DevTools สำหรับนักพัฒนาที่ทำงานกับ frontends ที่ใช้ Hotwire มันแสดงภาพการโต้ตอบของ Hotwire และช่วยในการดีบักตัวควบคุม Stimulus และโครงสร้าง Turbo ภายในเบราว์เซอร์ ลดการพึ่งพา console logs เครื่องมือนี้แสดงสถานะของตัวควบคุม เน้นเป้าหมายของตัวควบคุมใน DOM และนำเสนอการดูโครงสร้างของหน้าในรูปแบบต้นไม้ นักพัฒนาเว็บที่ใช้ Hotwire ใน Rails หรือโปรเจ็กต์ที่เรนเดอร์จากเซิร์ฟเวอร์อื่น ๆ จะได้รับข้อมูลเชิงลึกที่รวดเร็วขึ้นเกี่ยวกับความสัมพันธ์ของส่วนประกอบและสถานะการทำงาน มันรวมเข้ากับการทำงานของ DevTools สำหรับการตรวจสอบโดยตรงระหว่างการพัฒนา.
เครื่องมือทำให้สถานะมองเห็นได้อย่างไรในระหว่างการนำทางและการเปลี่ยนแปลง DOM
Hotwire Inspector อัปเดตมุมมองโดยอัตโนมัติเมื่อหน้าเว็บนำทางหรือ DOM เปลี่ยนแปลง และจะแสดง ค่าของ Stimulus ที่อัปเดตแบบสด เพื่อให้นักพัฒนาสามารถสังเกตการเปลี่ยนแปลงสถานะโดยไม่ต้องบันทึกด้วยตนเอง ในทางปฏิบัติหมายความว่าพาเนลจะแสดงการเปลี่ยนแปลงในระหว่างการทำงานเมื่อเกิดขึ้น งานของนักพัฒนาที่เป็นปกติที่ได้รับประโยชน์รวมถึงการติดตามการเปลี่ยนแปลงค่าของตัวควบคุมระหว่างการโต้ตอบของผู้ใช้และการยืนยันว่าองค์ประกอบใดได้รับการอัปเดตแบบไดนามิก
วิธีเข้าถึงส่วนขยายและสิทธิ์ที่ต้องการ
หลังจากการติดตั้งแอปจะเพิ่มแท็บเฉพาะในเครื่องมือพัฒนาของเบราว์เซอร์; เปิด DevTools และเลือกแท็บ Hotwire เพื่อเริ่มการตรวจสอบ ส่วนขยายต้องการสิทธิ์ในการเข้าถึงแท็บและเครื่องมือพัฒนาเพื่อแมพตัวควบคุมไปยังองค์ประกอบของหน้า มันสามารถใช้ได้กับเบราว์เซอร์ที่ใช้ Chromium ดังนั้นเวิร์กโฟลว์เดียวกันจึงทำงานในเบราว์เซอร์ที่สร้างจากเอนจิน Chromium ตราบใดที่การเข้าถึง DevTools ได้รับอนุญาต
ใครได้รับประโยชน์และทำไมโมเดลโอเพนซอร์สจึงสำคัญ
เครื่องมือมุ่งเป้าไปที่นักพัฒนาเว็บที่ใช้วิธี Hotwire ใน Rails หรือเฟรมเวิร์กฝั่งเซิร์ฟเวอร์ที่คล้ายกัน โดยเสนอการวินิจฉัยที่มุ่งเน้นสำหรับหน้าเว็บที่ขับเคลื่อนด้วยส่วนประกอบ นักพัฒนารักษาโครงการภายใต้ MIT License และส่วนขยายได้รับการยอมรับในชุมชน Hotwire สำหรับการชี้แจงความสัมพันธ์ของตัวควบคุม เนื่องจากโครงการตั้งใจหลีกเลี่ยงการเพิ่มเติมที่ไม่จำเป็น มันจึงมุ่งเน้นไปที่การดีบัก Hotwire อย่างแคบแทนที่จะเป็นการตรวจสอบส่วนหน้าแบบทั่วไป
ตัวเลือกการดีบักที่มุ่งเน้นสำหรับนักพัฒนาที่ใช้ Hotwire โดยมีขอบเขตแคบ
Hotwire Inspector เป็นตัวเลือกที่ใช้งานได้จริงสำหรับนักพัฒนาที่สร้างด้วย Hotwire และต้องการการมองเห็นที่รวดเร็วในบริบทของ UI ที่ขับเคลื่อนด้วยคอนโทรลเลอร์; ขอบเขตแคบของมันหมายความว่ามันเพิ่มคุณค่าน้อยลงสำหรับโครงการด้านหน้าโดยทั่วไป ใช้มันเป็นเครื่องมือเฉพาะสถานการณ์ร่วมกับการบันทึกและเวิร์กโฟลว์โปรไฟล์ที่มีอยู่เพื่อทำให้วงจรการดีบักสั้นลงโดยไม่ทำให้แผงเครื่องมือหลักของนักพัฒนาหนักเกินไป.
