แอบดู css hi5 ชาวบ้านด้วย firefox

เมื่อก่อนกว่าจะแกะ css code ของ hi5 ได้ ช่างยุ่งยากแสนเข็น ต้องเปิด code html ดาวน์โหลด css ลงมา แล้วไล่ code เอาเอง แต่พอเปลี่ยนมาใช้ Firefox ก็เจอของดี เป็น add-ons ตัวนึง ชื่อ firebug เหมาะสำหรับนักพัฒนาเว็บ สารพัดประโยชน์มาก แต่วันนี้ขอแนะนำวิธีแกะ css code สำหรับคนที่จะแต่ง skin hi5 ให้หรูหราอลังการโดยไม่ต้องเสียเวลาไล่โค้ดเอง (ลูกเล่นอย่างอื่นลองเล่นดูเองละกัน)

ใครที่ยังไม่มี Firefox ให้ download มาติดตั้งก่อนนะครับ >>> download ที่นี่
เสร็จแล้วให้ติดตั้ง plug in ได้ที่นี่ >>> https://addons.mozilla.org/en-US/firefox/addon/1843
หลังจาก restart Firefox เรียบร้อยแล้ว ก็จะเจอไอคอนรูปแมลงอยู่ตรงมุมล่างขวาของ Firefox

วิธีใช้งานก็ง่ายๆ เลยครับ

1. เปิดเว็บ hi5 ที่เราอยากแกะโค้ด (เอาเว็บตัวเองมาโชว์ซะเลย)
2. คลิกที่ไอคอนรูปแมลงตรงมุมล่างขวา
3. คลิกที่ปุ่ม Inspect แล้วลองลากเมาส์ไปยังส่วนต่างๆ ของหน้าเว็บ tag html และ css จะแสดงด้านล่างให้เห็นเลย ไม่ว่าจะลากเมาส์ไปส่วนไหน โค้ดจะเปลี่ยนตาม ด้านขวาก็เป็น css บอกเราว่าตรงบริเวณนั้นเขียน css ว่ายังไงบ้าง ดูตามรูปเลยละกัน (คลิกดูรูปใหญ่นะ)
   
4. ดูขนาดตาม layout ก็ได้นะ ตาม box model เลย บอกทั้ง padding และ margin เจ๋งกว่า IE8 อีก หุๆ
   

ลองเอาไปเล่นดูละกันนะ โดยเฉพาะคนที่กำลังแต่ง skin hi5 ของตัวเอง จะได้ไปดูว่าของคนอื่นที่สวยๆ เค้าทำกันยังไง หรือจะเอาไว้ใช้กับเว็บอื่นทั่วๆ ไปก็ได้ รับรองว่าทุ่นแรงได้เยอะ ช๊อบชอบบบ