เป็นที่ทราบกันทั้งมือเก่า มือใหม่ และพวกมือไม่ล้าง ว่า extension ฮอตฮิตติดอันดับต้นๆของไฟฟ้อก ก็คือ ไฟบัก อันนี้ผมพูดเฉพาะท่านผู้เขียนเว็บนะครับ อาซิ้มอาซ้อไม่เกี่ยว

ไฟบัก เป็น extension ของไฟฟ้อกสารพัดความสามารถ ทั้งดูโครงสร้าง html ,โครงสร้าง css ,ทดลองแก้ไข css แล้วดูผลได้เลย (ซึ่งอันนี้ผมชอบมาก) และอีกความสามารถหนึ่งคือ ดูข้อมูลที่รับส่งผ่านฟอร์ม ระหว่างไคแอนท์กับเซิฟเวอร์ ความสามารถนี้มักเอามาดีบัก AJAX

กระผมเองนี่อ่านเจอความสามารถที่ว่า ดูข้อมูลรับส่งระหว่างไคลแอนท์กับเซิฟเวอร์นี่ นานแล้วล่ะ แล้วก็เจอบ่อยด้วย ผมพยายามมามองหา มองแล้วมองอีก คลิกโน่นคลิกนี่ เขาไปดูกันตรงไหนหว่า

ใช้มันไม่เป็นจริงๆให้ดิ้นตาย หาๆในกูเกิลดู ก็ไม่มีเว็บไหนบอกวิธีการใช้งาน บอกกันเพียงแต่ว่ามันทำได้เท่านั้น

เวลาผมเขียนโค้ด AJAX แล้วมันเออเร่อโค้ดฝั่งเซิฟเวอร์ ผมจะลำบากมาก (ท่านที่เคยเขียน AJAX จะทราบดีว่า ถ้ามันเออเร่อที่ฝั่งเซิฟเวอร์ มันไม่แสดงอาการใดๆให้เราเห็นเลย อาการเดียวที่เห็นคือเหมือนโค้ดเราไม่ยอมทำงาน)

ผมต้องนั่งไล่โค้ดตัวเอง ไปทีละบรรทัด กว่าจะเจอว่าลืมปิด ; หากันแทบเป็นริดสีดวงคาเก้าอี้ ใช้ไฟบักก็ไม่เป็น จนต้องเลิกเขียน AJAX ไปพักใหญ่ เดี๋ยวนี้ถึงจะเขียนบ้างก็แค่เล็กน้อย ขี้เกียจหาบัก

แล้วมาเมื่อวาน ผมอ่านเว็บไปเรื่อยเปื่อย จนเจอเข้าให้ว่า จะเอาไฟบักช่วยหาบัก ที่เกิดจากการเขียนโค้ดแนว AJAX ได้อย่างไร วิธีการก็ไม่ได้ยากอะไรเล้ย กระบืออยู่ตั้งนาน

คลิกแท็บ Net เลือก Enable

หลังจาก Enable แล้วท่านจะเห็นปุ่มโผล่มาอีกหลายปุ่ม ถ้าอยากรู้ว่าแต่ละปุ่มมันแสดงอะไรก็ลองๆคลิกเล่นๆดู

ถ้าไม่อยากซุกซน ผมก็แนะนำให้ดูที่ปุ่ม All นั่นแหละครับ ถ้าท่านลองรีเฟรชหน้าเพจดู ก็จะมีข้อมูลแสดงออกมา มีเครื่องหมาย + นำหน้าด้วย

แล้วมันช่วยดีบัก AJAX ได้อย่างไร ลองดูภาพนี้นะครับ

นี่เป็นภาพที่แสดงการทำงานของ AJAX ในขณะที่ผมกำลังเขียนบทความนี้ในเวิร์ดเพรส ( เวลาเราเขียนบทความ มันจะ Autosave อยู่เรื่อยๆ ซึ่งมันใช้ AJAX ทำงานอยู่เบื้องหลัง)

ถ้าคลิกที่เครื่องหมาย + ขยายออกมา เราจะเห็น แท็บ 3 แท็บ คือ

1. Headers แสดงส่วนของเฮดเดอร์ ในการรับส่งข้อมูล

2. Post แสดงข้อมูลที่ส่งไปยังเซิฟเวอร์

3. Response สิ่งที่ตอบกลับมาจากเซิฟเวอร์

ตรงแท็บ Response นี่แหละที่หากว่าโค้ดฝั่งเซิฟเวอร์ของท่านเออเร่อ ท่านก็จะเห็นจากตรงนี้ ทำให้การหาบักในการเขียน AJAX ง่ายขึ้น

ลองอ่านข้อมูลจากเว็บไซต์อื่นๆเพิ่มเติม :
Firebug 1.4.3
ชีวิตง่ายขึ้นด้วย Firebug
ว่าด้วยเรื่องของการ debug และการใช้ FireBug บน Browser ทุกตัว
รวมเทคนิค firebug

บทความน่าสนใจ

1. IE Developer Toolbar
2. jQuery tab
3. Firefox’s Plugins ที่ผมเลือกใช้