ชีวิตง่ายขึ้นด้วย Fire bug

กลายเป็น ของจำเป็น และต้องใช้ไปซะแล้ว สำหรับ add-ons  Firefox ตัวนี้  Fire bug หลังจากที่บริษัทผมได้ให้ทีม production ที่ทำ css กว่า 60 คน เปลี่ยนการใช้ตัวมาตรฐานในการเทส css จาก IE6 มาเป็น Firefoe 1.5 เพราะว่า ถ้าดูได้สมบูรณ์ที่ Fx1.5 เบราเซอร์อื่นๆส่วนใหญ่มักจะเหมือนกัน ทำให้ลดเวลาการแก้ไขลงไปได้

Fire bug ใช้ทำไรได้มั่ง เค้าบอกว่า “You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…” ใช้ แก้ css แบบเห็นๆกันสดๆ บนเบราเซอร์กันไปเลย  ไม่ต้องแก้ไฟล์ css แล้ว อัพขึ้น server แล้ว รีเฟรช ค่อยเห็นผล บางทีแก้นิดๆหน่อย อัพไปอัพมา เสียเวลามาก แล้วมันดีกว่า web developer tool bar ยังไง?

เมื่อเราลง fire bug แล้ว เลือกที่เมนูบาร์ กด tools/fire bug >Open fire bug  มันก็จะเปิดออกมาเป็นแถบด้านล่างดังรูป
ที่แถบเมนูของ fire bug จะมีคำว่า inspect กดมันซะ แล้วเอาเมาส์ไปจิ้ม ที่ตรงส่วนที่เราต้องการจะแก้ไขที่หน้าเพจ มันจะขึ้น โค้ด html และ css ในส่วนนั้นมาให้เลย ไม่ต้องไล่หา   ดีจัง      และ ส่วน css นั้นเรา  สารมารถ คลิกขวา แล้วเลือก disable บาง property ได้ ไม่ต้องลบแล้วเขียนใหม่ สามารถ เขียนเพิ่มได้ เพื่อทดสอบ และเมื่อเขียน กดเพียงตัวอักษรตัวแรก มันก็จะมี auto ขึ้นมาให้เองเลย ไม่ต้องพิมพ์ทั้งคำถ้าจำไม่ได้ เหมือน dreamweaver เลยแฮะ จุดเหล่านี้เองที่สะดวกกว่า

add-ons ตัวนี้ ไม่ใช่ของใหม่ อะไรครับ มีมานานแล้ว แต่พึ่งจะได้ใช้เพราะ ว่ามันใช้ได้กับ firefox เท่านั้นนั่นเอง ส่วนคนไทยก็ยัง IE6 อยู่  เป็นทางเลือก 1 ครับ ลองโหลดมาจิ้มๆเล่นกัน ไม่เสียหาย ดาวน์โหลดได้ที่นี่ครับ ฟรีๆๆ
https://addons.mozilla.org/en-US/firefox/addon/1843

Related Articles

• แนะนำ firefox extension เจ๋งๆ (9)
• โปรแกรมทำ css layout (19)
• บีบอัดโค้ด css ให้โหลดเร็วสุดๆๆๆ (8)
• การจัดการกับความสูง (16)
• Web Developer toolbar === (0)