วิธีตรวจสอบองค์ประกอบของเว็บด้วยเบราว์เซอร์ของคุณ

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

บทความนี้ใช้ คลิกขวาที่ เพื่ออ้างถึงการทำงานของอุปกรณ์เมาส์บนพีซี Windows รวมถึงการดำเนินการ Control + คลิกบนเครื่อง Mac

ตรวจสอบองค์ประกอบใน Google Chrome

ใน Google Chrome มีสองวิธีในการตรวจสอบหน้าเว็บโดยใช้ Chrome DevTools ในตัวของเบราว์เซอร์:

• คลิกขวาที่องค์ประกอบบนหน้าหรือในพื้นที่ว่างจากนั้นเลือก ตรวจ.
• ไปที่ Chrome จากนั้นเลือก เครื่องมือเพิ่มเติม > เครื่องมือสำหรับนักพัฒนา.

ใช้ Chrome DevTools เพื่อคัดลอกหรือแก้ไขมาร์กอัป Hypertext Markup Language (HTML) และเพื่อซ่อนหรือลบองค์ประกอบจนกว่าหน้าจะโหลดซ้ำ

เมื่อ Chrome DevTools เปิดขึ้นที่ด้านข้างของหน้าให้เปลี่ยนตำแหน่งเปิดออกจากหน้าค้นหาไฟล์เพจเลือกองค์ประกอบจากหน้าเพื่อดูใกล้ชิดคัดลอกไฟล์และ URL และปรับแต่งการตั้งค่า

ตรวจสอบองค์ประกอบใน Mozilla Firefox

Mozilla Firefox มีสองวิธีในการเปิดเครื่องมือตรวจสอบที่เรียกว่า Inspector:

• คลิกขวาที่องค์ประกอบบนเว็บเพจจากนั้นเลือก ตรวจสอบองค์ประกอบ.
• จากแถบเมนู Firefox เลือก เครื่องมือ > พัฒนาเว็บ > ผู้ตรวจการ.

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

คลิกขวาที่องค์ประกอบเพื่อค้นหาการควบคุมที่รองรับ ใช้ตัวควบคุมเพื่อแก้ไขเพจเป็นมาร์กอัป HTML คัดลอกหรือวางมาร์กอัป HTML ภายในหรือภายนอกแสดงคุณสมบัติ Document Object Model (DOM) จับภาพหน้าจอหรือลบโหนดใช้แอตทริบิวต์ใหม่ดู Cascading Style Sheets (CSS) , และอื่น ๆ.

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

มีสองวิธีในการตรวจสอบองค์ประกอบของเว็บใน Safari:

• คลิกขวาที่รายการหรือที่ว่างบนเว็บเพจจากนั้นเลือก ตรวจสอบองค์ประกอบ.
• ไปที่ พัฒนา จากนั้นเลือก แสดงตัวตรวจสอบเว็บ.

หากคุณไม่เห็นเมนูพัฒนาให้ไปที่ไฟล์ Safari เมนูและเลือก การตั้งค่า. เมื่อ ระดับสูง แท็บเลือก แสดงเมนูพัฒนาในแถบเมนู ช่องทำเครื่องหมาย

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

ตรวจสอบองค์ประกอบใน Internet Explorer

เครื่องมือตรวจสอบองค์ประกอบที่คล้ายกันซึ่งเข้าถึงได้โดยการเปิดใช้งานเครื่องมือสำหรับนักพัฒนามีอยู่ใน Internet Explorer ในการเปิดใช้งานเครื่องมือสำหรับนักพัฒนาให้กด F12. หรือไปที่ไฟล์ เครื่องมือ เมนูและเลือก เครื่องมือสำหรับนักพัฒนา.

ในการแสดงเมนูเครื่องมือกด Alt + X.

ในการตรวจสอบองค์ประกอบบนเว็บเพจให้คลิกขวาที่หน้าจากนั้นเลือก ตรวจสอบองค์ประกอบ. จากเครื่องมือองค์ประกอบ Internet Explorer Select เลือกองค์ประกอบของหน้าเพื่อดูมาร์กอัป HTML หรือ CSS คุณยังสามารถปิดใช้งานหรือเปิดใช้งานการไฮไลต์องค์ประกอบขณะเรียกดูผ่าน DOM Explorer

เช่นเดียวกับเครื่องมือตรวจสอบองค์ประกอบอื่น ๆ ให้ใช้ Internet Explorer เพื่อตัดคัดลอกและวางองค์ประกอบตลอดจนแก้ไขมาร์กอัป HTML เพิ่มแอตทริบิวต์คัดลอกองค์ประกอบที่มีลักษณะแนบและอื่น ๆ

ตรวจสอบองค์ประกอบใน Microsoft Edge

ก่อนที่คุณจะสามารถตรวจสอบองค์ประกอบใน Microsoft Edge คุณต้องเปิดใช้งานการตรวจสอบ มีสองวิธีในการเปิดใช้งานการตรวจสอบ:

• ไปที่แถบที่อยู่และป้อน เกี่ยวกับ: ธง. ในกล่องโต้ตอบให้เลือกไฟล์ แสดงแหล่งที่มาของมุมมองและตรวจสอบองค์ประกอบในเมนูบริบท ช่องทำเครื่องหมาย
• ข่าวประชา F12จากนั้นเลือก DOM Explorer.

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