Pixel Ruler

ใช้ Pixel Ruler วัดพิกเซลบนหน้าเว็บใดก็ได้: ไม้บรรทัดบนหน้าจอสำหรับขนาดองค์ประกอบและระยะห่าง

Pixel Ruler วางไม้บรรทัดไว้บนหน้าจอ ให้คุณวัดอะไรก็ได้ในเบราว์เซอร์ คลิกไอคอนบนแถบเครื่องมือ ลากเมาส์ผ่านเลย์เอาต์ แล้วอ่านระยะที่แม่นยำเป็นพิกเซล CSS เลื่อนเคอร์เซอร์ไปที่อิลิเมนต์ใดก็เห็นความกว้าง ความสูง padding และช่องไฟถึงบล็อกรอบข้าง ตัวเลขตรงกับ DevTools เพราะส่วนขยายอ่านพิกเซล CSS ชุดเดียวกับที่เบราว์เซอร์ใช้วาดหน้าเว็บ ไม่ต้องเปิดพาเนล ไม่ต้องส่งออกภาพหน้าจอ ไม่ต้องบวกลบเอง มีแค่ไม้บรรทัดหน้าจอวางทับเว็บที่คุณกำลังดูอยู่ เลเยอร์เดียว ไม่ต้องสลับไปมา: 📏 กดค้างแล้วลากเพื่อวัดระยะระหว่างจุดสองจุดใดก็ได้บนหน้าเว็บ 📏 ชี้ไปที่อิลิเมนต์เพื่อดูขนาด padding และระยะห่างถึงอิลิเมนต์ข้างเคียง 📏 วางเส้นไกด์แนวตั้งและแนวนอน แล้วจัดบล็อกให้ตรงตามเส้น มีไม้บรรทัดอยู่บนจอให้เทียบตลอดเวลา และปุ่มเดียวก็คัดลอกผลลัพธ์ไปยังคลิปบอร์ดพร้อม CSS selector ของอิลิเมนต์ใต้เคอร์เซอร์ เริ่มใช้งานใน 3 ขั้นตอน: 1. ติดตั้งส่วนขยายแล้วปักหมุดไว้บนแถบเครื่องมือ 2. เปิดหน้าเว็บที่กำลังทำอยู่แล้วคลิกไอคอน 3. ลาก ชี้ วัด — เสร็จแล้วกด Esc สองครั้ง นักพัฒนาฟรอนต์เอนด์ใช้ตรวจเลย์เอาต์เทียบกับแบบ นักออกแบบใช้เป็นไม้บรรทัดวัดหน้าเว็บเมื่อไฟล์ส่งงานเก่าไปแล้ว วิศวกร QA แจ้งบักด้วยตัวเลขจริงแทนคำว่า "ปุ่มดูต่ำไปนิดหนึ่ง" ใครก็ตามที่ต้องวัดพิกเซลบนเว็บจริงแบบเร็ว ๆ ก็ได้คำตอบในสองคลิก ไม้บรรทัดเว็บตัวนี้ให้อะไรบ้าง: - ระยะระหว่างจุดสองจุดใดก็ได้ เป็นพิกเซล - ความกว้างและความสูงของอิลิเมนต์ใดก็ได้บนหน้าเว็บ - padding, margin และช่องไฟระหว่างอิลิเมนต์ข้างเคียง - ระยะจากอิลิเมนต์หนึ่งไปยังบล็อกรอบ ๆ - สเกลตามขอบบนและขอบซ้ายของหน้าต่าง - แท็ก คลาส และ CSS selector ของอิลิเมนต์ที่วัด - เส้นไกด์ที่ใช้ซ้ำได้สำหรับตรวจการจัดแนว คุมด้วยคีย์บอร์ดเพื่อให้เคอร์เซอร์นิ่ง: → Shift ล็อกการวัดไว้กับแกนนอนหรือแกนตั้ง → ปุ่มลูกศรขยับจุดปัจจุบันทีละ 1 px พอดี → Esc ล้างการวัดปัจจุบัน กด Esc อีกครั้งเพื่อคืนหน้าเว็บให้ปกติ → ปุ่มลัดปุ่มเดียวคัดลอกผลลัพธ์ไปยังคลิปบอร์ด ติดตั้งครั้งเดียวก็ได้ไม้บรรทัดพิกเซลตัวเดียวกับที่ผู้ใช้ Windows, Linux และ ChromeOS ใช้ และเป็นไม้บรรทัดพิกเซลตัวเดียวกับที่ผู้ใช้ Mac ใช้ เพราะเครื่องมือนี้อยู่ในเบราว์เซอร์ ไม่ได้อยู่ในระบบปฏิบัติการ ไม่ต้องไปหาไฟล์ดาวน์โหลด ไม่มีตัวติดตั้ง ไม่ต้องใช้สิทธิ์ผู้ดูแลระบบ ส่วนขยายมาจาก Chrome Web Store ในคลิกเดียว ช่วงเปิดตัวนี้เป็นไม้บรรทัดพิกเซลฟรี ทุกฟีเจอร์เปิดให้ทุกคนใช้ แอปไม้บรรทัดหน้าจอที่เปิดเป็นหน้าต่างแยกจะวัดผิดทันทีที่หน้าเว็บเลื่อน ไม้บรรทัดพิกเซลตัวนี้ถูกวาดอยู่ในแท็บและเลื่อนไปพร้อมเนื้อหา นี่คือไม้บรรทัดพิกเซลออนไลน์ ใช้ได้กับหน้าเว็บจริง เซิร์ฟเวอร์ staging เว็บของลูกค้า หรือหน้าที่ต้องล็อกอิน ไม้บรรทัดพิกเซลบนเดสก์ท็อปที่วัดจากภาพนิ่งของหน้าต่างทำแบบนี้ไม่ได้ ต้องเช็กภาพประกอบหรือโลโก้ใช่ไหม ใช้เป็นไม้บรรทัดพิกเซลสำหรับรูปภาพได้เลย — ชี้ไปที่รูปแล้วอ่านขนาดที่แสดงผลจริง ซึ่งมักไม่ตรงกับขนาดในไฟล์ต้นฉบับ คำถามและคำตอบ ถาม: จะวัดพิกเซลบนหน้าจอโดยไม่เปิด DevTools ได้อย่างไร ตอบ: คลิกไอคอนแล้วลาก เลเยอร์อยู่เหนือหน้าเว็บ คุณจึงวัดสิ่งที่เห็นจริง รวมถึงสถานะ hover ที่หายไปเวลาพาเนลแย่งโฟกัส ถาม: ไม้บรรทัดวัดพิกเซลหน้าจอ, ไม้บรรทัดวัดหน้าจอ, screen ruler, px ruler, pixelruler — อันไหนคืออันนี้ ตอบ: ทั้งหมดนั่นแหละ เครื่องมือเดียวกัน ต่างกันแค่คำที่พิมพ์ค้นหา ถาม: วัดเป็นเซนติเมตรหรือนิ้วได้ไหม ตอบ: ไม่ได้ นี่คือเครื่องมือไม้บรรทัดพิกเซล และรายงานเฉพาะพิกเซล CSS ซึ่งเป็นหน่วยเดียวกับที่คุณเขียนในสไตล์ชีต ถาม: ใช้ได้ทุกที่หรือเปล่า ตอบ: บนเว็บไซต์ทั่วไปใช้ได้ ส่วนหน้าระบบของ Chrome โปรแกรมอ่าน PDF ในตัว และเนื้อหาภายใน iframe ข้ามโดเมนนั้นปิดสำหรับทุกส่วนขยาย รวมถึงตัวนี้ด้วย ถาม: เก็บข้อมูลอะไรบ้าง ตอบ: ไม่เก็บอะไรเลย ไม่มีการเรียกเครือข่าย ไม่ต้องมีบัญชี ไม่ต้องสมัคร ตอนติดตั้งไม่ขอสิทธิ์ที่น่ากลัว และจะแตะหน้าเว็บก็ต่อเมื่อคุณคลิกไอคอนแล้วเท่านั้น วิธีเดิม ๆ ทั้งช้าและคลาดเคลื่อน ไม่ว่าจะเอาไม้บรรทัดพลาสติกทาบกระจกจอคอมพิวเตอร์ หรือนั่งนับพิกเซลในภาพหน้าจอ ไม้บรรทัดสำหรับงานบนจอคอมพิวเตอร์ต้องอยู่ในเบราว์เซอร์ วาดใหม่เมื่อเลย์เอาต์จัดเรียงใหม่ และพูดหน่วยเดียวกับโค้ด นั่นคือสิ่งที่เลเยอร์บนหน้าจอนี้ทำ และเป็นเหตุผลที่ไม้บรรทัดพิกเซลสำหรับเว็บไซต์ดีกว่าการลากไม้บรรทัดทับภาพหน้าจอในโปรแกรมแต่งภาพ คำอธิบายนี้มีให้อ่าน 52 ภาษา ไม้บรรทัดพิกเซลสำหรับเว็บจึงอยู่ห่างแค่การค้นหาครั้งเดียวในภาษาของคุณ ติดตั้งไว้ ลองวัดพิกเซลบนหน้าเว็บถัดไปที่เปิด แล้วเก็บไม้บรรทัดหน้าจอไว้ห่างแค่คลิกเดียวตลอดทั้งวัน