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

CSS Knowledge เป็น บอร์ดรวามความรู้ CCC เน้นบทความ แนวทางการเขียนโปรแกรม บันทึกกันลืม เพื่อให้สมาชิกได้เขียนความรู้ที่ตัวเองมีให้สมาชิกท่านอื่นๆ ได้ เข้ามาอ่าน และ ไว้อ่านเองกันลืมด้วย

Moderators: mindphp, ผู้ดูแลกระดาน

thatsawan
PHP VIP Members
PHP VIP Members
Posts: 19452
Joined: 31/03/2014 10:02 am
Contact:

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

Post by thatsawan » 06/01/2015 5:12 pm

สำหรับใครหลายๆคนที่กำลังเริ่มต้นกับการพัฒนาเว็บไซต์ด้วยการปรับเเต่ง 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 780 times
วิธีใช้งาน เพียงคลิกขวา เเล้วเลือกที่เมนู "ตรวจดูส่วนประกอบ"
6-1-2558 16-39-53.jpg
6-1-2558 16-39-53.jpg (218.62 KiB) Viewed 780 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 780 times
6-1-2558 16-52-00.jpg
6-1-2558 16-52-00.jpg (186.69 KiB) Viewed 780 times

2.Firebug

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

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

ทั้ง 3 เครื่องมือที่ได้ทำการยกตัวอย่างมานะค่ะ สามารถทดลองใช้งานกันได้ตามความถนัดค่ะ ซึ่ง Plug in ของ FrieFox ยังมีเครื่องมือช่วยผู้พัฒนาอีกมากมายค่ะ ส่วน TIP ต่อไปจะเป็นการใช้งานของ 3 เครื่องมือนี้ ค่ะ ติดตามในบทความต่อไปค่ะ
Last edited by thatsawan on 07/01/2015 9:37 am, edited 1 time in total.

User avatar
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
Posts: 22300
Joined: 22/09/2008 6:18 pm
Contact:

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

Post by mindphp » 07/01/2015 1:37 am

ใช้ คู่กับ ความรู้ เรื่อง css


https://www.youtube.com/watch?v=-LV7wMquEtM
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042

Post Reply
  • Similar Topics
    Replies
    Views
    Last post

Return to “CSS Knowledge”

Who is online

Users browsing this forum: No registered users and 8 guests