วิธีตรวจสอบองค์ประกอบหน้าเว็บใน Chrome: 7 ขั้นตอน

สารบัญ:

วิธีตรวจสอบองค์ประกอบหน้าเว็บใน Chrome: 7 ขั้นตอน
วิธีตรวจสอบองค์ประกอบหน้าเว็บใน Chrome: 7 ขั้นตอน

วีดีโอ: วิธีตรวจสอบองค์ประกอบหน้าเว็บใน Chrome: 7 ขั้นตอน

วีดีโอ: วิธีตรวจสอบองค์ประกอบหน้าเว็บใน Chrome: 7 ขั้นตอน
วีดีโอ: วิธีดูประวัติเบราว์เซอร์ที่ไม่ระบุตัวตนใน Android(2023)ลบประวัติการท่องเว็บที่ไม่ระบุตัวตนของ Chrome 2024, พฤศจิกายน
Anonim

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

ขั้นตอน

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

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

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

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

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

ข้างแถบ address มุมขวาบนของหน้าต่างเบราว์เซอร์ หลังจากนั้น เมนูแบบเลื่อนลงจะปรากฏขึ้น

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

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

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

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

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

คอลัมน์การตรวจสอบจะปรากฏขึ้นที่ด้านขวาของหน้าต่างเบราว์เซอร์

หรือเปิดหน้าต่างการตรวจสอบโดยใช้แป้นพิมพ์ลัดก็ได้ กด Option+⌘ Cmd+I บนคอมพิวเตอร์ Mac และ Ctrl+Alt+I บนคอมพิวเตอร์ Windows

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

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

เมื่อวางเคอร์เซอร์ไว้เหนือองค์ประกอบหรือเส้นในหน้าต่างการตรวจสอบ องค์ประกอบที่เกี่ยวข้องจะถูกทำเครื่องหมายบนหน้าเว็บ

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

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

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

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

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

หลังจากนั้นคอลัมน์ตรวจสอบจะเลื่อนขึ้นหรือลงไปยังองค์ประกอบนั้น ซอร์สโค้ดขององค์ประกอบจะถูกตั้งค่าสถานะ

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

แนะนำ: