หน้า 1 จากทั้งหมด 1

TIP : เครื่องมือสำหรับดู css บน FireFox

โพสต์แล้ว: 06/01/2015 5:12 pm
โดย thatsawan
สำหรับใครหลายๆคนที่กำลังเริ่มต้นกับการพัฒนาเว็บไซต์ด้วยการปรับเเต่ง CSS ต่างๆ ที่นี่ในการเขียน CSS หลายๆคนอาจจะประสบณ์ปัญหาในการเช็ค CSS ว่าของเรานั้นเขียนถูกต้องมั้ย !! หากต้องการแก้ไขจะดูผลลัพท์เเต่ละทีก็ต้องมาเปิด Code แก้ไข เเล้วทำการ RUN ใหม่ ซึ่งมันก็คงน่าเบื่อใช่มั้ยค่ะ
บทความนี้จะขอเเนะนำเครื่องมือที่จะช่วยในการพัฒนา CSS คะ มีอยู่ด้วยกัน 3 เครื่องมือ ซึ่งเครื่องมือเหล่านี้ก็คือ Plugin ของ Broweser Firefox นั้นเอง
1.ตรวจดูส่วนประกอบ
6-1-2558 16-43-52.jpg
6-1-2558 16-43-52.jpg (103.5 KiB) Viewed 1401 times
วิธีใช้งาน เพียงคลิกขวา เเล้วเลือกที่เมนู "ตรวจดูส่วนประกอบ"
6-1-2558 16-39-53.jpg
6-1-2558 16-39-53.jpg (218.62 KiB) Viewed 1401 times
จุดเด่นของเครื่องมือ :
- มีเครื่องมือหาตำแหน่งของ Class ต่างๆ จากตัวอย่างในภาพนะคะ เราจะสังเกตุเห็นว่าเมื่อเราหาตำแหน่งของ Class ได้เเล้วทางด้านขวามือ จะแสดงรายละเอียดของ CSS
- แก้ไข ปรับแต่ง เพื่อดูผลลัพท์ของ CSS ได้ทันที่
- แสดงชื่อไฟล์เเละแสดงบรรทัดที่อยู่ของ CSS นั้นๆ ด้วยๆ
- เช็ค Error ข้อผิดพลาดคำเตือนต่างๆ ของ CSS ด้วยเครื่องมือ คอนโชล
- มีโหมดการออกแบบของหน้าจอเเต่ละขนาด
6-1-2558 16-52-00.jpg
6-1-2558 16-52-00.jpg (186.69 KiB) Viewed 1401 times
6-1-2558 16-52-00.jpg
6-1-2558 16-52-00.jpg (186.69 KiB) Viewed 1401 times

2.Firebug

วิธีการใช้งาน เราจะต้องเข้าไปดาวน์โหลดเเละติดตั้ง Plugin ถึงจะมีเครื่องมือนี้ปรากฏให้ใช้งาน
6-1-2558 16-58-23.jpg
6-1-2558 16-58-23.jpg (193.78 KiB) Viewed 1401 times
จุดเด่นของเครื่องมือ :
- แก้ไข ปรับแต่ง เพื่อดูผลลัพท์ของ CSS ได้ทันที่
- แสดงชื่อไฟล์เเละแสดงบรรทัดที่อยู่ของ CSS นั้นๆ ด้วย
- เช็ค Error ข้อผิดพลาดคำเตือนต่างๆ ของ CSS

** เครื่องมือนี้ค่อยข้างจะใช้งานได้ เช่นเดียวกับ "ตรวจดูส่วนประกอบ" ค่ะ **
6-1-2558 17-03-17.jpg
6-1-2558 17-03-17.jpg (143.69 KiB) Viewed 1401 times
3. คอนโซลเบราเซอร์
วิธีใช้งาน กด Ctrl + shift + J
6-1-2558 17-10-15.jpg
6-1-2558 17-10-15.jpg (127.37 KiB) Viewed 1401 times
จุดเด่นของเครื่องมือ :
- เช็ค Error ข้อผิดพลาดคำเตือนต่างๆ ของ CSS

ทั้ง 3 เครื่องมือที่ได้ทำการยกตัวอย่างมานะค่ะ สามารถทดลองใช้งานกันได้ตามความถนัดค่ะ ซึ่ง Plug in ของ FrieFox ยังมีเครื่องมือช่วยผู้พัฒนาอีกมากมายค่ะ ส่วน TIP ต่อไปจะเป็นการใช้งานของ 3 เครื่องมือนี้ ค่ะ ติดตามในบทความต่อไปค่ะ

Re: TIP : เครื่องมือสำหรับดู css บน FireFox

โพสต์แล้ว: 07/01/2015 1:37 am
โดย mindphp
ใช้ คู่กับ ความรู้ เรื่อง css


https://www.youtube.com/watch?v=-LV7wMquEtM