สรุปขั้นตอนสำคัญ
- เลือกเมนูสามจุด More menu > More tools > Developer tools คลิกไอคอนจุดสามจุด > Run command > พิมพ์ "screenshot"
- เลือกประเภท: Area screenshot, Full size screenshot, Node screenshot, หรือ Screenshot
บทความนี้อธิบายวิธีถ่ายภาพหน้าจอบน Microsoft Edge โดยใช้ยูทิลิตี้ที่ซ่อนอยู่ภายใน Developer Tools
วิธีถ่ายภาพหน้าเว็บบน Edge
ความสามารถในการถ่ายภาพหน้าเว็บเต็มหน้าจอ (full-page screenshot) จากเบราว์เซอร์โดยตรงมีคุณค่ามาก เนื่องจากซอฟต์แวร์จับภาพหน้าจอทั่วไปไม่ได้ทำงานสะอาดกับเนื้อหาที่เลื่อนได้ (scrollable content) คุณสามารถใช้ Developer Tools ใน Edge เพื่อจับภาพหน้าเว็บเต็มหน้าและอีกสามประเภทของสกรีนชอต
เบราว์เซอร์จะบันทึกไฟล์รูปภาพในโฟลเดอร์ดาวน์โหลดเริ่มต้นบนคอมพิวเตอร์ หรือจะพรอมต์ให้คุณเลือกตำแหน่งที่ต้องการ
กดปุ่ม F12 หรือ Ctrl + Shift + I บนคีย์บอร์ด Windows เพื่อเปิด Developer tools ใน Microsoft Edge ผู้ใช้ macOS ให้ใช้ลัด Command + Option + I คุณยังสามารถเข้าถึง Developer Tools จากแถบเครื่องมือ Edge ได้: เลือกสามจุด More > More tools > Developer tools
ในแผง Developer Tools ให้เลือกไอคอนจุดสามจุด (ellipsis) ที่มุมขวาบน เพื่อเปิด Customize and control DevTools
เลือก Run command (หรือกด Ctrl + Shift + P) จากเมนูแนวตั้ง
พิมพ์ "screenshot" ในแผง Run command เพื่อแสดงคำสั่ง 4 แบบ คำสั่งเหล่านี้ช่วยให้คุณเลือกส่วนของหน้าเว็บที่ต้องการจับภาพ
เลือก Capture area screenshot จากรายการคำสั่ง เพื่อถ่ายภาพพื้นที่เฉพาะ ใช้เครื่องหมายไขว้ (cross-hair) คลิกซ้ายและลากเพื่อวาดกรอบพื้นที่ที่ต้องการ (ในตัวอย่างเราไฮไลท์ส่วนหนึ่งให้เห็นว่ามันจะสีเทาเข้ม แต่อย่างชัดเจนคุณจะไฮไลท์ส่วนที่คุณต้องการ)
เลือก Capture full size screenshot จากรายการคำสั่ง เพื่อถ่ายภาพเต็มขนาด จะจับภาพทั้งหน้าเว็บ รวมถึงเนื้อหาที่เลื่อนได้ซึ่งไม่อยู่บนหน้าจอ
เลือก Capture node screenshot จากรายการคำสั่ง เพื่อจับภาพ HTML Node ที่เลือกใน Dev Tools จากแท็บ Elements คุณยังสามารถคลิกขวาที่โหนดที่เลือกและเลือก Capture node screenshot ได้ เช่น เลือก "header class" และจับภาพส่วนหัวของหน้าเว็บ
เลือก Capture screenshot จากรายการคำสั่ง เพื่อถ่ายภาพมุมมองที่ใช้งานอยู่ (active view) นี่คือพื้นที่ที่มองเห็นได้ภายในเบราว์เซอร์ ไม่รวมพื้นที่ที่เลื่อนได้แต่อยู่นอกมุมมอง
เคล็ดลับ:
เบราว์เซอร์ที่พัฒนาจาก Chromium เช่น Chrome และ Edge ยังอนุญาตให้คุณจำลองอุปกรณ์อื่นๆ และความละเอียดหน้าจอของพวกเขา คุณสามารถใช้คุณสมบัตินี้ร่วมกับคำสั่งสกรีนชอต และจับภาพว่าหน้าเว็บจะดูอย่างไรบนอุปกรณ์เฉพาะ
เลือก Toggle device emulation บนแถบเครื่องมือ Developer Tools (หรือกด Ctrl + Shift + M)
ดูเพิ่มเติม: วิธีถ่ายภาพหน้าจอบนอุปกรณ์ใดๆ
