CSS : Firebug เพื่อนแท้ ช่วยแก้ CSS

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

Firebug : โหลด Firebug

โดย Firebug นั้นเป็น Extensions ของ Firefox สามารถโหลดมาใช้งานได้ที่ Get Firebug

วิธีใช้ Firebug [1]
หน้าตาเว็บ Firebug (02/11/2011)

Firebug : การใช้งาน Firebug เบื้องต้น

เมื่อลง Firebug เสร็จเรียบร้อยแล้ว มาลองใช้งานกัน โดยคลิ๊กขวาแล้วเลือก Inspect Element

วิธีใช้ Firebug [2]
คลิ๊กขวา แล้วเลือก Inspect Element

หลังจากนั้น Firebug Panel จะปรากฎขึ้นมา

วิธีใช้ Firebug [3]
Firebug Panel

Firebug : เปิด Firebug เป็นอีกหน้าต่าง

เราสามารถเปิด Firebug เป็นอีกหน้าต่าง ได้โดยคลิ๊กที่ icon อันดับที่ 2 ที่อยู่ตรงมุมด้านขวาบนของ Firebug Panel

วิธีใช้ Firebug [4]
เปิด Firebug เป็นอีกหน้าต่าง

Firebug : ส่วนประกอบของ HTML Tab ใน Firebug Panel

สำหรับผม ในการใช้งาน Firebug นั้นจะใช้ในส่วนของ HTML Tab เป็นหลัก ดังนั้นมาดูว่า HTML Tab หน้าตาเป็นยังไงกันครับ

วิธีใช้ Firebug [5]
หน้าตาของ HTML Tab

Firebug : Node View

สำหรับ Node View ของ HTML Tab นั้นก็จะแสดง Code HTML ของเว็บให้เราดู โดยถ้าเรานำเม้าส์ไปวางไว้บน Element ไหน Firebug จะ Highlight ให้ดู ว่าแสดงผลอยู่ตรงไหน อย่างเช่นในรูป นำเม้าส์ไปวางที่ <div class=”info”> ดังนั้น Firebug ก็ Highlight ให้ดูว่า Element ตัวนี้อยู่ตรงไหน

วิธีใช้ Firebug [6]
Firebug Highlight ให้เราเห็นว่า <div class="info"> นั้นอยู่ตรงไหน

แต่ถ้าเราคลิ๊กที่ Element ไหน Firebug จะ highlight แถวที่เราคลิ๊ก และในส่วน HTML Stack นั้น Element ตัวที่เราคลิ๊กจะเป็นตัวหนา โดย HTML Stack นั้นจะเรียง Element ไว้โดยด้านขวาสุดคือ Element ที่คลุม Element อื่น ๆ ไว้ตามลำดับ รวมถึง HTML Side Panel จะแสดง CSS ของ Element ตัวนั้นไว้ด้วย

วิธีใช้ Firebug [7]
คลิ๊กที่ Element เพื่อดูรายละเอียด

แก้ไข Code HTML

เราสามารถกดคลิ๊กขวาที่ Element แล้วเลือก Edit HTML เพื่อแก้ไข Code HTML ได้

วิธีใช้ Firebug [8]
คลิ๊กขวา เลือก Edit HTML เพื่อแก้ไข Code

ซึ่งการแก้ไขใน Firebug เราจะสามารถเห็นผลลัพธ์ได้เลย แต่เมื่อเรา Refresh หน้านั้น การแสดงผลจะกลับมาเป็นเหมือนเดิมก่อนที่เราจะทำการแก้ไข (แก้ไขเสร็จแล้ว ให้กดที่ Edit เพื่อกลับไปยังหน้าปรกติ)

วิธีใช้ Firebug [9]
เมื่อลบคำว่า "วิธีจัดให้อยู่กึ่งกลาง" ออก ผลลัพธ์ก็แสดงผลให้เห็นทันที

Firebug : HTML Side Panel

สำหรับ HTML Side Panel นั้น มีแบ่งออกเป็น 4 ส่วนได้แก่

  • Style : ซึ่งจะบอกรายละเอียดว่า Element ตัวนี้มี CSS ตัวใดกำกับอยู่บ้าง

    วิธีใช้ Firebug [10]
    หัวข้อ Style
  • Computed : จะบอก CSS ของ Element ตัวนั้นทั้งหมด ว่ามีค่าเป็นเท่าไหร่บ้าง

    วิธีใช้ Firebug [11]
    ค่า CSS ต่าง ๆ ของ Element
  • Layout : แสดงให้เห็นว่า Element มีขนาด มีลักษณะยังไง และเราสามารถแก้ค่าตัวเลขต่าง ๆ ได้ด้วย

    วิธีใช้ Firebug [12]
    สามารถแก้ไขค่าตัวเลขได้เลย
  • DOM : หัวข้อนี้ขอออกตัวเลยว่าไม่รู้เรื่อง ขอไม่อธิบายนะครับ >_<

Firebug : เริ่มต้นแก้ไข CSS ด้วย Firebug

ระงับการแสดงผล

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

วิธีใช้ Firebug [13]
CSS ที่กำกับ

ตัวอักษรที่ใหญ่ขึ้นจากการระงับขนาดตัวอักษร

วิธีใช้ Firebug [14]
กดเพื่อระงับการใช้งาน

แก้ไข CSS

คราวนี้เรามาลองแก้ไข CSS ดูนะครับ Firebug ช่วยให้เราเห็นการเปลี่ยนแปลงในค่าที่เราใส่ได้ยังไง

ให้เราดับเบิ้ลคลิ๊กที่ค่าที่เราต้องการแก้ไข แล้วใส่ค่าใหม่ได้เลยครับ

วิธีใช้ Firebug [15]
จะเห็นว่าเพิ่ม margin-bottom แล้วมีการเปลี่ยนแปลงยังไง

เพิ่ม CSS

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

วิธีใช้ Firebug [16]
ใส่ค่าที่ต้องการทดสอบเลยครับ

ผมใส่ค่าเป็น background:#FF0; เข้าไป ก็จะได้ผลลัพธ์เป็นพื้นหลังสีเหลืองในทันที

วิธีใช้ Firebug [17]
พื้นหลังสีเหลือง เห็นกันทันที

ทุกคนลองใช้ดูนะครับ ผมว่ามันทำให้การเขียน CSS ง่ายขึ้นเยอะเลยครับ

ปล. Chrome เนี่ยมันมีให้มากับตัว Browser อยู่แล้ว ใช้งานไม่ต่างกันเท่าไหร่

เพิ่มเติม (โดย @inhumba) : ตรง HTML Slide Panel ในส่วนของ Style สามารถแก้ไขค่าตัวเลขได้โดยใช้ปุ่มลูกศร เมื่อ cursor อยู่ที่ค่านั้นๆ ปุ่มขึ้นจะเพิ่มค่าตัวเลขทีละ 1 ปุ่มลงจะลดค่าตัวเลขทีละ 1 ปุ่ม Page Up จะเพิ่มทีละ 10 ปุ่ม Page Down จะลดทีละ 10 ครับ

Rabbitinblack

Blog เกี่ยวกับ HTML CSS jQuery Wordpress และเรื่องอื่น ๆ สัพเพเหระ

Proudly powered by WordPress & SeedThemes