วิธีการ Inspect Element ใน Chrome

ร่วมเขียน โดย Luigi Oppido

บทความวิกิฮาวนี้จะแนะนำวิธีการ inspect element หรือตรวจสอบ source code HTML ของ visual element (ทัศนธาตุหรือองค์ประกอบศิลป์) ในหน้าเว็บของ Google Chrome โดยใช้คอม

ขั้นตอน

ดาวน์โหลดบทความ

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/bf\/Inspect-Element-on-Chrome-Step-1-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-1-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/bf\/Inspect-Element-on-Chrome-Step-1-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-1-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ไอคอนของ Chrome จะเป็นลูกบอลสีๆ มีจุดฟ้าตรงกลาง ปกติอยู่ในโฟลเดอร์ Applications ของ Mac หรือในเมนู Start ของ Windows
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/b\/b1\/Inspect-Element-on-Chrome-Step-2-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-2-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/b\/b1\/Inspect-Element-on-Chrome-Step-2-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-2-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

ที่เป็นปุ่มข้างแถบ address มุมขวาบนของหน้าต่างเบราว์เซอร์ แล้วเมนูจะขยายลงมา
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/05\/Inspect-Element-on-Chrome-Step-3-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-3-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/05\/Inspect-Element-on-Chrome-Step-3-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-3-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

เลื่อนเคอร์เซอร์ไปที่ More Tools ในเมนูที่ขยายลงมา. แล้วเมนูย่อยจะโผล่มา
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/24\/Inspect-Element-on-Chrome-Step-4-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-4-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/24\/Inspect-Element-on-Chrome-Step-4-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-4-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

4
คลิก Developer Tools ในเมนูย่อย More Tools. เพื่อเปิดคอลัมน์ Inspector ทางขวาของหน้าต่างเบราว์เซอร์
- หรือเปิด Inspector โดยกดคีย์ลัด ปกติจะเป็น ⌥ Option + ⌘ Cmd + I ถ้าใช้ Mac และ Ctrl + Alt + I ถ้าใช้ Windows
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/Inspect-Element-on-Chrome-Step-5-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-5-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Inspect-Element-on-Chrome-Step-5-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-5-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

เลื่อนเมาส์ไปที่ element หรือบรรทัดข้อความใน Inspector แล้ว เท่ากับเน้น element หรือองค์ประกอบนั้นให้เด่นขึ้นมาในหน้าเว็บ
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/ad\/Inspect-Element-on-Chrome-Step-6-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-6-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/ad\/Inspect-Element-on-Chrome-Step-6-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-6-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

เมนูคลิกขวาจะโผล่มาในช่องที่ขยายลงมาได้
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/2\/20\/Inspect-Element-on-Chrome-Step-7-Version-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/2\/20\/Inspect-Element-on-Chrome-Step-7-Version-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

7
เลือก Inspect ในเมนูที่ขยายลงมา. เพื่อเลื่อนขึ้น-ลงในคอลัมน์ Inspector จนเจอ element ที่เลือก แล้วเน้น source code
- ไม่ต้องเปิดคอลัมน์ Inspector เอง ก็ทำตามขั้นตอนได้ โดยเลือก Inspect ในเมนูคลิกขวา เท่านี้ Inspector ก็เปิดขึ้นมาอัตโนมัติ
โฆษณา

เข้าสู่ระบบ

วิธีการ Inspect Element ใน Chrome

ขั้นตอน

บทความวิกิฮาวอื่น ๆ ที่่เกี่ยวข้อง

เกี่ยวกับวิกิฮาวนี้

บทความนี้เป็นประโยชน์กับคุณไหม

บทความที่เกี่ยวข้อง

ติดตามเรา

แบ่งปัน

Explore Categories