ทำไมนักพัฒนาถึงรัก Astro

ในปี 2022 Astroได้รับการโหวตให้เป็น เฟรมเวิร์กการเรนเดอร์ ที่นักพัฒนา Javascript ชื่นชอบมากที่สุด

สิ่งที่ทำให้ Astro น่ารักคือมันใช้สถาปัตยกรรมแบบ “เกาะ”ซึ่งมีส่วนประกอบ UI แบบรีแอคทีฟ (“Astro Islands”) อยู่ในหน้า HTML แบบคงที่

ซึ่งหมายความว่า Astro จัดส่ง JS ไปยังเบราว์เซอร์น้อยลง ทำให้โหลดหน้าเว็บได้เร็วกว่าเฟรมเวิร์กการเรนเดอร์ของคู่แข่งอย่าง Next.js หรือ Gatsby

นอกจากนี้ยังหมายความว่านักพัฒนาสามารถใช้เฟรมเวิร์กส่วนหน้าที่พวกเขาเลือก (เช่น React, Svelte หรือ Vue) เพื่อสร้าง Astro Islands ของพวกเขา ทำให้นักพัฒนาสามารถดึงเอาไลบรารีที่จัดตั้งขึ้นเพื่อสร้างเว็บไซต์ Astro ในขณะที่ยังคง เพลิดเพลินกับความเร็วของการเรนเดอร์ฝั่งเซิร์ฟเวอร์ของ Astro

อย่างไรก็ตาม เนื่องจากสถาปัตยกรรมแบบหมู่เกาะของ Astro นั้นมีการปฏิวัติอย่างมาก เครื่องมือสำหรับนักพัฒนาที่มีอยู่จึงไม่สามารถให้ข้อมูลแก่นักพัฒนา Astro ที่ต้องการสร้างเว็บไซต์ที่ยอดเยี่ยมได้

กล่าวอีกนัยหนึ่ง สิ่งที่ทำให้ Astro เป็นที่ชื่นชอบ — ความจริงที่ว่ามันจัดส่งเฉพาะ JS ที่จำเป็นภายในขอบเขตของ HTML แบบคงที่ — เป็นสิ่งเดียวกับที่ทำให้มันเข้ากันไม่ได้กับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่มีอยู่

เราสร้างAstroSpectเพื่อแก้ปัญหานี้

ขาดเครื่องมือสำหรับนักพัฒนา

ปัจจุบันไม่มีเครื่องมือสำหรับนักพัฒนา Chrome ที่ออกแบบมาสำหรับ Astro โดยเฉพาะ ที่แย่ไปกว่านั้น เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่มีอยู่อาจบดบังหรือไม่ให้ข้อมูลที่นักพัฒนาต้องการมากที่สุด

นี่คือตัวอย่าง

สมมติว่าเรากำลังสร้างเว็บไซต์ Astro ที่มี Astro Island สองเกาะ อันหนึ่งมีส่วนประกอบ React ส่วนอีกอันมีส่วนประกอบ Svelte

ตอนนี้ สมมติว่าเราต้องการทราบอุปกรณ์ประกอบฉากสำหรับเกาะ Astro แต่ละเกาะ รวมถึงคำสั่งไคลเอ็นต์ (เช่น เมื่อใดหรืออย่างไรที่องค์ประกอบจะแสดงผลฝั่งไคลเอ็นต์)

เราจะรับข้อมูลนี้ในเบราว์เซอร์ได้อย่างไร

เราสามารถตรวจสอบหน้าโดยใช้แผงองค์ประกอบ Chrome DevTools เอง นี่คือสิ่งที่จะมีลักษณะ:

แม้ว่าสิ่งนี้จะแสดงให้เห็นว่ามีองค์ประกอบของ Astro Island แต่มีปัญหาสองประการที่นี่

ประการแรก ไม่มีความแตกต่างที่ชัดเจนระหว่างองค์ประกอบ HTML แบบคงที่และ Astro Islands ถ้าเราต้องการค้นหา Astro Islands เราต้องเปิด DOM tree หรือค้นหาแท็ก HTML 'astro-island'

ประการที่สอง ข้อมูลที่เราต้องการ เช่น อุปกรณ์ประกอบฉากหรือคำสั่งไคลเอนต์ ถูกบดบังภายในสตริงที่ยังไม่ได้ประมวลผลภายในแอตทริบิวต์ขององค์ประกอบ

ต่อไป เนื่องจากเราใช้ React และ Svelte เพื่อสร้างเกาะ Astro เราอาจลองใช้เครื่องมือสำหรับนักพัฒนา React หรือ Svelte นี่คือลักษณะของเครื่องมือสำหรับนักพัฒนา React:

ขอให้สังเกตว่าเราได้รับข้อมูลบางอย่างเกี่ยวกับ Astro Island ที่สร้างด้วย React เช่น อุปกรณ์ประกอบฉาก แต่เราไม่ได้รับข้อมูลเกี่ยวกับคำสั่งของลูกค้า และเราไม่สามารถเห็นองค์ประกอบนี้ในบริบทของทั้งไซต์

ดังนั้น นักพัฒนา Astro จึงถูกบังคับให้เลือกระหว่างสองตัวเลือกที่ไม่น่าพอใจ: ค้นหาผ่านแผนผัง DOM และถอดรหัสสตริงที่ยังไม่ได้ประมวลผล หรือพลาดบริบทของส่วนประกอบไฮเดรตภายในแอปพลิเคชัน

AstroSpect ทำให้ตัวเลือกนี้กลายเป็นอดีตไปแล้ว

เข้าสู่ AstroSpect

AstroSpect เป็นส่วนขยายของ Chrome DevTools ที่ช่วยให้นักพัฒนาตรวจสอบเว็บไซต์ที่สร้างด้วย Astro ให้ข้อมูลที่คุณต้องการในการสร้างได้เร็วยิ่งขึ้น

เริ่มใช้ AstroSpect ได้ง่ายๆ เพียงดาวน์โหลดส่วนขยายจาก Chrome Store คลิกขวาและ "ตรวจสอบ" เว็บไซต์ แล้วไปที่แผง "AstroSpect" ใน Chrome DevTools

ต่อไปนี้เป็นเหตุผลบางประการที่นักพัฒนาซอฟต์แวร์จะรัก AstroSpect:

มุมมององค์ประกอบทั้งหมด

คลิกแท็บ “องค์ประกอบทั้งหมด” เพื่อดูแผนผัง DOM แบบเต็ม โดยมี Astro Islands และลูกของเกาะที่โดดเด่น:

หมู่เกาะเท่านั้นดู

คลิกแท็บ “หมู่เกาะเท่านั้น” เพื่อแยกเกาะ Astro เพื่อตรวจสอบ:

บานหน้าต่างด้านข้าง

คลิกที่องค์ประกอบในมุมมองใดมุมมองหนึ่งเพื่อแสดงรายละเอียดในบานหน้าต่างด้านข้าง:

• ประเภท:ระบุว่าองค์ประกอบที่คลิกนั้นเป็น Static HTML หรือ Astro Island
• คำสั่งลูกค้า:แสดงคำสั่งลูกค้า (เช่น 'โหลด', 'ไม่ได้ใช้งาน', 'มองเห็นได้') สำหรับ Astro Islands
• อุปกรณ์ประกอบฉาก:แสดงอุปกรณ์ประกอบฉากสำหรับเกาะแอสโตรเท่านั้น อุปกรณ์ประกอบฉากที่ซ้อนกันจะแสดงในรายการแบบเลื่อนลง

ฟังก์ชั่นการค้นหา

ใช้แถบค้นหาเพื่อค้นหาสิ่งที่คุณต้องการในมุมมองใดมุมมองหนึ่ง

คุณยังสามารถขยายและยุบทรีแบบเต็มในโหมดการดู

AstroSpect เข้ากันได้กับเบราว์เซอร์ Chromium ทั้งหมด

สำหรับข้อมูล เพิ่มเติมโปรดดูที่GitHubหรือเยี่ยมชมเว็บไซต์ ของเรา