คุณเคยต้องการแก้ไขหน้าเว็บชั่วคราวเพื่อดูว่าจะมีสีแบบอักษรลักษณะเฉพาะหรือไม่? สิ่งนี้เป็นไปได้ด้วยเครื่องมือที่มีอยู่แล้วในเบราว์เซอร์ของคุณชื่อ " ตรวจสอบองค์ประกอบ " นี่เป็นความฝันที่เป็นจริงสำหรับผู้ใช้ทุกคนที่ต้องการจัดการ CSS

ในบทช่วยสอนนี้เราจะแนะนำคุณเกี่ยวกับพื้นฐานของการตรวจสอบรายการและวิธีใช้กับไซต์ WordPress ของคุณ

การตรวจสอบองค์ประกอบ WordPress

เครื่องมือตรวจสอบสิ่งของคืออะไร?

เบราว์เซอร์สมัยใหม่เช่น Google Chrome และ Mozilla Firefox ได้สร้างเครื่องมือที่ช่วยให้นักพัฒนาเว็บสามารถแก้ไขข้อผิดพลาดได้ เครื่องมือเหล่านี้แสดง HTML, CSS และ JavaScript สำหรับหน้าและแสดงวิธีการเรียกใช้รหัส

การใช้เครื่องมือ " ตรวจสอบธาตุ คุณสามารถแก้ไขโค้ด HTML, CSS หรือ JavaScript สำหรับเว็บเพจใดก็ได้และดูการเปลี่ยนแปลงของคุณแบบสด (แต่เพียงผู้เดียวในคอมพิวเตอร์ของคุณ).

สำหรับเจ้าของ a เว็บไซต์เว็บเครื่องมือเหล่านี้สามารถช่วยให้คุณดูตัวอย่างว่าสไตล์ใดจะมีลักษณะอย่างไรโดยไม่ต้องนำการเปลี่ยนแปลงไปใช้กับทุกคนจริงๆ

สำหรับนักเขียนเครื่องมือเหล่านี้ยอดเยี่ยมเพราะคุณสามารถเปลี่ยนข้อมูลระบุตัวบุคคลได้อย่างง่ายดายในขณะที่ถ่ายภาพหน้าจอทำให้ไม่จำเป็นต้องเบลอองค์ประกอบจริงๆ

สำหรับตัวแทนฝ่ายสนับสนุนนี่เป็นวิธีที่ดีในการระบุข้อผิดพลาดที่อาจทำให้แกลเลอรีของคุณไม่โหลดหรือป้องกันไม่ให้ทำงานอย่างถูกต้อง

เรากำลังขูดพื้นผิวของกรณีการใช้งานเท่านั้นเนื่องจากเครื่องมือ " ตรวจสอบองค์ประกอบ ทรงพลังจริงๆ

ในบทความนี้เราจะเน้นเครื่องมือ " ตรวจสอบองค์ประกอบ จาก Google Chrome เนื่องจากเป็นเบราว์เซอร์ที่เราเลือก Firefox มีเครื่องมือในการพัฒนาของตัวเองซึ่งสามารถเรียกใช้ได้โดยเลือกเมนู " ตรวจสอบองค์ประกอบ '

เปิดตัวเครื่องมือ "ตรวจสอบองค์ประกอบ" และการแปลรหัส

คุณสามารถเรียกใช้เครื่องมือนี้โดยการกด Ctrl + Shift + I บนแป้นพิมพ์ของคุณ หรือคุณสามารถคลิกที่ใดก็ได้บนเว็บเพจจากนั้นเลือกตรวจสอบรายการเมนูเบราว์เซอร์

inpection รหัส blogpascher

หน้าต่างเบราว์เซอร์ของคุณจะแบ่งออกเป็นสองส่วนและหน้าต่างด้านล่างจะแสดงซอร์สโค้ดของหน้าเว็บ

หน้าต่างเครื่องมือสำหรับนักพัฒนาจะแบ่งออกเป็นสองหน้าต่างเพิ่มเติม ทางด้านซ้ายคุณจะเห็นโค้ด HTML ของหน้า ในบานหน้าต่างด้านขวาคุณจะเห็นกฎ CSS

การตรวจสอบโค้ด HTML CSS-

ในขณะที่คุณเลื่อนเมาส์ไปเหนือซอร์สโค้ดของโค้ด HTML คุณจะเห็นพื้นที่ที่ถูกเน้นสีซึ่งไฮไลต์อยู่บนหน้าเว็บ คุณจะสังเกตเห็นกฎ CSS สำหรับองค์ประกอบนี้ด้วย

กฎ CSS ขององค์ประกอบ HTML

นอกจากนี้คุณยังสามารถใช้ตัวชี้เมาส์เหนือรายการบนเว็บเพจคลิกขวาและเลือก " ตรวจสอบองค์ประกอบ ". รายการที่คุณคลิกจะถูกเน้นในซอร์สโค้ด

นักพัฒนารหัสและนักพัฒนาดีบักเกอร์

HTML และ CSS ในหน้าต่างการตรวจสอบองค์ประกอบสามารถแก้ไขได้ คุณสามารถดับเบิลคลิกในซอร์สโค้ด HTML และแก้ไขรหัสตามที่คุณต้องการ

การแก้ไขซอร์สโค้ด HTML

คุณยังสามารถดับเบิลคลิกและแก้ไขคุณสมบัติของสไตล์ในบานหน้าต่าง CSS หากต้องการเพิ่มกฎให้คลิกไอคอนบวกที่บานหน้าต่างสไตล์ที่ด้านบน

เพิ่ม CSS ใหม่กฎ

เมื่อคุณทำการเปลี่ยนแปลงรหัส CSS หรือ HTML การเปลี่ยนแปลงเหล่านี้จะปรากฏในเบราว์เซอร์ของคุณทันที

การเปลี่ยนแปลงรหัสชีวิตอยู่

โปรดทราบว่าการเปลี่ยนแปลงที่เกิดขึ้นที่นี่ไม่ได้บันทึกไว้ เครื่องมือ ตรวจสอบองค์ประกอบ เป็นเครื่องมือดีบั๊กและไม่บันทึกการเปลี่ยนแปลงของคุณลงในไฟล์บนเซิร์ฟเวอร์ของคุณ ซึ่งหมายความว่าหากคุณรีเฟรชหน้าการเปลี่ยนแปลงทั้งหมดของคุณจะหายไป

ในการเปลี่ยนแปลงจริง คุณจะต้องแก้ไขสไตล์ของคุณ ธีม WordPress หรือเทมเพลตเพื่อเพิ่มการเปลี่ยนแปลงที่คุณต้องการบันทึก

ก่อนที่คุณจะเริ่มแก้ไข .ของคุณ ธีม WordPress ที่มีอยู่โดยใช้เครื่องมือ " ตรวจสอบองค์ประกอบ ตรวจสอบให้แน่ใจว่าได้บันทึกการเปลี่ยนแปลงทั้งหมดของคุณด้วยการสร้างธีมลูก

วิธีการหาข้อผิดพลาดใน WordPress

เครื่องมือ ตรวจสอบองค์ประกอบ มีพื้นที่ที่เรียกว่า " ปลอบใจ ซึ่งจะแสดงข้อผิดพลาดทั้งหมดที่มีอยู่ในเว็บไซต์ของคุณ ก่อนที่จะพยายามแก้ไขข้อผิดพลาดหรือขอความช่วยเหลือจากผู้แต่งชุดรูปแบบหรือปลั๊กอินคุณควรดูที่นี่เพื่อดูว่ามีอะไรผิดปกติ

คอนโซล JavaScript

ตัวอย่างเช่นหากคุณเป็นลูกค้า OptinMonster ใครสงสัยว่าทำไม optin ของเขาไม่โหลดจากนั้นคุณสามารถค้นหาปัญหาที่ระบุว่า " กระสุนของหน้าของคุณไม่ตรง '

หากแถบแชร์ของคุณทำงานไม่ถูกต้องคุณจะเห็นว่ามีข้อผิดพลาด JavaScript ที่ทำให้เกิด

นั่นคือทั้งหมดสำหรับบทช่วยสอนนี้ ฉันหวังว่าคุณจะปรับแต่ง . ของคุณได้ดีขึ้น บล็อก WordPress. อย่าลังเลที่จะแบ่งปันบทแนะนำนี้กับเพื่อนของคุณ