Firebug สุดยอดเครื่องมือช่วยสร้างเว็บ Programming
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 ของคำสั่งนั้น
.jpg)
ด้วยเทคนิคนี้จะทำให้เราสามารถตรวจสอบ code และ การแสดงผล เทียบกันได้อย่างรวดเร็ว ทำให้เราสามารถสร้างเว็บได้อย่างมีประสิทธิภาพมากขึ้น
HTML คืออะไร รับสิทธิ์การอบรมฟรี ทำเว็บด้วยภาษา HTML
ไม่มีความคิดเห็น:
แสดงความคิดเห็น