คุณเคยต้องการแก้ไขหน้าเว็บชั่วคราวเพื่อดูว่าจะมีสีแบบอักษรลักษณะเฉพาะหรือไม่? สิ่งนี้เป็นไปได้ด้วยเครื่องมือที่มีอยู่แล้วในเบราว์เซอร์ของคุณชื่อ " ตรวจสอบองค์ประกอบ " นี่เป็นความฝันที่เป็นจริงสำหรับผู้ใช้ทุกคนที่ต้องการจัดการ CSS
ในบทช่วยสอนนี้เราจะแนะนำคุณเกี่ยวกับพื้นฐานของการตรวจสอบรายการและวิธีใช้กับไซต์ WordPress ของคุณ
เครื่องมือตรวจสอบสิ่งของคืออะไร?
เบราว์เซอร์สมัยใหม่เช่น Google Chrome และ Mozilla Firefox ได้สร้างเครื่องมือที่ช่วยให้นักพัฒนาเว็บสามารถแก้ไขข้อผิดพลาดได้ เครื่องมือเหล่านี้แสดง HTML, CSS และ JavaScript สำหรับหน้าและแสดงวิธีการเรียกใช้รหัส
การใช้เครื่องมือ " ตรวจสอบธาตุ คุณสามารถแก้ไขโค้ด HTML, CSS หรือ JavaScript สำหรับเว็บเพจใดก็ได้และดูการเปลี่ยนแปลงของคุณแบบสด (แต่เพียงผู้เดียวในคอมพิวเตอร์ของคุณ).
สำหรับเจ้าของเว็บไซต์ เครื่องมือเหล่านี้สามารถช่วยให้คุณดูตัวอย่างว่าสไตล์หนึ่งๆ จะมีลักษณะอย่างไรได้โดยไม่ต้องนำการเปลี่ยนแปลงนั้นไปใช้กับทุกคนจริงๆ
สำหรับนักเขียนเครื่องมือเหล่านี้ยอดเยี่ยมเพราะคุณสามารถเปลี่ยนข้อมูลระบุตัวบุคคลได้อย่างง่ายดายในขณะที่ถ่ายภาพหน้าจอทำให้ไม่จำเป็นต้องเบลอองค์ประกอบจริงๆ
สำหรับตัวแทนฝ่ายสนับสนุนนี่เป็นวิธีที่ดีในการระบุข้อผิดพลาดที่อาจทำให้แกลเลอรีของคุณไม่โหลดหรือป้องกันไม่ให้ทำงานอย่างถูกต้อง
เรากำลังขูดพื้นผิวของกรณีการใช้งานเท่านั้นเนื่องจากเครื่องมือ " ตรวจสอบองค์ประกอบ ทรงพลังจริงๆ
ในบทความนี้เราจะเน้นเครื่องมือ " ตรวจสอบองค์ประกอบ จาก Google Chrome เนื่องจากเป็นเบราว์เซอร์ที่เราเลือก Firefox มีเครื่องมือในการพัฒนาของตัวเองซึ่งสามารถเรียกใช้ได้โดยเลือกเมนู " ตรวจสอบองค์ประกอบ '
เปิดตัวเครื่องมือ "ตรวจสอบองค์ประกอบ" และการแปลรหัส
คุณสามารถเรียกใช้เครื่องมือนี้โดยการกด Ctrl + Shift + I บนแป้นพิมพ์ของคุณ หรือคุณสามารถคลิกที่ใดก็ได้บนเว็บเพจจากนั้นเลือกตรวจสอบรายการเมนูเบราว์เซอร์
หน้าต่างเบราว์เซอร์ของคุณจะแบ่งออกเป็นสองส่วนและหน้าต่างด้านล่างจะแสดงซอร์สโค้ดของหน้าเว็บ
หน้าต่างเครื่องมือสำหรับนักพัฒนาจะแบ่งออกเป็นสองหน้าต่างเพิ่มเติม ทางด้านซ้ายคุณจะเห็นโค้ด HTML ของหน้า ในบานหน้าต่างด้านขวาคุณจะเห็นกฎ CSS
ในขณะที่คุณเลื่อนเมาส์ไปเหนือซอร์สโค้ดของโค้ด HTML คุณจะเห็นพื้นที่ที่ถูกเน้นสีซึ่งไฮไลต์อยู่บนหน้าเว็บ คุณจะสังเกตเห็นกฎ CSS สำหรับองค์ประกอบนี้ด้วย
นอกจากนี้คุณยังสามารถใช้ตัวชี้เมาส์เหนือรายการบนเว็บเพจคลิกขวาและเลือก " ตรวจสอบองค์ประกอบ ". รายการที่คุณคลิกจะถูกเน้นในซอร์สโค้ด
นักพัฒนารหัสและนักพัฒนาดีบักเกอร์
HTML และ CSS ในหน้าต่างการตรวจสอบองค์ประกอบสามารถแก้ไขได้ คุณสามารถดับเบิลคลิกในซอร์สโค้ด HTML และแก้ไขรหัสตามที่คุณต้องการ
คุณยังสามารถดับเบิลคลิกและแก้ไขคุณสมบัติของสไตล์ในบานหน้าต่าง CSS หากต้องการเพิ่มกฎให้คลิกไอคอนบวกที่บานหน้าต่างสไตล์ที่ด้านบน
เมื่อคุณทำการเปลี่ยนแปลงรหัส CSS หรือ HTML การเปลี่ยนแปลงเหล่านี้จะปรากฏในเบราว์เซอร์ของคุณทันที
โปรดทราบว่าการเปลี่ยนแปลงที่เกิดขึ้นที่นี่ไม่ได้บันทึกไว้ เครื่องมือ ตรวจสอบองค์ประกอบ เป็นเครื่องมือดีบั๊กและไม่บันทึกการเปลี่ยนแปลงของคุณลงในไฟล์บนเซิร์ฟเวอร์ของคุณ ซึ่งหมายความว่าหากคุณรีเฟรชหน้าการเปลี่ยนแปลงทั้งหมดของคุณจะหายไป
หากต้องการดำเนินการเปลี่ยนแปลงจริง คุณจะต้องแก้ไขรูปแบบของธีมหรือเทมเพลต WordPress ของคุณเพื่อเพิ่มการเปลี่ยนแปลงที่คุณต้องการบันทึก
ก่อนที่คุณจะเริ่มแก้ไขธีม WordPress ที่มีอยู่ของคุณโดยใช้ “ ตรวจสอบองค์ประกอบ ตรวจสอบให้แน่ใจว่าได้บันทึกการเปลี่ยนแปลงทั้งหมดของคุณด้วยการสร้างธีมลูก
วิธีการหาข้อผิดพลาดใน WordPress
เครื่องมือ ตรวจสอบองค์ประกอบ มีพื้นที่ที่เรียกว่า " ปลอบใจ ซึ่งจะแสดงข้อผิดพลาดทั้งหมดที่มีอยู่ในเว็บไซต์ของคุณ ก่อนที่จะพยายามแก้ไขข้อผิดพลาดหรือขอความช่วยเหลือจากผู้แต่งชุดรูปแบบหรือปลั๊กอินคุณควรดูที่นี่เพื่อดูว่ามีอะไรผิดปกติ
ตัวอย่างเช่นหากคุณเป็นลูกค้า OptinMonster ใครสงสัยว่าทำไม optin ของเขาไม่โหลดจากนั้นคุณสามารถค้นหาปัญหาที่ระบุว่า " กระสุนของหน้าของคุณไม่ตรง '
หากแถบแชร์ของคุณทำงานไม่ถูกต้องคุณจะเห็นว่ามีข้อผิดพลาด JavaScript ที่ทำให้เกิด
เท่านี้ก็เรียบร้อยแล้วสำหรับบทช่วยสอนนี้ ฉันหวังว่าคุณจะสามารถปรับแต่งบล็อก WordPress ของคุณได้ดียิ่งขึ้น โปรดแชร์บทช่วยสอนนี้กับเพื่อนๆ ของคุณ
