การรีสกรีน: การจับภาพด้านข้างที่ตอบสนองสำหรับนักออกแบบเว็บ
Rescreen - การจับภาพหน้าจอ Breakpoints จาก João Telo เป็นส่วนขยายของ Chrome สำหรับการบันทึกเลย์เอาต์เว็บที่ตอบสนองและผลิตภาพหน้าจอที่พร้อมสำหรับการออกแบบ มันช่วยให้นักออกแบบและนักพัฒนาจับภาพการแสดงผลของหน้าในช่วงต่างๆ ตรวจสอบคุณสมบัติทางภาพ และสร้างสินทรัพย์ที่เหมาะสมสำหรับการส่งต่อ ส่วนขยายนี้มุ่งเน้นไปที่การจับภาพที่ตอบสนองและการตรวจสอบในเบราว์เซอร์ Rescreen มุ่งเป้าไปที่นักออกแบบเว็บ นักพัฒนาส่วนติดต่อผู้ใช้ และผู้ทดสอบ QA ที่ต้องการข้อกำหนดทางภาพที่แม่นยำและสิ่งที่ส่งต่อที่ชัดเจน.
สิ่งที่ส่วนขยายทำและใครได้รับประโยชน์
Rescreen วางเครื่องมือการจับภาพและการตรวจสอบภายในกระบวนการทำงานของเบราว์เซอร์และมุ่งเน้นไปที่เอกสารที่ตอบสนอง ส่วนขยายนี้มีฟีเจอร์ Pro ที่เสนอการจับภาพหลายจุดแตกต่างด้วยการคลิกเพียงครั้งเดียว (Desktop, Tablet, Mobile) รวมถึงผู้ตรวจสอบที่ขับเคลื่อนด้วยการเลื่อนห้าตัวที่เปิดเผยการพิมพ์, สี, การเว้นระยะ, รูปภาพ, และข้อความ โหมดการจับภาพรวมถึงองค์ประกอบ, พื้นที่, หน้าจอที่มองเห็นได้, และภาพหน้าจอแบบเต็มหน้า ซึ่งให้ทีมเข้าถึงภาพระดับพิกเซลโดยตรงสำหรับการตรวจสอบและการระบุสเปค
มันจัดการกับหน้าขนาดใหญ่และการทดสอบที่ตอบสนองอย่างไร
Rescreen จัดการกับหน้าที่ยาวและการทำงานที่ตอบสนองโดยไม่ต้องส่งทรัพย์สินไปยังเซิร์ฟเวอร์ภายนอก มันบันทึกวิดีโอการเลื่อนหน้าเต็มด้วยความเร็วที่ปรับได้และสามารถจัดเรียงผลลัพธ์หลายจุดแตกต่างโดยอัตโนมัติไปยังแท็บเฉพาะ ตัวเลือกการส่งออกแบ่งการจับภาพขนาดใหญ่เป็นบล็อกความละเอียดเต็มเพื่อให้ภาพหน้าจอขนาดใหญ่พอดีกับขีดจำกัดของ Figma หรือ Miro ลดการตัดแต่งด้วยมือและงานส่งออกระหว่างการเตรียมการส่งมอบ
มันจัดการกับความเป็นส่วนตัว, การส่งออก, และความเหมาะสมของกระบวนการทำงานอย่างไร
ส่วนขยายทำงานทั้งหมดบนเครื่องของผู้ใช้และไม่ต้องการบัญชี ดังนั้นภาพหน้าจอและข้อมูลจึงอยู่ในเครื่อง รองรับการส่งออกรูปภาพคือ PNG, WebP, JPG, และ PDF และการส่งออกรูปแบบวิดีโอคือ MP4 และ WebM Rescreen ทำงานบน Chrome และเบราว์เซอร์ที่ใช้ Chromium อื่น ๆ และต้องการฟังก์ชันการทำงานของแผงด้านข้างของเบราว์เซอร์เพื่อทำงาน ซึ่งกำหนดว่ามันสามารถนำไปใช้ในสภาพแวดล้อมของทีมได้ที่ไหน
ใครควรเลือก Rescreen และเคล็ดลับที่เป็นประโยชน์
Rescreen เป็นตัวเลือกที่เหมาะสมสำหรับนักออกแบบและทีม QA ที่ต้องการเอกสารภาพที่พร้อมส่งมอบซึ่งผลิตภายในเบราว์เซอร์ การดำเนินการในท้องถิ่นช่วยสนับสนุนการทำงานที่คำนึงถึงความเป็นส่วนตัวและลดการประมวลผลหลังการทำด้วยมือ เคล็ดลับที่เป็นประโยชน์: กด Caps Lock เพื่อเปิดเผยสถานะ hover ที่แท้จริงก่อนที่จะจับภาพและใช้ปลั๊กอิน Figma ที่เป็นคู่มือเพื่อนำเข้าการจับภาพที่ถูกตัดเป็นเฟรมที่มีป้ายกำกับเพื่อการส่งมอบที่รวดเร็วระหว่างการพัฒนาและการออกแบบ.
