วิธีจับภาพหน้าจอเว็บไซท์ด้วย Firefox Developer Toolbar (โดยไม่ต้องติดตั้ง Add-ons)

สวัสดีครับทุกท่าน วันนี้ผมมีเทคนิคเล็กๆน้อยๆมาฝากครับ นั้นคือการจับภาพหน้าจอของเว็บไซท์ที่เราต้องการ (บางคนอาจจะติดตั้ง Add-ons แต่วิธีที่ผมจะแนะนำผมว่าง่ายที่สุดแล้วละ และมันดู geek ดี)

Web Developer หลายๆท่านอาจจะรู้จักแล้ว กับเครื่องมือสุดเทพ "web developer tools" ที่ built in มากับเจ้าบราวเซอร์หมาไฟ (mozilla firefox) บางคนอาจจะไม่รู้จักนะครับงั้นเรามาเริ่มใช้งานมันเลยดีกว่า

Step 1: ให้เราเปิดเจ้า web developer tools ขึ้นมาโดยไปที่ Tools -> Web Developer -> Developer Toolbar หรือง่ายๆเลยคือปุ่มลัด Shift + F2

Step 2: เราจะเห็นเจ้านี้โผล่มาด้านล่างของ browser เป็นแทบสีมืดๆหน่อย
Step 3: ถึงเวลาจับภาพหน้าจอเว็บไซท์แล้วโดยการใช้คำสั่ง screenshot

 

 

Step 3-1: หรือถ้าเราอยากกำหนดชื่อไฟล์ก็ให้พิมพ์ชื่อไฟล์ต่อได้เลยครับ เช่น screenshot web_capture

Step 3-2: ถ้าเราอยากได้แบบ full web page ให้เพิ่ม options --fullpage เข้าไปดังนี้ครับ screenshot --fullpage web_capture_1

 เพียงเท่านี้เราก็จะได้ web screenshot แบบ full page แล้วครับ ใครอยากรู้ options เพิ่มเติมสามารถใช้คำสั่ง help screenshot ดูรายละเอียดเพิ่มเติมได้ครับ
ด้านล่างเป็นภาพตัวอย่างจากการใช้คำสั่ง screenshot