adkdev // Just another web development blog

ไฟร์ฟอกซ์ หรือ Firefox (FF) คือ Web browser อีกตัวหนึ่ง นอกจาก Internet Explorer (IE) ของ Microsoft ซึ่งใช้กันอย่างแพร่หลาย เนื่องจากว่า มันแถมมากับวินโดว์ ที่เราๆ ท่านๆ ใช้กันทุกวัน

ตัว Firefox นี้โดยทั่วไปแล้วนักพัฒนาเว็บจะรู้จักมากกว่าผู้ใช้ทั่วไป (ในความคิดของผมนะ)
เหตุผลหนึ่งที่ผมคิดว่าทำให้ตัว Firefox นั้นน่าสนใจ ก็คือ การมี Extension หรือตัวเสริม
จะว่า plugin ก็ไม่เชิง ซึ่งทางทีมผู้พัฒนา Firefox นั้นอนุญาตให้บุคคลทั่วไป
สามารถที่จะพัฒนาตัว Extension ขึ้นมาเองได้ และเมื่อพัฒนาเสร็จก็นำมาแบ่งให้คนอื่นได้ใช้กัน
จึงทำให้ Firefox มีโปรแกรมเสริมความสามารถเป็นจำนวนมาก

แต่ก่อนที่จะใช้ ตัว Extension นั้นจำเป็นที่จะต้องมีตัว Firefox เสียก่อน หากใครยังไม่มีก็สามารถดาวโหลดได้ที่เว็บ Firefox ครับ

ในการติดตั้งตัว extension นั้นก็แสนจะสะดวก สามารถเลือกหา download ได้จากหน้า Firefox Add-ons ของทาง Mozilla เอง โดยจะมีรายละเอียดต่างๆ แสดงคุณสมบัติของตัว Extension นั้นๆ ไว้
และเมื่อเลือกได้แล้วก็คลิกที่ปุ่มเขียวๆ ที่เขียนว่า Install Now ดังภาพ เพื่อทำการติดตั้ง

เมื่อคลิกแล้วจะมีหน้าต่างขึ้นมา และนับถอนหลัง สัก 3 วินาที เมื่อครบแล้วก็จะมีปุ่ม Install Now เมื่อติดตั้งเสร็จแล้ว ต้องทำการ Restart firefox 1 ครั้งเพื่อให้ extension ทำงาน แต่หากต้องการติดตั้งหลายตัว รอ restart ตอนติดตั้งเสร็จทั้งหมดทีเดียวก็ได้

ไฟล์ ของ ตัว extension นั้นจะมีนามสกุลเป็น .xpi ซึ่งหากว่าคุณต้องการที่จะนำไปติดตั้งแบบ offline มีอีกเครื่องที่ไม่ได้ต่อเน็ต ก็สามารถทำได้ โดยการคลิกขวาที่ปุ่มดาวโหลด
จากนั้น เลือก Save Link As… จากนั้นก็ทำการเซฟ นำกลับบ้านได้

และต่อไปนี้ก็คือ firefox extension สำหรับการพัฒนาเว็บ ที่ผมจะนำเสนอ (ที่ผมใช้อยู่) ลำดับนั้นไม่ได้สำคัญ เลือกโหลดได้ตามชอบครับ

Web Developer

extension ตัวนี้มีประโยชน์ มาก หากใช้อย่างถูกวิธี และอาจมีโทษ (ต่อผู้อื่น) เพราะว่ามันทำอะไรได้มากมาย ซึ่งสามารถแก้ไขหน้าตาเว็บเพจ ได้ตามใจชอบ ไม่ขออธิบายมากละกัน ประเดี๋ยวจะมีคนเอาไปใช้แกล้งคนอื่น แต่สำหรับผู้พัฒนา ควรจะมีไว้ เพื่อเข้าใจและกันไว้ก่อน

MeasureIt

อันนี้เอาไว้วัดความกว้าง ความยาว ความสูง ในส่วนต่างๆ ของหน้าจอ (ที่อยู่ในหน้าเว็บ วัดได้เลย ไม่ต้องแคปเจอร์แล้วเอาไปเปิดกับโปรแกรมอื่น) ซึ่งอันนี้ผมใช้บ่อยมาก ซึ่งเมื่อติดตั้งแล้ว ตัวโปรแกรม จะอยู่ทางด้านซ้าย ล่าง ใน status bar ของ Firefox วิธีการใช้งานก็คลิกที่ไอคอน จากนั้นก็ลากบนหน้าเว็บ เพื่อวัดขนาด ที่ต้องการ

ColorZilla

ส่วนตัวนี้ ความสามารถก็ตามชื่อครับ เอาไว้วัดค่าสี ของสิ่งต่างๆ ที่อยู่ในเว็บนั้น ไม่ว่าจะเป็นรูปภาพ หรือสีตัวอักษา พื้นหลัง สะดวกมากครับ เพราะเมื่อก่อนตอนยังไม่ได้ใช้ตัวนี้ ผมต้อง capture หน้าจอไป แล้วใช้ photoshop วัดสีเอา ลำบากดีแท้ ส่วนวิธีการใช้งาน และสถานที่ตั้งของไอคอน จะอยู่ข้างๆ กันกับ MeasureIt

Firebug

อันนี้ใช้บ่อยมาก ความสารถสูงเอามากๆ ในความคิดผม ดีที่สุดสำหรับคนทำเว็บ ทำได้ทุกอย่าง ไม่ว่าจะหา element ของ html ที่ต้องการ เพื่อดู หรือแม้กระทั่งแก้ไขค่าต่างๆ ทั้ง html และ css หรือ javascript พร้อมทั้งสามารถ debug javascript ได้อีกต่างหาก สามารถวัดความเร็วในการโหลดหน้าเว็บเพจโดยแยกออกเป็นส่วน ทำให้มองเห็นความเป็นไปในการโหลดหน้าเว็บเพจของเรา ทุกขั้นตอน และตอนหลัง Yahoo! เติมความสามารถให้ด้วยการออก YSlow มาให้อีก ในบรรดาเครื่องมือที่อยู่ใน Firefox ผมใข้อันนี้ทุกครั้งที่มีการโหลดหน้าเว็บเลย (ทุกเว็บ รวมถึงเว็บคนอื่นด้วย หุหุ)

YSlow

ตัวนี้ ทางทีมงาน Yahoo! เขียนเพิ่มมา โดยจัดให้อยู่ใน Firebug โดยมาจากคำว่า Why Slow และตัว Y ก็เป็น logo ของ Yahoo! อีกด้วย โดย YSlow นั้นจะทำการวัดความเร็วในการโหลดหน้าเว็บเพจ ของเว็บเรา ตาม กฏ 14 ข้อ ที่ทางทีมงานของ Yahoo! ได้ทำการวิจัยแล้วว่าดีที่สุด ในการเพิ่มความเร็วให้กับการโหลดหน้าเว็บเพจของเรา (โอกาสหน้าจะเขียนอธิบายเกี่ยวกับเรื่องนี้อีกทีนะครับ)

IE Tab

แค่มีตัวนี้ ก็ไม่ต้องเปิดโปรแกรม Internet explorer แล้ว ใช้แต่ Firefox ก็พอ แต่ในเครื่องต้องมี โปรแกรม Internet explorer นะ เพราะต้องใช้ engine ของ Internet explorer อยู่ ซึ่งเราสามารถสลับไปมา ระหว่าง Firefox กับ IE ได้เพียงแค่ คลิกที่ ไอคอน โดยตัวไอคอนนั้นจะอยู่ใน status bar ของ Firefox ซึ่งสะดวกมากเมื่อต้องการเปรียบเทียบความแตกต่างในการแสดงผล ระหว่าง Firefox กับ IE

FireFTP

หากในเครื่องของคุณไม่มีโปรแกรม FTP ไม่เป็นไร ใน Firefox มีให้ โดย extension ตัวนี้จะทำหน้าที่เป็นโปรแกรม FTP ซึ่งช่วยให้การ Upload, Download ไฟล์ต่างๆ ผ่านทาง FTP ได้อย่างง่ายดาย ประสิทธฺภาพก็ใช้ได้ และที่สำคัญ ไม่เสียตังค์ เพราะว่าเขาให้ใช้ฟรีจ้า….

รายการต่อไปนี้ อาจจะไม่เกี่ยวข้องกับการพัฒนาเว็บโดยตรง แต่ก็คิดว่าจะมีประโยชน์ (ผมใช้เองแหละ *-*)

UnHide fields

ส่วนตัวนี้ คุณสมบัติ คือ ยกเลิกการซ่อน fields ที่มีการซ่อนไว้ ใน form อีกทั้งยังแก้ไขค่าได้อีกด้วย (อันที่จริงคุณสมบัตินี้ ใน Web Developer ก็มี)

Backgroundimage Saver

ใน Firefox นั้น จะไม่ฟังค์ชั่น การเซฟ รูปภาพพื้นหลัง ผมก็เซ็งมากว่าทำไมไม่มี จึงต้องไปเสาะแสวงหามา สุดท้ายก็เจอตัวนี้แหละ เมื่อคลิกขวาที่รูปภาพที่เป็นพื้นหลัง (Background) ก็จะมี context menu ให้เลือกเพิ่มให้ทำการเซฟ *-*

Greasemonkey

อันนี้เป็น extension ในตำนานไปแล้ว เนื่องจากเราสามารถเขียนสคริปส์ง่ายๆ (ใช้ JavaScript) เพื่อทำการทำให้เว็บที่เราเข้าชม เป็นไปตามที่เราต้องการ เช่นเอาโฆษณาออก (อันนี้เห็นบ่อย) เปลี่ยนรูปร่างหน้าตาของเว็บ หากเขียนไม่เป็น ไม่เป็นไรมีคนเขียนไว้ให้แล้วมากมาย ที่ UserScript.org และที่สำคัญมีหนังสือสอนเขียนสคริปส์สำหรับ extension ตัวนี้โดยเฉพาะด้วย แต่ว่าเป็นภาษาปะกิดเน้อ…

Cache Status

ตัวนี้ผมใช้เอง บางคนอาจบอกว่าไม่จำเป็น หน้าที่ของมันคือ บอกสถานะการเก็บ Cache ของ Browser ให้เรารู้ และเราสามารถที่ clear ค่าได้เมื่อต้องการ โดยเมื่อติดตั้งแล้วจะปรากฏไอคอน อยู่ทางขวาล่าง ของ Browser

Download Statusbar

ตัวนี้เป็นตัวช่วยในการจัดการ การดาวโหลดไฟล์ของเรา ซึ่งจุดเด่นคือ เล็ก บาง เบา สะบาย โดยจะแสดงสถานะที่การดาวโหลดต่างๆ ที่ status bar (ตามชื่อ) และเราสามารถจัดการทุกอย่างได้อย่างง่ายดาย

การติดตั้ง extension ต่างๆ นั้น คุณต้องดูด้วยว่า เวอร์ชั่นของ Firefox ที่ตัว extension นั้นต้องการ ใช้ได้กับ Firefox ปัจจุบัน ของคุณหรือไม่ โดยที่หน้าดาวโหลด จะมีคำอธิบายอยู่ว่า Works with:Firefox: 1.5 - 2.0.0.* คือใช้ได้กับ Firefox เวอร์ชั่นตั้งแต่ 1.5 จนถึง 2.0.0.x โดยที่ x แทนตัวเลขอะไรก็ได้ (เผื่อบางคนไม่รู้นะ - -”) ดังภาพข้างล่างนี้

และอีกอย่างคือ Firefox extension นั้นมีอีกมากมายให้ดาวโหลดมาใช้กัน ทีผมเขียนมานี่ก็แค่ส่วนหนึ่ง ที่เห็นว่า น่าจะมีใช้กัน

และที่ลืมไม่ได้คือ การมี extension เยอะเกินไป ก็จะทำให้เวลาเราโหลดตัวโปรแกรม Firefox ขึ้นมานี่ จะใช้ทรัพยากรเยอะ มากน้อย ตามจำนวน extension นะครับ ถ้าเครื่องแรง ก็ว่ากันไป แต่ถ้าเครื่องไม่แรงก็โหลดมาแต่พอควร เท่าที่จำเป็นจะดีกว่า ประเดี๋ยวจะบ่นอีก ว่าทำไมใช้ไฟร์ฟอกส์แล้วเครื่องมันช้าๆ หว่า…

Firefox Extension บางตัวนั้นมีความสามารถ ที่จะ Hack website ต่างๆ ได้ง่ายขึ้น ดังนั้น หากผู้พัฒนาเว็บ รู้ถึงความสามารถพื้นฐานเหล่านี้ และป้องกันไว้ก่อน ก็จะทำให้ Web application ของคุณ มีความปลอดภัยขึ้นอีกระดับหนึ่ง

สุดท้าย ขอขอบคุณทุกท่านที่สละเวลาอ่านมาจนถึงตรงนี้ ขอบคุณครับ