[Tips] Firefox Tools สำหรับ Web Designer

posted on 24 Feb 2013 10:57 by designil in Tools directory Tech, Knowledge, Idea
สวัสดีค่า แนะนำตัวก่อน entry นี้ถูกเขียนด้วยผู้หญิงคนนึง ชื่อแอดแมว
วันนี้แอดแมวถูกส่งตัวให้มารีไรต์บทความเรื่อง

Firefox Tools สำหรับ web designer

 
เนื่องมาจาก firefox เวอร์ชันใหม่ ได้ปล่อย web developer tool (version 15)
เพื่อให้ web developer และ web designer ได้ใช้ทำงานได้ง่ายขึ้น สะดวก รวดเร็วกว่าเดิม
โดยมีตัว Tool ใหม่ๆเพิ่มเข้ามาหลายตัวด้วยกัน

ประกอบกับแอดมินกำลังเขียน responsive web ซึ่งโคตรจะขี้เกียจตามหา add ons
และเว็บไซต์สำหรับเทส responsive web design ก็เลยไปตามหา Tool ตัวนึงมาให้ใช้งาน
ดังนั้นจึงได้เรื่องนี้มาเขียนรีวิว
 
 

วิธีการใช้งาน Tool จากภาพด้านล่างนี้นะคะ
 
 โดยตัว Tool ที่ถูกพัฒนาเข้ามาใน browser ของ Firefox ก็มีจะทั้งหมด 4 ตัวหลักๆด้วยกันค่ะ
 
 
วันนี้จะยกมาพูดในส่วนของ responsive design view และ developer toolbar สำหรับ web designer เพื่อจะสามารถใช้งาน firefox ได้ง่ายขึ้น โดยไม่ต้องโหลด add-ons มาลงให้เสียเวลา
(Javascript Debugger และ Using the source Editor ลองตามไปอ่านได้จากลิงค์ด้านบน)

Responsive Design View

คือ Tool ที่จะเข้ามาจัดการในการวางแผนการทำเว็บไซต์ให้ง่ายขึ้น โดยทำให้ผู้พัฒนาเว็บไซต์สามารถดูเว็บไซต์ได้หลากหลายขนาดหน้าจอ  หลากหลาย Device ทั้ง mobile และ Tablets
 
 
วิธีเปิดการใช้งาน
ไปที่ Tools Menu > Web Developer > Responsive Design View
หรือ ctrl + shift + M (สำหรับ windows) / cmd + option + M (สำหรับ Macintosh)
กดยกเลิกการใช้งาน เพียงแค่กดปุ่ม ESC 
 
 
ข้อดีของ Responsive Design View
- สะดวกในการทำงาน
- ไม่ปรับเปลี่ยนขนาดหน้าต่างของ browser เวลาเรากดดูหลากหลายไซส์
- เพิ่มขนาดไซส์ของ device ได้เองตามใจชอบ
- กดปุ่ม rotate เพื่อปรับขนาดหน้าจอเป็นแนวนอนได้
(สำหรับคนพัฒนาใน tablet และ mobile ค่ะ)
 
 
 
อยากรู้ว่าหน้าตาเว็บไซต์ของเราจะเป็นอย่างไรใน device อื่นๆ ก็ลองไปเทสเล่นกันได้ค่ะ

Developer Toolbar

 
วิธีเปิดการใช้งาน
ไปที่ Tools Menu > Web Developer > Developer Toolbar
หรือ Shift + F2
 
 
ข้อดีของการใช้ Developer Toolbar
- สะดวกในการทำงาน
- พิมพ์ กด enter เสร็จ ง่ายๆ ไม่ต้องโหลด add-ons
 
 
วิธีใช้งาน
เปิดมา จะเห็นช่องให้กรอก command line อยู่ที่ด้านล่างสุดของหน้า
 
 
โดย command line จะช่วยให้เราสามารถพิมพ์คำสั่งได้ตามใจฉันแล้วกด enter จะสามารถใช้งานได้เลย

เริ่มต้นด้วยคำสั่งแรก
Help - พิมพ์ 'help' สำหรับดูลิสต์ของคำสั่งทั้งหมดที่ใช้งานได้
 


พิมพ์เสร็จแล้ว จะเห็นว่ามีคำสั่งหลักๆ ตามภาพ
ถ้าอยากดูต่อก็พิมพ์ help ตามด้วยหัวข้อที่เราสนใจจะดูต่อได้

 
 
วันนี้จะแนะนำแค่คำสั่ง Screenshot นะคะ สำหรับ web designer
ลองมาพิมพ์คำสั่ง help screenshot กันเลยดีกว่า ว่าสามารถทำอะไรได้บ้าง ใส่ parameter อะไรได้บ้าง
 

 

Screenshot

คือ คำสั่งเอาไว้แคปเจอร์หน้าจอของเว็บไซต์ ปกติแล้วแอดแมวจะใช้ add-ons หรือ extensions พวก screen capture ไว้ใช้ในการแคปเจอร์ แต่บางทีก็ขี้เกียจจะโหลดมาใช้ ดังนั้นเพื่อให้สะดวกและรวดเร็วขึ้น เราก็ใช้ Tool ของ browser ให้เป็นประโยชน์ในการแคปเจอร์
 
 
คำสั่ง
 
screenshot : สำหรับแคปเจอร์หน้าจอทั้งหมด เมื่อพิมพ์คำสั่งแล้ว ภาพที่แคปเจอร์จะถูกเก็บไปที่ download ของเราโดยอัตโนมัติ แต่ว่าภาพที่เราได้จะได้ไม่เต็มจอ
 
 
 
 
screenshot --fullpage : (screenshot เว้นวรรค ตามด้วย 2 ขีด แล้วก็คำว่า fullpage)
คำสั่งนี้จะได้ภาพที่แคปเจอร์เป็นขนาดยาว ได้ทั้งหน้าของเว็บไซต์
 
screenshot test.png
แคปเจอร์ภาพ เซฟไฟล์ชื่อ test.png
 
screenshot test.png --fullpage :
แคปเจอร์ภาพ เซฟไฟล์ชื่อ test.png ขนาดเต็มจอ 
 
 
 
 
สุดท้ายและท้ายสุด แอดแมวมีบล็อกของตัวเองแต่ไม่ยอมไปเขียน เลยมาขอแจมหน้านึง
อยากศึกษาต่อเรื่องของ firefox browser และ ตัว Tool ใหม่ๆที่เพิ่มเข้ามา 
แวะเข้าไปอ่านเว็บนี้กันต่อได้เลยค่า จบแว้ววววว
 
อ่านบทความต้นฉบับบนเว็บ Designil ได้ที่ลิงค์นี้นะคะ:

Comment

Comment:

Tweet

WOW!! แหล่มๆๆๆๆ open-mounthed smile confused smile Hot! Hot!

#10 By บุรุษนิรนาม on 2013-02-25 21:34

@ozinepank ขอบคุณคร้าบ :3 แวะมาเยี่ยมกันบ่อย ๆ นะฮะ
@limitblog อัพเดทเลยคร้าบ big smile  @blognat โหดมาก

#9 By Woratana N. on 2013-02-24 14:49

โอ่ ผมยังใช้ firefox 3.6 อยู่เลยครับไปยังไม่ถึงรุ่นนี้เลยเมพขิงๆ
@blognat : เขียนเองรึเนี่ย ว้าวว Hot! Hot! Hot!

#8 By limitblog on 2013-02-24 14:37

บทความยอดเยี่ยมมากๆครับ ขอบคุณนักเขียนไฟแรง เขียนอธิบายได้เข้าใจง่าย มวกมาก! ( แอบดีใจที่มีการรวมนักเขียนในบล็อกเอ็กซ์ทีนที่เกี่ยวกับ Web Dev. )
คารวะท่านทั้งสอง @designil & @blognat  
Hot! Hot! Hot! Hot! Hot!

#7 By ozinepank on 2013-02-24 14:22

@noppon ตอนผมนอนแล้วจะกลายร่างเป็นผญครับ #เดี๋ยวนะ sad smile

เขียนดีกว่าผมอีก Hot! Hot!

#6 By Woratana N. on 2013-02-24 13:10

@nopnon เราเป็นคนเขียนเองค่ะ ยึดบล็อกหน้านึง 5555555

#5 By NAT on 2013-02-24 12:52

@designil ผมสงสัยว่าท่านวอเหลวเป็นผู้หญิงตั้งแต่เมื่อไร (=[]=")
@nopnon ชะอุ๊ย แก้แล้วค่ะ แหะๆ sad smile

#3 By Woratana N. on 2013-02-24 12:45

เพิ่งเห็น ลิ้งค์ล่างสุดผิดพลาดนะครับ
Hot! โอ้ เจ๋งมากเลยครับ

Code Here.