TIP : เครื่องมือสำหรับดู css บน FireFox
โพสต์แล้ว: 06/01/2015 5:12 pm
สำหรับใครหลายๆคนที่กำลังเริ่มต้นกับการพัฒนาเว็บไซต์ด้วยการปรับเเต่ง CSS ต่างๆ ที่นี่ในการเขียน CSS หลายๆคนอาจจะประสบณ์ปัญหาในการเช็ค CSS ว่าของเรานั้นเขียนถูกต้องมั้ย !! หากต้องการแก้ไขจะดูผลลัพท์เเต่ละทีก็ต้องมาเปิด Code แก้ไข เเล้วทำการ RUN ใหม่ ซึ่งมันก็คงน่าเบื่อใช่มั้ยค่ะ
บทความนี้จะขอเเนะนำเครื่องมือที่จะช่วยในการพัฒนา CSS คะ มีอยู่ด้วยกัน 3 เครื่องมือ ซึ่งเครื่องมือเหล่านี้ก็คือ Plugin ของ Broweser Firefox นั้นเอง
1.ตรวจดูส่วนประกอบ วิธีใช้งาน เพียงคลิกขวา เเล้วเลือกที่เมนู "ตรวจดูส่วนประกอบ" จุดเด่นของเครื่องมือ :
- มีเครื่องมือหาตำแหน่งของ Class ต่างๆ จากตัวอย่างในภาพนะคะ เราจะสังเกตุเห็นว่าเมื่อเราหาตำแหน่งของ Class ได้เเล้วทางด้านขวามือ จะแสดงรายละเอียดของ CSS
- แก้ไข ปรับแต่ง เพื่อดูผลลัพท์ของ CSS ได้ทันที่
- แสดงชื่อไฟล์เเละแสดงบรรทัดที่อยู่ของ CSS นั้นๆ ด้วยๆ
- เช็ค Error ข้อผิดพลาดคำเตือนต่างๆ ของ CSS ด้วยเครื่องมือ คอนโชล
- มีโหมดการออกแบบของหน้าจอเเต่ละขนาด
2.Firebug
วิธีการใช้งาน เราจะต้องเข้าไปดาวน์โหลดเเละติดตั้ง Plugin ถึงจะมีเครื่องมือนี้ปรากฏให้ใช้งาน จุดเด่นของเครื่องมือ :
- แก้ไข ปรับแต่ง เพื่อดูผลลัพท์ของ CSS ได้ทันที่
- แสดงชื่อไฟล์เเละแสดงบรรทัดที่อยู่ของ CSS นั้นๆ ด้วย
- เช็ค Error ข้อผิดพลาดคำเตือนต่างๆ ของ CSS
** เครื่องมือนี้ค่อยข้างจะใช้งานได้ เช่นเดียวกับ "ตรวจดูส่วนประกอบ" ค่ะ ** 3. คอนโซลเบราเซอร์
วิธีใช้งาน กด Ctrl + shift + J จุดเด่นของเครื่องมือ :
- เช็ค Error ข้อผิดพลาดคำเตือนต่างๆ ของ CSS
ทั้ง 3 เครื่องมือที่ได้ทำการยกตัวอย่างมานะค่ะ สามารถทดลองใช้งานกันได้ตามความถนัดค่ะ ซึ่ง Plug in ของ FrieFox ยังมีเครื่องมือช่วยผู้พัฒนาอีกมากมายค่ะ ส่วน TIP ต่อไปจะเป็นการใช้งานของ 3 เครื่องมือนี้ ค่ะ ติดตามในบทความต่อไปค่ะ
บทความนี้จะขอเเนะนำเครื่องมือที่จะช่วยในการพัฒนา CSS คะ มีอยู่ด้วยกัน 3 เครื่องมือ ซึ่งเครื่องมือเหล่านี้ก็คือ Plugin ของ Broweser Firefox นั้นเอง
1.ตรวจดูส่วนประกอบ วิธีใช้งาน เพียงคลิกขวา เเล้วเลือกที่เมนู "ตรวจดูส่วนประกอบ" จุดเด่นของเครื่องมือ :
- มีเครื่องมือหาตำแหน่งของ Class ต่างๆ จากตัวอย่างในภาพนะคะ เราจะสังเกตุเห็นว่าเมื่อเราหาตำแหน่งของ Class ได้เเล้วทางด้านขวามือ จะแสดงรายละเอียดของ CSS
- แก้ไข ปรับแต่ง เพื่อดูผลลัพท์ของ CSS ได้ทันที่
- แสดงชื่อไฟล์เเละแสดงบรรทัดที่อยู่ของ CSS นั้นๆ ด้วยๆ
- เช็ค Error ข้อผิดพลาดคำเตือนต่างๆ ของ CSS ด้วยเครื่องมือ คอนโชล
- มีโหมดการออกแบบของหน้าจอเเต่ละขนาด
2.Firebug
วิธีการใช้งาน เราจะต้องเข้าไปดาวน์โหลดเเละติดตั้ง Plugin ถึงจะมีเครื่องมือนี้ปรากฏให้ใช้งาน จุดเด่นของเครื่องมือ :
- แก้ไข ปรับแต่ง เพื่อดูผลลัพท์ของ CSS ได้ทันที่
- แสดงชื่อไฟล์เเละแสดงบรรทัดที่อยู่ของ CSS นั้นๆ ด้วย
- เช็ค Error ข้อผิดพลาดคำเตือนต่างๆ ของ CSS
** เครื่องมือนี้ค่อยข้างจะใช้งานได้ เช่นเดียวกับ "ตรวจดูส่วนประกอบ" ค่ะ ** 3. คอนโซลเบราเซอร์
วิธีใช้งาน กด Ctrl + shift + J จุดเด่นของเครื่องมือ :
- เช็ค Error ข้อผิดพลาดคำเตือนต่างๆ ของ CSS
ทั้ง 3 เครื่องมือที่ได้ทำการยกตัวอย่างมานะค่ะ สามารถทดลองใช้งานกันได้ตามความถนัดค่ะ ซึ่ง Plug in ของ FrieFox ยังมีเครื่องมือช่วยผู้พัฒนาอีกมากมายค่ะ ส่วน TIP ต่อไปจะเป็นการใช้งานของ 3 เครื่องมือนี้ ค่ะ ติดตามในบทความต่อไปค่ะ