เอาหล่ะครับได้เวลามาโพสซักที(เพราะมีคนมาทวง)
ก่อนอื่น ทำความรู้จัก Firebug กันก่อนเลยครับ สำหรับ webmaster web developer ก็ควรจะรู้จัก ไว้นะครับ(ใครไม่รู้จักนี่เชยเลยครับ)
firebug นี้เป็น add-on ของ FireFox ความสามารถของมันนี้เหมาะแก้ web developer มากๆเลยครับ สามารถที่จะช่วยทั้งเรื่อง design และ programe สามารถหามาใช้ได้ที่ extension ของเว็บ
www.firefox.com ครับ หรือ mozila นั่นแหละนะ ส่วนคนที่รู้จักแล้วส่วนใหญ่จะยังใช้ไม่ค่อยคุ้ม(ใช้ แค่ดู stylesheet)
ใช้ยังไงใช้ให้คุ้ม เรามาดูกันว่า firebug มี option อะไรที่น่าสนใจบ้าง(ผมว่าน่าสนใจทั้งหมดนั้นเลยแหละครับ)เดี่ยวผมจะมาไล่ให้ดูแต่ละ tab ของมันเลยนะครับ
Console Tab Console นี้มีไว้เช็ค ตรวจสอบ javascript ที่ error ว่ามาจากที่ใด code ส่วนไหนที่ error
และก็มีไว้ รัน code javascript ที่ยาวๆ ซึ่งไม่สามารถพิมพ์ได้จบในบรรเดียว ที่ address bar ของ บราวเซ่อร์ได้ครับ
เมื่อเราคลิ๊กมันก็จะโชว์รายละเอียดเพิ่มเต็มให้ดูครับ
*1โดยหาก javascript error ก็จะโชว์ รายละเอียดของ error นั้นให้ดู (หากคลิ๊กที่ชื่อ แดงๆก็จะนำไปยัง tab script พร้อมกับตำแหน่ง code ส่วนนั้น)
HTMLสำหรับ tab นี้รายละเอียดค่อนข้างเยอะครับ เดี่ยวผมจะอธิบายเป็นข้อๆไป
Over all
- Click ขวา inspect element เพื่อเปิด firebug ให้ยัง element นั้นใน html ได้ครับ เพื่อที่จะดู css ที่เกี่ยวข้องต่อไป
แก้ไข HTML 
**ส่วนที่ขีดเส้นใต้ไว้นั้น เป็น ชั้นของ element+class หรือ id ครับ
CSS stylsheetส่วนนี้จะสามารถ แก้ไข ปิด ปรับแต่ง เพิ่ม css ได้ตามต้องการเลยครับ ไว้สำหรับ preview ดู การเปลี่ยนแปลงจริงๆ ก่อนที่จะนำไปแก้ไข file style sheet อีกทีครับ
*1 : เป็นการเพิ่ม css property เข้าไปใน selector,class,id นั้นๆครับ
*2 : เป็น การเป็น style เข้าไปใน DOM element แบบแทรกเข้าไปใน html แบบ inline ครับ
*1:แสดงให้เห็น โดน Overide
*2 : แสดงการ Inherite (สืบทอด) มาจากที่ใดบ้าง
/*--------- ยังไม่หมดนะ เดี่ยวค่อยมาต่อ ทำอย่างอื่นก่อน ------------------*/ 
