Posted by: nuttakorn2548 | มกราคม 22, 2009

Firebug แมลงไฟที่นักพัฒนาเว็บไซต์ไม่ควรพลาด

firebug1

ในการพัฒนาเว็บไซต์นั้นมีเครื่องมือที่ใช้ในการพัฒนานั้นมีมากมายทั้งแบบที่ต้อเสียเงินซื้อ อย่าง Adobe Dreamweaver หรือ Microsoft Frontpage หรือจะใช้ซอฟต์แวร์ประเภทการจัดการเนื้อหา (Content Management System – CMS) ในการพัฒนาเว็บไซต์อย่าง Joomla หรือ Drupal หากต้องการให้เว็บไซต์ของเรามีความสวยงามมากขึ้นเราจะต้องเรียนรู้การใช้ CSS และ Javascript เพื่อเพิ่มลูกเล่นและความสวยงาม วันนี้ผมขอแนะนำเครื่องมือที่จะนำมาช่วยในการพัฒนาเว็บไซต์ของเราด้วย Firebug

Firebug เป็นซอฟต์แวร์ที่ใช้สำหรับพัฒนาเว็บไซต์ของเรา วิธีการใช้งานเพียงแค่ผู้อ่านมีเว็บเบราเซอร์อย่าง Firefox แล้วติดตั้ง Plugin ที่ชื่อว่า Firebug เมื่อติดตั้งเสร็จแล้วให้ Restart เบราเซอร์ Firefox ก่อน จากนั้นจะปรากฏตัวแมลงอยู่บริเวณมุมล่างขวาของเบราเซอร์ แสดงว่า Firebug พร้อมที่จะใช้งานแล้ว

firebug2

วิธีการใช้งานเพียงแค่เปิดเว็บไซต์ที่ท่านสนใจขึ้นมา จากนั้นให้กดที่ Firebug จะปรากฏ Code ที่ใช้ในการพัฒนาเว็บไซต์ของเว็บไซต์นั้น ๆ ขึ้นมาโดยแบ่งออกเป็นส่วน ๆ ดังต่อไปนี้

  1. ส่วน HTML  จะแบ่งหน้าจอการทำงานเป็น 2 ส่วน คือ ทางด้านซ้ายและทางด้านขวา ทางด้านซ้ายและแสดง HTML Code ในส่วนของ body

firebug31

นอกจากนี้หน้าต่างทางด้านขวาจะมีอีก 3 เมนู คือ

1.1 Style จะแสดงข้อมูลของไฟล์ CSS พร้อม code ที่ใช้งานบนเว็บไซต์

firebug4

1.2 Layout แสดงการจัดหน้าบนเว็บไซต์

firebug5

1.3 DOM (Document Object Model) แสดงวิธีการจัดการข้อมูลบนคอมพิวเตอร์

firebug7

2. ส่วน CSS แสดง รหัส CSS ที่ใช้งานใน Tag ต่าง ๆ ในภาษา HTML

firebug8 3. ส่วน (Document Object Model) แสดงวิธีการจัดการข้อมูลบนคอมพิวเตอร์

firebug7

หากอยากรู้ว่าวัตถุที่วางอยู่บนเว็บไซต์นั้นอยู่ในส่วนใดของ HTML code ก็สามารถทำได้ง่ายเพียงแค่คลิกที่ปุ่ม Inspect จากนั้นให้เลื่อนเม้าส์ไปชี้ที่ตำแหน่งที่ต้องการ จะมีกรอบสี่เหลี่ยมสีฟ้าพร้อมกับแสดงไฮไลต์สีฟ้าเน้นที่ code นั้นทันที หากต้องการแก้ไขให้กดปุ่ม Edit

firebug10

firebug11

แมลงไฟตัวเล็กแต่ความสามารถเกินตัวแบบนี้หากผู้อ่านสนใจสามารถ download มาใช้งานได้ที่ https://addons.mozilla.org/en-US/firefox/addon/1843 หรือที่เว็บไซต์ผู้ผลิต http://getfirebug.com/ ครับ

คำเตือน : แมลงที่อยู่ในบทความนี้ห้ามรับประทาน


ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s

หมวดหมู่

%d bloggers like this: