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

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

ทิ้งคำตอบไว้

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

การโฆษณา

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

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

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

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

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

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

เปิด Firefox แล้วกด Shift + F2 บนแป้นพิมพ์ Firefox จะเปิดคอนโซล / บรรทัดคำสั่งที่ด้านล่างของหน้าจอ
พิมพ์คำสั่งต่อไปนี้ภายใน:
```
ภาพหน้าจอ - ตัวเลือก 'ชื่อ'
```
แทนที่ชื่อ 'ส่วน' ด้วยชื่อตัวเลือกที่เหมาะสม ในกรณีของฉันมันควรจะเป็น
```
ภาพหน้าจอ - ตัวเลือก '# widget-apps> .iconlist> .iconlist-content> ul'
```

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