วิธีตรวจสอบองค์ประกอบบน Chrome, Firefox, Safari และ Edge

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

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

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

องค์ประกอบการตรวจสอบสำหรับเว็บเบราว์เซอร์ใด ๆ คืออะไร?

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

คุณสามารถอ่านโค้ดเพื่อทำความเข้าใจว่าโค้ดกำลังทำอะไรอยู่เบื้องหลัง ผู้เชี่ยวชาญส่วนใหญ่ใช้เครื่องมือนี้เพื่อแก้ไขซอร์สโค้ดของเว็บไซต์ใดๆ ซอร์สโค้ดอาจรวมถึง Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), ไฟล์มีเดีย, JavaScriptเป็นต้น

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

ใครควรรู้วิธีตรวจสอบองค์ประกอบและทำไม

คุณต้องทราบวิธีการตรวจสอบองค์ประกอบบนหน้าเว็บ หากคุณมาจากอาชีพต่อไปนี้: 

1. ผู้สร้างเนื้อหาและนักเขียน

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

2. ผู้พัฒนาเว็บไซต์

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

3. ตัวแทนฝ่ายสนับสนุนลูกค้า

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

4. เว็บไซต์และนักออกแบบกราฟิก

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

5. นักการตลาดดิจิทัล

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

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

วิธีตรวจสอบองค์ประกอบบน Chrome

• เยี่ยมชมเว็บไซต์ที่คุณต้องการใช้เครื่องมือตรวจสอบองค์ประกอบ
• เลือกองค์ประกอบใดก็ได้ เช่น ข้อความ รูปภาพ ไฮเปอร์ลิงก์ ฯลฯ

• ตอนนี้คลิกขวาแล้วเลือกตรวจสอบจากเมนูบริบท

• บาน หน้าต่างนำทาง Elementsจะเปิดขึ้นทางด้านขวาโดยแสดงรหัสจำนวนมาก

• รหัสที่มีไฮไลท์สีน้ำเงินคือองค์ประกอบที่คุณเลือกบนเว็บไซต์

• เพียงคลิก ปุ่ม ปิด (กากบาท) ที่มุมบนขวาของแถบด้านข้าง Elements เพื่อปิดแผง  

วิธีตรวจสอบองค์ประกอบบน Safari

1. เปิดแอพ Safari บน อุปกรณ์macOS ของคุณ จากนั้นคลิกที่Preferences
2. เลือกเมนู Show Develop ในแถบเมนูในส่วนAdvancedของPreferences
3. ตอนนี้ ตัวเลือก พัฒนาจะปรากฏขึ้น
4. จากนั้นไปที่เว็บไซต์ใดก็ได้และเลือกส่วนประกอบของเว็บ
5. คลิกขวาและคลิกตรวจสอบองค์ประกอบเพื่อดูโค้ดขององค์ประกอบเว็บที่เลือกในคอนโซลมุมมองตัวตรวจสอบ
6. คุณสามารถคลิกที่ปุ่มกากบาทของบานหน้าต่างนำทางมุมมองการตรวจสอบเพื่อปิดเครื่องมือตรวจสอบองค์ประกอบ 

วิธีตรวจสอบองค์ประกอบบน Firefox

1. เปิด Firefox และไปที่เว็บไซต์ของคู่แข่ง
2. ตอนนี้ ไปที่หน้าที่คุณต้องตรวจสอบองค์ประกอบ
3. เลือกส่วนประกอบของเว็บใดๆ เช่น รูปภาพ ภาพประกอบ เนื้อหา หรือไฮเปอร์ลิงก์
4. คลิกขวาที่เมาส์ของคุณ แล้วคุณจะเห็นเมนูบริบทที่มีหลายตัวเลือก
5. หนึ่งในตัวเลือกเหล่านั้นคือInspect Element
6. คลิกที่ตรวจสอบองค์ประกอบเพื่อเปิดแถบด้านข้างมุมมองการตรวจสอบ
7. รหัสที่ไฮไลต์ภายในมุมมองการตรวจสอบคือบรรทัดรหัสสำหรับส่วนประกอบที่คุณเลือก
8. การเลือก ไอคอน ปิดหรือกากบาทที่มุมขวาบนของคอนโซลมุมมองการตรวจสอบจะเป็นการปิดแผง

วิธีตรวจสอบองค์ประกอบบน Edge

1. เข้าถึงหน้าเว็บโดยใช้เบราว์เซอร์ Microsoft Edge
2. บน แถบเครื่องมือของเบราว์เซอร์คุณจะเห็นเคบับหรือเมนูจุดแนวตั้งสามจุด คลิกที่มัน
3. เมนูบริบทจะเปิดขึ้นพร้อมตัวเลือกมากมาย
4. เลื่อนลงมาจนกว่าคุณจะพบตัวเลือกเครื่องมือเพิ่มเติม ตอนนี้คลิกที่มัน
5. เมนูบริบทใหม่จะเปิดขึ้นพร้อมกับตัวเลือกอื่นเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ เลือกสิ่งนั้น
6. นี่จะเป็นการเปิดมุมมองการตรวจสอบสำหรับเพจ
7. หรือเลือก องค์ประกอบใดๆ บนเว็บไซต์แล้วคลิกขวา
8. คลิกที่ตรวจสอบจากเมนูบริบทที่ปรากฏขึ้น
9. รหัสที่ไฮไลต์ที่คุณจะเห็นในคอนโซลมุมมองการตรวจสอบคือรหัสองค์ประกอบ
10. เช่นเดียวกับเว็บไซต์อื่นๆ ที่กล่าวถึงในตอนนี้ การคลิกไอคอนกากบาทบนคอนโซลมุมมองการตรวจสอบจะเป็นการปิดคุณลักษณะองค์ประกอบการตรวจสอบ 

บทสรุป

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

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

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