วิธีการตรวจสอบเว็บไซต์อย่างถูกต้อง

ไม่ว่าคุณจะเป็นนักพัฒนาที่ทดสอบฟีเจอร์ใหม่ๆ ในโครงการหรือนักออกแบบที่ต้องการดูโค้ด HTML และ CSS ให้ละเอียดยิ่งขึ้น มีเหตุผลมากมายในการตรวจสอบเว็บไซต์และองค์ประกอบต่างๆ อย่างไรก็ตาม การรู้ว่าจะเริ่มต้นจากจุดไหนอาจดูสับสน (ในตอนแรก)

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

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

ทำไมคุณควรตรวจสอบเว็บไซต์

มีหลายสาเหตุที่คุณอาจต้องการตรวจสอบเว็บไซต์ ตัวอย่างเช่น คุณอาจต้องแก้ไขปัญหาหรือค้นหาข้อมูลบางอย่าง

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

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

นอกจากนี้ นักการตลาดดิจิทัลสามารถใช้เครื่องมือ Inspect Element เพื่อดูว่าการเปลี่ยนแปลงบางอย่างจะส่งผลต่อรูปลักษณ์โดยรวมของหน้าเว็บอย่างไร ตัวอย่างเช่น คุณอาจต้องการลองใช้ปุ่ม Call To Action (CTA) ใหม่หรือรูปแบบสีอื่น คุณสามารถใช้เครื่องมือเพื่อทำซ้ำการอัปเดตโดยไม่ต้องทำการเปลี่ยนแปลงใด ๆ กับไซต์สดของคุณ

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

เครื่องมือและส่วนขยายที่ดีที่สุดในการตรวจสอบเว็บไซต์

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

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

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

แม้ว่าจะมีให้บริการในรูปแบบส่วนขยายของ Google Chrome แต่เครื่องมือ Inspect Element ยังมาพร้อมกับเบราว์เซอร์หลักทั้งหมด คุณลักษณะนี้เป็นส่วนหนึ่งของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ซึ่งเป็นชุดโปรแกรมที่ช่วยให้คุณสามารถตรวจสอบและแก้ไขโค้ด HTML และ CSS ของหน้าเว็บได้

หากต้องการเข้าถึงเครื่องมือสำหรับนักพัฒนา Google Chrome เพียงกด Ctrl+Shift+I (หรือ Cmd+Opt+I บน Mac) คุณยังสามารถเข้าถึงเครื่องมือได้โดยเปิดเมนู Chrome และเลือก เครื่องมือเพิ่มเติม > เครื่องมือสำหรับนักพัฒนา :

คุณสามารถเข้าถึงเครื่องมือสำหรับนักพัฒนาเดียวกันได้ในเบราว์เซอร์อื่นๆ ตัวอย่างเช่น Firefox Developer Tools มีคุณสมบัติที่คล้ายกัน หากต้องการเข้าถึงเครื่องมือ เพียงกด Ctrl+Shift+I (หรือ Cmd+Opt+I บน Mac) คุณสามารถค้นหาเครื่องมือได้โดยเปิดเมนู Firefox และเลือก Web Developer > Inspector

นอกจากนี้ Safari Developer Tools ยังให้คุณตรวจสอบและแก้ไขโค้ด HTML และ CSS ของหน้าเว็บบนอุปกรณ์ Mac เพียงแค่กด Cmd+Opt+I คุณยังสามารถเปิดเมนู Safari และเลือก การตั้งค่า > ขั้นสูง > แสดงเมนูพัฒนาในแถบเมนู

BrowserStack

อีกแพลตฟอร์มหนึ่งที่คุณสามารถใช้สำหรับการทดสอบเว็บไซต์คือ BrowserStack:

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

จากนั้น คุณสามารถเลือกเวอร์ชันเบราว์เซอร์ที่ต้องการเพื่อเปิดเซสชันสดในเบราว์เซอร์ของคุณ สุดท้าย คุณสามารถไปยังเว็บไซต์ที่คุณต้องการตรวจสอบได้เช่นเดียวกับที่คุณทำผ่าน Inspect Element

วิธีตรวจสอบเว็บไซต์

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

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

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

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

คุณยังสามารถเข้าถึงเครื่องมือได้โดยกด Ctrl+Shift+I (หรือ Cmd+Opt+I บน Mac) เพื่อเปิด เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ จากนั้นคลิกที่แท็บ องค์ประกอบ ที่ด้านบนของหน้าต่าง:

สุดท้าย คุณยังสามารถเข้าถึง Inspect Element ได้โดยเปิดเมนู Chrome และเลือก More tools > Developer tools ซึ่งเราได้กล่าวถึงก่อนหน้านี้

วิธีเปลี่ยนองค์ประกอบ

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

เมื่อคุณเปิดช่อง องค์ประกอบ คุณสามารถใช้ไอคอนตรวจสอบเคอร์เซอร์ที่ด้านซ้ายบนของแผงเพื่อเน้นซอร์สโค้ดขององค์ประกอบที่คุณต้องการแก้ไข เมื่อคุณคลิกขวาที่โค้ดที่ไฮไลต์ เลือก แก้ไขเป็น HTML :

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

คุณยังสามารถใช้เทคนิคนี้เพื่อเปลี่ยนรหัส CSS สำหรับองค์ประกอบ ในการทำเช่นนี้ ให้คลิกขวาที่มันแล้วเลือก ตรวจสอบ ในแผงองค์ประกอบ ให้ค้นหาองค์ประกอบที่คุณต้องการเปลี่ยนและเลือกคุณสมบัติ element.style จากนั้นคุณสามารถเพิ่มรหัสหรือการประกาศของคุณในวงเล็บปีกกา

วิธีซ่อนหรือลบองค์ประกอบ

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

จากที่นี่ คลิกขวาที่องค์ประกอบ จากนั้นเลือกตัวเลือก ลบ องค์ประกอบ หรือ ซ่อนองค์ประกอบ :

ปุ่ม Delete จะลบองค์ประกอบ Document Object Model (DOM) ปุ่ม ซ่อน จะซ่อนองค์ประกอบแต่จะยังคงอยู่ใน DOM

วิธีตรวจสอบคลาส CSS

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

โปรดทราบว่าแท็บนี้จะแสดงให้คุณเห็นเฉพาะสไตล์อินไลน์ที่นำไปใช้ ไม่ใช่สไตล์ที่มาจากสไตล์ชีต

หากคุณต้องการดูสไตล์ CSS ทั้งหมดที่ใช้กับองค์ประกอบ คุณสามารถใช้แท็บ คำนวณ มันแสดงให้คุณเห็นสไตล์ CSS ทั้งหมดที่ใช้กับองค์ประกอบ รวมถึงสไตล์ชีต:

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

สิ่งที่ต้องมองหาเมื่อตรวจสอบเว็บไซต์

ไม่ว่าคุณจะใช้วิธีใดในการเข้าถึง Inspect Element คุณจะเห็นอินเทอร์เฟซเดียวกัน ประกอบด้วยสองบานหน้าต่าง: บานหน้าต่าง HTML และบานหน้าต่าง CSS

บานหน้าต่าง HTML แสดงโครงสร้างของหน้าเว็บ คุณสามารถดูได้ว่าองค์ประกอบต่างๆ ซ้อนกันและสัมพันธ์กันอย่างไร

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

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

เมื่อคุณตรวจสอบเว็บไซต์ มีบางสิ่งที่ควรทราบ:

• HTML: รหัสที่กำหนดโครงสร้างของหน้าเว็บ ให้ความสนใจกับวิธีการจัดองค์ประกอบและการโต้ตอบระหว่างกัน
• CSS: รหัสที่กำหนดสไตล์ของหน้าเว็บ
• JavaScript : รหัสที่กำหนดพฤติกรรมของหน้าเว็บ มันมีอิทธิพลต่อการโต้ตอบขององค์ประกอบและวิธีที่เพจตอบสนองต่อการป้อนข้อมูลของผู้ใช้
• การออกแบบ : รูปลักษณ์โดยรวมของเว็บไซต์ มีอิทธิพลต่อการจัดวางที่เป็นมิตรต่อผู้ใช้และเหมาะสมกับวัตถุประสงค์ของเว็บไซต์เพียงใด
• เนื้อหา: ข้อความ รูปภาพ และสื่ออื่นๆ ของเว็บไซต์

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

บทสรุป

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

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

คุณต้องการความช่วยเหลือเกี่ยวกับการจัดการหรือการเพิ่มประสิทธิภาพเว็บไซต์ของคุณหรือไม่? เรียนรู้ว่า WP Engine สามารถช่วยเหลือทุกอย่างตั้งแต่โฮสติ้ง WordPress ไปจนถึงการจัดการไซต์และลูกค้าได้อย่างไร!