จับภาพหน้าจอขององค์ประกอบหน้าเว็บเฉพาะใน Firefox

ฉันต้องการแบ่งปันเคล็ดลับเจ๋ง ๆ สำหรับ Mozilla Firefox ซึ่งสามารถเพิ่มประสิทธิภาพและประหยัดเวลาของคุณได้ ขณะท่องเว็บ บางครั้งคุณต้องการแบ่งปันบางสิ่งกับเพื่อนของคุณโดยการจับภาพหน้าจอของสิ่งนั้น แต่ต้องใช้หลายขั้นตอนในการจับภาพหน้าจอของทั้งหน้า บันทึก ครอบตัด ฯลฯ ในบทความนี้ เราจะมาดูวิธีการถ่ายภาพหน้าจอขององค์ประกอบเฉพาะบนหน้าเว็บโดยตรงโดยไม่ต้องใช้โปรแกรมเสริม

เมื่อโหลดหน้าเว็บ เว็บเบราว์เซอร์ของคุณจะสร้าง Document Object Model ของหน้า DOM ถูกสร้างขึ้นเป็นโครงสร้างแบบต้นไม้ โดยที่แต่ละโหนดเป็นอ็อบเจกต์ที่แสดงถึงส่วนหนึ่งของเอกสาร

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

ถึง ถ่ายภาพหน้าจอขององค์ประกอบหน้าเว็บเฉพาะใน Firefoxทำตามขั้นตอนต่อไปนี้:

1. เปิดหน้าที่ต้องการใน Firefox และคลิกขวาที่องค์ประกอบที่คุณต้องการจับภาพ
2. จากเมนูบริบท เลือก "ตรวจสอบองค์ประกอบ":
3. เครื่องมือตรวจสอบจะเปิดขึ้น ขอให้สังเกตว่ามีการควบคุมการแสดงเส้นทางสำหรับโหนดทรี DOM:
4. คุณสามารถคลิกขวาที่องค์ประกอบใดก็ได้แล้วเลือก โหนดภาพหน้าจอ จากเมนูบริบท:นี่คือสิ่งที่เราต้องการ

สิ่งที่ยอดเยี่ยมเกี่ยวกับคุณลักษณะนี้คือสามารถจับภาพองค์ประกอบที่ยาวได้ ซึ่งรวมถึงองค์ประกอบส่วนใหญ่ที่ต้องใช้การเลื่อน ในกรณีของฉัน นี่คือลักษณะของภาพหน้าจอ:

อีกทางหนึ่ง คุณสามารถใช้ฟังก์ชันในตัว ภาพหน้าจอ สั่งการ. ก่อนหน้านี้ฉันเขียน วิธีถ่ายภาพหน้าจอของหน้าที่เปิดใน Firefox. ในบทความดังกล่าว เราใช้คำสั่ง "สกรีนช็อต" ของ Firefox เพื่อจับภาพทั้งหน้า คุณสามารถใช้ฟังก์ชันเดียวกันนี้เพื่อจับภาพหน้าจอองค์ประกอบเฉพาะบนหน้าที่เปิดได้

1. เปิด Firefox แล้วกด Shift + F2 บนแป้นพิมพ์ Firefox จะเปิดคอนโซล / บรรทัดคำสั่งที่ด้านล่างของหน้าจอ
2. พิมพ์คำสั่งต่อไปนี้ข้างใน:

   สกรีนช็อต --ตัวเลือก "ชื่อ"

   แทนที่ชื่อ "ส่วน" ด้วยชื่อตัวเลือกที่เหมาะสม ในกรณีของฉัน มันควรจะเป็น

   สกรีนช็อต --selector "#widget-apps > .iconlist > .iconlist-content > ul"

วิธีที่สองมีประโยชน์สำหรับนักพัฒนาเว็บที่รู้เส้นทางองค์ประกอบ DOM ที่แน่นอน เห็นได้ชัดว่าผู้ใช้ทั่วไปจะชอบวิธีแรกในการจับภาพหน้าจอขององค์ประกอบหน้าเว็บที่เฉพาะเจาะจง