2024 ทำไม แก ไขท css บนบราวเซอร แล วกดsubmit ได

Inspect Element เป็นการจำลองการแก้ไขโค้ดว่าออกมาแล้วจะได้ผลลัพธ์แบบไหน refresh หน้าจอก็หายไป ไม่มีผลกระทบกับหน้าเว็บจริงจนกว่าเราจะอัพโหลดตัวที่แก้ไขใหม่ขึ้นไปแทนที่

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

วิธีใช้ : Inspect Element บน Chrome และ Firefox

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

   // ถ้าใช้ WordPress ก็ง่ายเลย โดยเข้าไปแก้ไขที่ Editor ของ theme ได้เลย

   สำหรับ WordPress เราเพิ่ม CSS เข้าไปได้เลย โดยที่ไม่ต้องไปยุ่งกับ CSS เดิมๆ ที่มากับ theme … วิธีคือ

*** อย่าลืม 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 เองประจำ อิอิ :)