วิธีตรวจสอบองค์ประกอบบน Chrome: 7 ขั้นตอน (พร้อมรูปภาพ)

สารบัญ:

วิธีตรวจสอบองค์ประกอบบน Chrome: 7 ขั้นตอน (พร้อมรูปภาพ)
วิธีตรวจสอบองค์ประกอบบน Chrome: 7 ขั้นตอน (พร้อมรูปภาพ)

วีดีโอ: วิธีตรวจสอบองค์ประกอบบน Chrome: 7 ขั้นตอน (พร้อมรูปภาพ)

วีดีโอ: วิธีตรวจสอบองค์ประกอบบน Chrome: 7 ขั้นตอน (พร้อมรูปภาพ)
วีดีโอ: เพิ่มเส้นผม ทำอย่างไร | photoshop 2022 2024, อาจ
Anonim

บทความวิกิฮาวนี้จะแนะนำวิธีการตรวจสอบซอร์สโค้ด HTML ขององค์ประกอบภาพบนหน้าเว็บใดๆ ใน Google Chrome โดยใช้คอมพิวเตอร์

ขั้นตอน

ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 1
ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 1

ขั้นตอนที่ 1. เปิด Google Chrome บนคอมพิวเตอร์ของคุณ

ไอคอน Chrome ดูเหมือนลูกบอลสีที่มีจุดสีน้ำเงินอยู่ตรงกลาง คุณสามารถค้นหาได้ในโฟลเดอร์ Applications บน Mac หรือในเมนู Start บน Windows

ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 2
ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 2

ขั้นตอนที่ 2 คลิกไอคอนจุดแนวตั้งสามจุด

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

ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 3
ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 3

ขั้นตอนที่ 3 วางเมาส์เหนือเครื่องมือเพิ่มเติมในเมนูแบบเลื่อนลง

เมนูย่อยจะปรากฏขึ้น

ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 4
ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 4

ขั้นตอนที่ 4 คลิกเครื่องมือสำหรับนักพัฒนาในเมนูย่อยเครื่องมือเพิ่มเติม

ซึ่งจะเปิดคอลัมน์ Inspector ทางด้านขวามือของหน้าต่างเบราว์เซอร์ของคุณ

หรือคุณสามารถเปิดตัวตรวจสอบด้วยแป้นพิมพ์ลัด ปุ่มลัดนี้คือ ⌥ Option+⌘ Cmd+I บน Mac และ Ctrl+Alt+I บน Windows

ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 5
ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 5

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

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

ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 6
ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่ 6

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

เมนูคลิกขวาของคุณจะปรากฏขึ้นในกล่องดรอปดาวน์

ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่7
ตรวจสอบองค์ประกอบบน Chrome ขั้นตอนที่7

ขั้นตอนที่ 7 เลือก ตรวจสอบ บนเมนูแบบเลื่อนลง

การดำเนินการนี้จะเลื่อนคอลัมน์ Inspector ขึ้นหรือลงไปยังองค์ประกอบที่เลือก และไฮไลต์ซอร์สโค้ด

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

แนะนำ: