Firebug สุดยอดเครื่องมือช่วยสร้างเว็บ Programming

admin | 03-04-2553 | เปิดดู 11206 | ความคิดเห็น 3

Firebug >> Download <<

Web Development Evolved >> Home Page <<

หมายเหตุ: Firebug เป็นโปรแกรมเสริมของ Firefox Web Browser หากท่านไม่ได้ใช้ Firefox โปรดติดตั้งและใช้ Firefox เพื่อดาวโหลด Firebug

ประโยชน์เบื่องต้นของ Firebug สำหรับช่วยสร้างเว็บ

ใช้ตรวจสอบ คำสั่ง html และสามารถแก้ไข คุณสมบัติ ต่าง ๆ ได้ทันที
Debug JavaScript code ใช้หาความผิดพลาดของโค็ด JavaScript
ตรวจสอบความเร็วในดาวโหลด หน้าเว็บ และ องค์ประกอบต่าง ๆ ในหน้าเว็บ
จัดตำแหน่ง องค์ประกอบ เพื่อปรับเปลี่ยนโครงสร้าง (Layout) หน้าเว็บ

เปิด firebug กดปุ่ม F12 หรือไปที่ Menu ของ FireFox แล้ว เครื่องมือ/tool -> Firebug -> Open Firebug

มองด้านล่างหน้าเว็บ จะเห็นหน้าต่างควบคุมของ Firebug คลิกที่ Tab HTML จะเห็นโคด HTML ด้ายซ้าย และด้านขวาจะเป็นโคด CSS ใครไม่รู้จัก CSS ไปดูวีดีโอสอนเบื้องต้นได้ที่ สอน CSS ตอนที่ 1 สอน CSS ตอนที่ 2 สอน CSS ตอนที่ 3

คลิกที่ ปุ่มรูปลูกศรสีฟ้า ข้าง ๆ ปุ่มรูปแมลง จากนั้นสามารถนำ mouse ไปวางตามองค์ประกอบต่าง ๆ ในหน้าเว็บ Firebug จะแสดงเส้นขอบสีฟ้าเน้นให้เห็นส่วนที่เราเอา mouse ไปวางทับ และ ถ้ามองที่ด้านซ้ายมือของหน้าต่าง firebug จะเห็นว่า code html ของคำสั่งนั้นจะถูกไฮไลทเป็นสีฟ้า และ ถ้ามองไปด้านขวาจะเห็น code css ของคำสั่งนั้น