ตัวที่เราจะมาแนะนำกันในวันนี้ก็คือ Web Developer Tools เป็น Add on ตัวหนึ่งของ Firefox มีหลายเครื่องมือในตัวเดียว ประมาณว่าลงตัวเดียวได้ครบเลยล่ะค่ะ ไม่ว่าจะเป็นระบบของ CSS Cookies Forms Images แต่ที่เราจะแนะนำในบล็อกนี้ก็คือในส่วนของ CSS เราสามารถดูตำแหน่งของส่วนที่เราต้องการได้ว่า อยู่ตรงส่วนไหนของ CSS เพื่อให้ง่ายต่อการแก้ไข CSS ซึ่งเหมาะมากสำหรับมือใหม่ที่ไม่ชำนาญในการเขียน CSS ค่ะ

ก่อนอื่นเราต้องเปิด Firefox ขึ้นมาก่อน (ขอย้ำนะคะว่า Firefox ^^) ทำการ Download ตัว Web Developer ได้ที่ Url นี้เลย http://chrispederick.com/work/web-developer/ โปรแกรมจะติดตั้งให้เราตามค่าของ Firefox ที่เรากำหนดไว้ จากนั้นก็ปิด firefox แล้วเปิดขึ้นมาใหม่ หากไม่มี Toolbar ปรากฏขึ้นก็ให้ไปที่ View >> Toolbars >> Web Developer Toolbar คลิกตรง Web Developer Toolbar ให้มีเครื่องหมายถูก จากนั้นก็จะได้ Toolbar ดังภาพด้านล่างนี้นะคะ

ภาพที่ 1 แสดงตำแหน่งของ เครื่องมือ CSS ที่เราจะใช้

จากภาพ เราต้องเลือก View Style Information นะคะ หรือจะกดคีย์ลัด Ctrl+Shift+Y ก็ได้ค่ะ แล้วเมื่อเราลากเมาส์ไปชี้ตรงส่วนไหน ก็จะขึ้นมาเปนกรอบสีแดง แสดงขอบเขตของส่วนที่เราชี้อย่างชัดเจนค่ะ แล้วยังมีแถบบอกอีกด้วยว่า ตรงที่เราชี้นั้นอยู่ส่วนไหนของ CSS ซึ่งเมื่อเราคลิกตรงส่วนนั้น ก็จะมีรายละเอียดขึ้นมาว่า ตรงส่วนนั้นมี Code CSS เป็นอย่างไร ตามภาพข้างล่างนี้นะคะ

ภาพที่ 2 กรอบสีแดงแสดงขอบเขตและแถบข้อความแสดงตำแหน่ง

• ตำแหน่งที่ 1 แสดงขอบเขตในส่วนที่เราชี้
• ตำแหน่งที่ 2 บอกว่าส่วนที่เราชี้อยู่ตรงส่วนของ div#header > div#logo ใน CSS
• ตำแหน่งที่ 3 บอกรายละเอียด CSS ในส่วนของ #logo
•  

เครื่องมือนี้จะช่วยให้การแก้ไข CSS ตรงจุดขึ้น คือเราสามารถรู้ได้ว่าตรงส่วนที่เราต้องการมันอยู่ตรงส่วนไหนของ CSS ก็ลอง Download มาติดตั้ง และทดลองใช้งานกันดูนะคะ และในส่วนที่นอกเหนือจากการ View CSS หากมีข้อเสนอแนะที่เป็นประโยชน์อย่างไรก็แนะนำกันเข้ามาได้ค่ะ