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

718 สัปดาห์ ที่แล้ว - กรุงเทพมหานคร - คนดู 201

รายละเอียด

แนะนำตัวช่วยในการสร้างเว็บ

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 ของคำสั่งนั้น

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

HTML คืออะไร รับสิทธิ์การอบรมฟรี ทำเว็บด้วยภาษา HTML

tag : สร้างเว็บ