ใช้ Inspect Element ช่วยแก้ไข CSS กันเถอะ ทำงานเร็วกว่าเยอะ

ใช้ Inspect Element ช่วยแก้ไข CSS กันเถอะ ทำงานเร็วกว่าเยอะ

posted in: All Posts, Tips & Trick | 0 13,539 views

นักพัฒนาเว็บไซต์ love เครื่องมือนี้บน browser กันมั่กมาก มันคือ “Inspect Element” หรือ “Developer Tools” ช่วยคนทำเว็บ save เวลางมโค๊ดได้เยอะมาก ลดความเสี่ยงแก้โค๊ดผิดที่ ไม่ต้องโยนไฟล์กลับไปกลับมา จอร์จใจจริงๆ เอาไปเลย 5 ดาว      
 
Inspect Element เป็นการจำลองการแก้ไขโค๊ดว่าออกมาแล้วจะได้ผลลัพธ์แบบไหน refresh หน้าจอก็หายไป ไม่มีผลกระทบกับหน้าเว็บจริงจนกว่าเราจะอัพโหลดตัวที่แก้ไขใหม่ขึ้นไปแทนที่
 
Inspect Element มันช่วยอะไรเราได้บ้าง?

  • ช่วยให้เราแก้ไข HTML + CSS ได้ง่ายขึ้น preview กันสดๆ ชอบใจแล้วค่อยเข้าไปแก้ไขที่ไฟล์จริง
  • ช่วยจับ element ต่างๆ ให้เรารู้ว่าจะไปต่อที่ <tag> ไหน หรือต้องเข้าไปแก้ไขที่ไฟล์ไหนของ WordPress Theme
  • ช่วยแกะ code สบายบรื๋อ
  • ตรวจดู Errors, Warnings, Log ได้
  • ตรวจสอบความเร็วการโหลดหน้าเว็บได้ แยกเป็นชิ้นๆ ให้เลย
    (สามารถเปิด Inspect Element ที่เว็บของชาวบ้านเค้าได้ด้วย แล้วดูซิว่าของใครเร็วกว่ากัน)

 

inspect-element-tool-chrome-rightclick2
วิธีใช้ : Inspect Element บน Chrome

1. กด F12 เรียก Inspect Element ขึ้นมา
หรือกำหนดตำแหน่งไปเลยโดยคลิกขวา ตรงที่เราต้องการ แล้วเลือก Inspect element
2. BOOM! จัดไปตามใจปรารถนา
3. เสร็จแล้วก็จำค่าแต่ละตัวที่เราปรับแก้เอาไว้ (จะจดใส่กระดาษ หรือ save ไว้ใน text file ก่อนก็ได้)
แล้วนำไปแก้ไขที่ไฟล์จริง
4. อัพโหลดขึ้นไปทับไฟล์เก่า เป็นอันเสร็จเรียบร้อย / ถ้าใช้ WordPress ก็เข้าไปแก้ไขที่ Editor ของ theme ได้เลย

*** อย่าลืม backup ของเดิมก่อน ***

 

 

inspect-element-tool-firefox-rightclick2
วิธีใช้ : Inspect Element บน Firefox

1. สำหรับ Firefox ต้องไป Add-ons: Firebug กันมาก่อน
2. กด Ctrl+Shift+Q แล้วไปที่แท็บ Inspect Element
หรือกำหนดตำแหน่งไปเลยโดยคลิกขวา ตรงที่เราต้องการ แล้วเลือก Inspect element
3. เลือกปรับแก้ตามใจชอบ
4. เสร็จแล้วก็จำค่าแต่ละตัวที่เราปรับแก้เอาไว้ แล้วนำไปแก้ไขที่ไฟล์จริง
5. อัพโหลดขึ้นไปทับไฟล์เก่า เป็นอันเสร็จเรียบร้อย / ถ้าใช้ WordPress ก็เข้าไปแก้ไขที่ Editor ของ theme ได้เลย

*** อย่าลืม backup ของเดิมก่อน ***

 

 

 

Inspect Element : แก้ไข HTML + CSS ได้จนกว่าจะพอใจ พร้อม preview กันสดๆ ถ้าไม่ชอบใจก็แค่ refresh หน้าจอ แล้วแก้ใหม่

inspect-element-tool-firefox

 

ตรวจดู Errors, Warnings, Log ได้

inspect-element-tool-firefox-log

 

Network ตรวจสอบความเร็วการโหลดหน้าเว็บ

inspect-element-tool-firefox-network

 

Inspect Element หรือ Developer Tools นอกจากเป็นเครื่องมือช่วย preview การปรับแก้ HTML + CSS แล้ว ยังมีความสามารถอื่นๆ ที่จำเป็นสำหรับ Web Developer อยู่มากมาย มีให้ใช้กันทุก browser วิธีใช้คือๆ กัน แล้วแต่ชอบ …สำหรับพี่ยุ้ยเองใช้สลับกันระหว่าง Chrome และ Firefox เพราะดูง่ายดี ใช้แก้ CSS + เจาะโค๊ด theme WordPress ใส่ banner เองประจำ อิอิ :)

 

Tips:

  • ใช้คู่กับ ColorZilla ของ Firefox แล้วยิ่งพริ้ว มันช่วยดูดสีตามหน้าเว็บที่เราชอบแล้ว copy โค๊ดสีออกมาใส่ Inspect Element ได้เลย
  • สำหรับ WordPress หากมีการแก้ CSS ของ theme แล้ว ต้องระวังเรื่องการอัพเดท theme! เพราะจะถูกแทนที่ด้วย default ของ theme ตัวที่อัพเดทมาใหม่ ส่วนใหญ่แล้วเอา style.css อันเดิมทับตัวใหม่ได้ แต่บาง theme มีการอัพเดทโครงสร้าง CSS ใหม่ด้วย ทับแล้ว error ทันที ต้องดูดีๆ นะ

 

บทความ/รูปภาพ : Webmonster Lab | Yui K Dev

 

อยากรู้ว่าสีแบบนี้ใช้โค๊ดอะไร ใช้ตัวดูดสี ColorZilla ดูสิ
WordPress E-Commerce Plugins ตัวไหนชนะเลิศ

Comments

comments