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

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

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

ขั้นตอน

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

{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/3\/32\/Inspect-Element-on-Chrome-Step-1.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/3\/32\/Inspect-Element-on-Chrome-Step-1.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-1.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\/9\/94\/Inspect-Element-on-Chrome-Step-2.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/94\/Inspect-Element-on-Chrome-Step-2.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-2.jpg","smallWidth":460,"smallHeight":343,"bigWidth":728,"bigHeight":543,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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

เลื่อนเคอร์เซอร์ไปที่ More Tools ในเมนูที่ขยายลงมา. แล้วเมนูย่อยจะโผล่มา
{"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/a\/a8\/Inspect-Element-on-Chrome-Step-4.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-4.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/a\/a8\/Inspect-Element-on-Chrome-Step-4.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-4.jpg","smallWidth":460,"smallHeight":342,"bigWidth":728,"bigHeight":541,"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\/f\/f3\/Inspect-Element-on-Chrome-Step-5.jpg\/v4-460px-Inspect-Element-on-Chrome-Step-5.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/f\/f3\/Inspect-Element-on-Chrome-Step-5.jpg\/v4-728px-Inspect-Element-on-Chrome-Step-5.jpg","smallWidth":460,"smallHeight":346,"bigWidth":728,"bigHeight":547,"licensing":"<div class=\"mw-parser-output\"><\/div>"}

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

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

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

เข้าสู่ระบบ

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

ขั้นตอน

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

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

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

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

ติดตามเรา

แบ่งปัน

Explore Categories