ก่อนจะเริ่มต้นบทความนี้ ผมขอให้ท่านได้อ่านบทความที่เกี่ยวกับ firebug ซึ่งผมได้เขียนมาก่อนหน้านี้แล้วครั้งหนึ่ง กันก่อน

http://www.select2web.com/general/firebug.html

หลายท่านที่ได้ดาวน์โหลดธีมของ SMF ซึ่งทางเว็บได้ทำแจกไว้ที่ http://www.select2web.com/forums ไปใช้งาน แล้วพบกับปัญหาการแสดงผลไม่ค่อยถูกต้องนัก ธีมที่ทางเราทำแจกไว้จะวางโครงสร้างด้วย CSS เป็นหลัก เมื่อนำไปใช้งาน บางครั้งอาจจะเกิดการตีกันของ CSS เดิม ทำให้เกิดความผิดเพี้ยนขึ้นมา

หลายท่านได้สอบถามในฟอรั่มว่าจะแก้ยังไงดี จึงเป็นที่มาของบทความในวันนี้ ผมจะใช้ไฟบักแสดงให้ท่านเห็นว่าตัวมันมีคุณูปการทางด้าน CSS อย่างไร

เซียนจำนวนมากยกย่องให้ไฟบักเป็นเลิศทางด้าน debug CSS และ Javascript รวมไปถึง AJAX แต่ก็ไม่ค่อยมีใครเขียนบทความแสดงการใช้งานให้เป็นที่ประจักษ์ ผมตอนใช้มันใหม่ๆ งมหอยโข่งได้ไปหลายเข่งเหมือนกัน

เมื่อพล่ามจนสาแก่อารมณ์แล้ว ก็ขอเชิญชวนท่านมาเดินทอดน่อง ชมสวนแห่งความรู้กันเถิด

ผมเดาเอาเองว่าท่านคงทราบแล้วว่าไฟบักมันคืออะไร และติดตั้งอย่างไร ถ้ายังไม่ทราบ อ่านได้ที่นี่ครับ http://www.prasarnsak.com/drupal/node/10

ท่านดูที่ภาพนี้ที่ผมทำกรอบแดงๆไว้ ลิ้งก์เดิมมีอยู่ทั้งหมด 5 ลิ้งก์

เมื่อผมเพิ่มลิ้งก์ใหม่เข้าไปอีก 1 ลิ้งก์ มันก็เกิดอาการตกขอบ อย่างที่เห็นในภาพ เดี๋ยวเราจะใช้ไฟบัก จัดการมัน

คลิกขวาบนหน้าเพจแล้วเลือก Inspect Elements ก็จะปรากฎหน้าต่างไฟบักขึ้นมา

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

เมื่อผมมองลงไปดูรายละเอียดของ CSS ที่มีต่อลิ้งก์ของผม ก็ยังไม่ปรากฎตัวไหนน่าสงสัย

ผมจึงต้องคลิกไล่แม่มันไปทีละชั้น แล้วผมก็เจอกับบุคคลต้องสงสัย มันกำหนดความกว้างไว้ที่ 470px

ผมลองเปลี่ยนค่ามันดูจาก 470px ไปเป็นสัก 490px ผลปรากฎว่าลิ้งก์ของผมขึ้นไปอยู่แถวเดียวกันแล้ว หลังจากผมทดสอบว่าแก้อย่างนี้แล้วมันได้ผลจริง ผมก็ค่อยไปปรับแก้ในไฟล์ CSS ของผม ซึ่งในตัวไฟบักเอง มันก็บอกบรรทัดอยู่ว่าสิ่งที่เราทดสอบไปเมื่อกี้อยู่ในโค้ดจริงบรรทัดที่เท่าไร

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

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

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