ใช้ Inspect Element ช่วยแก้ไข CSS กันเถอะ ทำงานเร็วกว่าเยอะ
นักพัฒนาเว็บไซต์ love เครื่องมือนี้บน browser กันมั่กมาก มันคือ “Inspect Element” หรือ “Developer Tools” ช่วยคนทำเว็บ save เวลางมโค้ดได้เยอะมาก ลดความเสี่ยงแก้โค้ดผิดที่ ไม่ต้องโยนไฟล์กลับไปกลับมา จอร์จใจจริงๆ เอาไปเลย 5 ดาว
Inspect Element เป็นการจำลองการแก้ไขโค้ดว่าออกมาแล้วจะได้ผลลัพธ์แบบไหน refresh หน้าจอก็หายไป ไม่มีผลกระทบกับหน้าเว็บจริงจนกว่าเราจะอัพโหลดตัวที่แก้ไขใหม่ขึ้นไปแทนที่
Inspect Element มันช่วยอะไรเราได้บ้าง?
- ช่วยให้เรา แก้ไข HTML + CSS ได้ง่ายขึ้น preview กันสดๆ ชอบใจแล้วค่อยเข้าไปแก้ไขที่ไฟล์จริง
- ช่วยจับ element ต่างๆ ให้เรารู้ว่าจะไปต่อที่ <tag> ไหน หรือต้องเข้าไปแก้ไขที่ไฟล์ไหนของ WordPress Theme
- ช่วยแกะ code สบายบรื๋อ
- พรีวิวหน้าจอ Mobile, Tablet หรือกำหนดขนาดหน้าจอเองก็ได้ เริ่ดแมะ
- ตรวจดู Errors, Warnings, Log ได้
- ตรวจสอบความเร็วการโหลดหน้าเว็บได้ แยกเป็นชิ้นๆ ให้เลย
(สามารถเปิด Inspect Element ที่เว็บของชาวบ้านเค้าได้ด้วยนะ แล้วส่องดูซิว่าของใครเร็วกว่ากัน อิอิ)
วิธีใช้ : Inspect Element บน Chrome และ Firefox
- กด F12 เรียก Inspect Element ขึ้นมา
หรือกำหนดตำแหน่งไปเลยโดยคลิกขวา ตรงส่วนที่เราต้องการ แล้วเลือก Inspect element - ก็จะขึ้นจอมาทันที! ทีนี้ล่ะสนุก จัดไปตามใจปรารถนา (จะลองเปลี่ยนสี เพิ่มขนาดฟอนต์ ได้หมดจ้า)
- เสร็จแล้วก็จำค่าแต่ละตัวที่เราปรับแก้เอาไว้
(จดใส่กระดาษ หรือ save ไว้ใน text file ก่อนก็ได้) แล้วนำไปแก้ไขที่ไฟล์จริง - อัพโหลดขึ้นไปทับไฟล์เก่า เป็นอันเสร็จเรียบร้อย
// ถ้าใช้ WordPress ก็ง่ายเลย โดยเข้าไปแก้ไขที่ Editor ของ theme ได้เลย
สำหรับ WordPress
เราเพิ่ม CSS เข้าไปได้เลย โดยที่ไม่ต้องไปยุ่งกับ CSS เดิมๆ ที่มากับ theme … วิธีคือ
- เข้าหลังบ้าน WordPress แล้วไปตามทางนี้นะ (เฉพาะธีมที่รองรับ)
เมนู Appearance / Customize / Additional CSS (อยู่ล่างๆ หน่อย)
- สำหรับธีมพรีเมี่ยม (ซื้อ) ที่มี เมนู Custom CSS สามารถเอาไปวางตรงนี้ได้เหมือนกันค่ะ
ส่วนใหญ่อยู่ใน Theme Options ชื่อเรียกอาจแตกต่างกันในแต่ละธีม
*** อย่าลืม backup ของเดิมก่อนนะฮะ ***
Inspect Element : แก้ไข HTML + CSS ได้จนกว่าจะพอใจ
พร้อม preview กันสดๆ ถ้าไม่ชอบใจก็แค่ refresh หน้าจอ แล้วแก้ใหม่
Additional CSS ที่หลังบ้าน WordPress (เฉพาะธีมที่รองรับ)
Theme Options ในธีมพรีเมี่ยม
- Premium WordPress Themes ส่วนใหญ่ จะมี Theme Options ให้ปรับแต่ง CSS ได้
- เราก็แค่ copy CSS ที่ทำใน inspect มาวาง แล้ว Save (เอาเฉพาะที่ปรับเปลี่ยนมาวาง ไม่ต้องทั้งหมดนะคะ)
- หล่อขึ้นทันทีค่ะ
ถ้าใช้ Theme ที่ไม่มีให้แก้ไข CSS ตรงหลังบ้านได้ ทำไงดี?
- ก็ต้องใช้วิธีทำ style.css ของเราเอง
- แล้ว up ขึ้น hosting เอาไปวางไว้ใน Child Theme นะฮะ
สำหรับคนที่ใช้ Theme Astra (เวอร์ชั่นฟรี) คลิกดู วิธีการทำ Child Theme ได้เลยจ้า
Inspect : ตรวจดู Errors, Warnings, Log ได้
- Tab-Console
Inspect : ตรวจสอบความเร็วการโหลดหน้าเว็บได้
- Tab-Network
Inspect Element หรือ Developer Tools นอกจากเป็นเครื่องมือช่วย preview การปรับแก้ HTML + CSS แล้ว ยังมีความสามารถอื่นๆ ที่จำเป็นสำหรับ Web Developer อยู่มากมาย มีให้ใช้กันทุก browser วิธีใช้คือๆ กัน แล้วแต่ความชอบ ความถนัดเลยค่ะ … สำหรับพี่ยุ้ยเองใช้สลับกันระหว่าง Firefox กับ Chrome เพราะดูง่ายดี ใช้แก้ CSS + เจาะโค้ด theme WordPress ใส่ banner เองประจำ อิอิ :)
Tips:
- ใช้คู่กับ ColorZilla ของ Firefox แล้วยิ่งพริ้ว มันช่วยดูดสีตามหน้าเว็บที่เราชอบแล้ว copy โค้ดสีออกมาใส่ Inspect Element ได้เลย
- สำหรับ WordPress หากมีการแก้ CSS ของ theme แล้ว ต้องระวังเรื่องการอัพเดท theme! เพราะจะถูกแทนที่ด้วยค่า default ของ theme ตัวที่อัปเดตมาใหม่ ส่วนใหญ่แล้วเอา style.css อันเดิมทับตัวใหม่ได้ แต่บาง theme มีการอัปเดตโครงสร้าง CSS ใหม่ด้วย ทับแล้ว error พังทันที ต้องดูดีๆ นะ
- แต่จะไม่เป็นปัญหาเมื่อเราทำ Child Theme เวลาแก้ style หรือ css อะไร ก็มาทำที่ Child Theme ที่เราสร้างไว้ แบบนี้เวลาเราอัปเดต theme จะไม่ถูกทับจ้า (แนะนำอย่างแรง ให้ทุกคนทำ Child Theme ตั้งแต่แรกเลยนะคะ อัปเดตธีมจะได้ไม่บ้ง)
- อ่านบทความ อยากรู้ว่าสีแบบนี้ใช้โค้ดอะไร ใช้ตัวดูดสี ColorZilla ดูสิ
บทความ/รูปภาพ : Webmonster Lab | Yui Kanchita
