มองโครงหน้าด้วย DevTools

เปิดหน้าเว็บใดก็ได้ (หรือไฟล์ของคุณ) กดคลิกขวา → Inspect / ตรวจสอบ หรือใช้ทางลัด DevTools

ไปที่แท็บ Elements — จะเห็นต้นไม้ของแท็กที่เบราว์เซอร์สร้างจาก HTML

1) หา html, head, body ในแผง Elements

2) คลิกเอลิเมนต์ในแผง แล้วดูว่าส่วนไหนของหน้าถูกไฮไลต์

3) สังเกตว่าข้อความใน title อยู่ใน head ไม่ใช่ในพื้นที่หน้าจอหลัก

DevTools คือเครื่องมือหลักตอนดีบักเว็บ — เริ่มคุ้น Elements ตั้งแต่บทแรก จะช่วยมากตอนเรียน CSS และ DOM

ลองทำตามรายการด้านล่างในเบราว์เซอร์หรือไฟล์ของคุณ — ไม่มีตรวจอัตโนมัติในเฟสนี้

เปิด Elements แล้วชี้ตำแหน่ง h1 ของหน้าคุณในต้นไม้แท็ก

ถ้าไม่เจอ h1 ให้ดูว่าคุณใส่ไว้ใน body หรือยัง

ง่าย

เปลี่ยนข้อความใน Elements ชั่วคราว (ดับเบิลคลิกข้อความ) แล้วรีเฟรชหน้า — สังเกตว่าไฟล์ต้นฉบับไม่เปลี่ยน

ปานกลาง