ฉันอยากจะแบ่งปันเคล็ดลับเด็ด ๆ สำหรับ Mozilla Firefox ซึ่งสามารถเพิ่มผลผลิตและประหยัดเวลาของคุณได้ ในขณะที่ท่องเว็บบางครั้งคุณต้องการแบ่งปันบางสิ่งบางอย่างกับเพื่อนของคุณโดยการจับภาพหน้าจอ แต่ต้องใช้หลายขั้นตอนในการจับภาพหน้าจอของทั้งหน้าบันทึกครอบตัดและอื่น ๆ ในบทความนี้เราจะดูวิธีการถ่ายภาพหน้าจอขององค์ประกอบเฉพาะบนหน้าเว็บโดยตรงโดยไม่ต้องใช้โปรแกรมเสริม
การโฆษณา
เมื่อโหลดเว็บเพจเว็บเบราว์เซอร์ของคุณจะสร้าง Document Object Model ของเพจ DOM ถูกสร้างขึ้นเป็นโครงสร้างแบบทรีโดยแต่ละโหนดเป็นอ็อบเจ็กต์ที่แสดงถึงส่วนหนึ่งของเอกสาร
มาดูกันว่าคุณสามารถใช้สิ่งนี้เพื่อจับเฉพาะองค์ประกอบเฉพาะในภาพหน้าจอของคุณได้อย่างไร
ถึง จับภาพหน้าจอขององค์ประกอบหน้าเว็บเฉพาะใน Firefox ทำตามขั้นตอนต่อไปนี้:
- เปิดหน้าที่ต้องการใน Firefox และคลิกขวาที่องค์ประกอบที่คุณต้องการจับภาพ
- จากเมนูบริบทเลือก 'ตรวจสอบองค์ประกอบ':
- เครื่องมือตัวตรวจสอบจะเปิดขึ้น สังเกตว่ามีการควบคุมเบรดครัมบ์สำหรับโหนดแผนผัง DOM:
- คุณสามารถคลิกขวาที่องค์ประกอบใดก็ได้แล้วเลือก โหนดภาพหน้าจอ จากเมนูบริบท:
นี่คือสิ่งที่เราต้องการ
นี่คือสิ่งที่เราต้องการสิ่งที่ยอดเยี่ยมเกี่ยวกับคุณสมบัตินี้คือการจับองค์ประกอบยาว ๆ รวมถึงองค์ประกอบส่วนใหญ่ที่ต้องใช้การเลื่อน ในกรณีของฉันนี่คือลักษณะของภาพหน้าจอ:
หรือคุณสามารถใช้ในตัว ภาพหน้าจอ คำสั่ง ก่อนหน้านี้ฉันเขียน วิธีถ่ายภาพหน้าจอของหน้าที่เปิดใน Firefox . ในบทความดังกล่าวเราใช้คำสั่ง 'ภาพหน้าจอ' ในตัวของ Firefox เพื่อจับภาพทั้งหน้า ฟังก์ชันเดียวกันนี้สามารถใช้เพื่อจับภาพองค์ประกอบเฉพาะในหน้าที่เปิด
- เปิด Firefox แล้วกด Shift + F2 บนแป้นพิมพ์ Firefox จะเปิดคอนโซล / บรรทัดคำสั่งที่ด้านล่างของหน้าจอ
- พิมพ์คำสั่งต่อไปนี้ภายใน:
ภาพหน้าจอ - ตัวเลือก 'ชื่อ'
แทนที่ชื่อ 'ส่วน' ด้วยชื่อตัวเลือกที่เหมาะสม ในกรณีของฉันมันควรจะเป็น
ภาพหน้าจอ - ตัวเลือก '# widget-apps> .iconlist> .iconlist-content> ul'
วิธีที่สองมีประโยชน์สำหรับนักพัฒนาเว็บที่ทราบเส้นทางองค์ประกอบ DOM ที่แน่นอน เห็นได้ชัดว่าผู้ใช้โดยเฉลี่ยจะชอบวิธีแรกในการจับภาพหน้าจอขององค์ประกอบหน้าเว็บที่เฉพาะเจาะจง
