CRX id
pmkbdhlmjbnmmpeecekhplejmlmeapog
pmkbdhlmjbnmmpeecekhplejmlmeapog
Description from extension meta
วัดระยะทางและตารางที่สมบูรณ์แบบแบบพิกเซลบนเว็บเพจใดๆ
Image from store
Description from store
ความแม่นยำของพิกเซลคือฮีโร่ที่เงียบๆ ของการออกแบบที่ยอดเยี่ยม การจัดตำแหน่งพิกเซลเดียวที่ไม่ถูกต้องอาจทำให้จังหวะของตารางขาดหายไป ทำให้ข้อความดูไม่ตรงกลาง หรือทำให้ส่วนประกอบทั้งหมดดู "เกือบถูกต้อง" แต่ไม่ค่อยดี Grid Ruler Lite มอบชุดเครื่องมือวัดในเบราว์เซอร์ให้กับนักพัฒนาฝั่งฟรอนต์เอนด์ นักออกแบบ UI/UX ผู้ทดสอบ QA และใครก็ตามที่ใส่ใจเรื่องการขัดเกลาภาพทันที ไม่ต้องมีซอฟต์แวร์ออกแบบที่หนักหน่วง ไม่ต้องมีแผง DevTools ที่ยุ่งเหยิง และไม่มีภาพหน้าจอที่สับเปลี่ยนไปใช้แอปภายนอก ด้วยการคลิกเพียงครั้งเดียว ส่วนขยายจะซ้อนไม้บรรทัดที่ปรับขนาดได้ เส้นบอกแนวที่แนบกับตาราง และตารางฐานเสริมไว้ด้านบนของหน้าเว็บใดๆ เพื่อให้คุณตรวจสอบระยะห่าง ตรวจสอบตาราง 8 จุด และบันทึกหลักฐานของข้อบกพร่องของเค้าโครงได้ภายในไม่กี่วินาที
อะไรที่ทำให้ Grid Ruler Lite โดดเด่น?
เปิดใช้งานด้วยคลิกเดียว ยกเลิกด้วยคลิกเดียว
คลิกไอคอนแถบเครื่องมือ (หรือเรียกใช้ทางลัดที่คุณตั้งค่าไว้ในการตั้งค่าแป้นพิมพ์ของเบราว์เซอร์) และส่วนขยายจะแทรกข้อมูลน้ำหนักเบา<canvas> โอเวอร์เลย์ที่ห่อหุ้มอยู่ใน Shadow-DOM ของตัวเอง CSS ของเพจของคุณไม่สามารถรบกวนได้ และโอเวอร์เลย์จะไม่เปลี่ยนแปลงโครงสร้าง DOM ที่คุณกำลังทดสอบ คลิกอีกครั้ง แล้วไกด์ ตาราง และป้ายกำกับทั้งหมดจะหายไป ไม่มีการโหลดเพจซ้ำ ไม่มีตัวรับฟังเหตุการณ์ค้างอยู่
เหตุใดคุณจึงต้องการมันอยู่ในชุดเครื่องมือของคุณ
ประหยัดเวลา: การวัดระยะห่างใน DevTools จำเป็นต้องเจาะลึกลงไปในกล่องที่ซ้อนกันและเพิ่มค่าขอบและระยะขอบในใจ Grid Ruler Lite จะแสดงระยะทางให้เห็นได้ด้วยการลากเพียงครั้งเดียว
ลดจุดบกพร่อง: ตรวจจับการถดถอยของระยะห่างเล็กๆ น้อยๆ ก่อนที่จะถึงขั้นตอนการผลิต หรือแย่กว่านั้นคือ การผลิต โดยเฉพาะในจุดพักการตอบสนองที่ QA ไม่ได้ให้ความสำคัญเสมอไป
ปรับปรุงการทำงานร่วมกัน: นักออกแบบสามารถซ้อนตาราง 8 จุดโดยตรงบนรุ่นที่ปรับใช้และแชร์ภาพหน้าจอ ช่วยให้นักพัฒนาได้รับข้อมูลตอบรับพิกเซลที่แม่นยำโดยไม่ต้องมีความคิดเห็นจาก Figma
มีสมาธิ: ไม่ต้องกด Alt-Tab ใน Photoshop หรือเปิดไฟล์ Sketch เพียงเพื่อวัดปุ่ม ทุกอย่างเกิดขึ้นบนหน้าสดตามที่ผู้ใช้ปลายทางเห็น
ให้ความรู้และจัดทำเอกสาร: ผู้จัดการผลิตภัณฑ์และนักเขียนด้านเทคนิคสามารถสาธิตพฤติกรรมของเค้าโครงด้วยภาพหน้าจอไม้บรรทัด ทำให้เอกสารข้อมูลจำเพาะชัดเจนขึ้นสำหรับผู้มีส่วนได้ส่วนเสียทุกคน
กลุ่มผู้ใช้เป้าหมาย
กลุ่มผู้ใช้งาน
นักพัฒนาฝั่งฟรอนต์เอนด์
จำเป็นต้องตรวจสอบระยะห่าง CSS ช่องว่างของ flexbox และการจัดตำแหน่งส่วนประกอบข้ามจุดพัก ลากไม้บรรทัด แนบไปที่ขอบ ล็อกไกด์ ส่งออกภาพหน้าจอสำหรับการตรวจสอบ PR
นักออกแบบ UI/UX
ต้องยืนยันว่าการพัฒนานั้นเคารพระบบการออกแบบ 8 จุดหรือ 10 จุด ซ้อนทับกริดพื้นฐาน วัดการเติมช่องว่าง แชร์ PNG ที่มีคำอธิบายประกอบ
ผู้ทดสอบ QA
รายงานข้อบกพร่องที่สมบูรณ์แบบแบบพิกเซลพร้อมหลักฐานที่ชัดเจน
การวัดอย่างรวดเร็วและการจับภาพหน้าจอด้วยปุ่มเดียวจะถูกส่งไปยังตัวติดตามข้อบกพร่องโดยตรง
บรรณาธิการเนื้อหาและ PM
ตรวจสอบการห่อหัวเรื่อง ระยะห่างของช่องโฆษณา และเค้าโครงการ์ดบนเพจที่ขับเคลื่อนด้วย CMS การวางซ้อนที่ไม่เกี่ยวกับเทคนิคช่วยหลีกเลี่ยงความซับซ้อนของ DevTools
นักการศึกษาและนักเรียน
สอนหลักการออกแบบ ทฤษฎีกริด และเค้าโครงแบบตอบสนองแบบเรียลไทม์ในเบราว์เซอร์ สาธิตภาพแบบเรียลไทม์โดยไม่ต้องใช้เครื่องมือภายนอก