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

PDF download ดาวน์โหลดบทความ
ร่วมเขียน โดย Luigi Oppido

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

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

ขั้นตอน

PDF download ดาวน์โหลดบทความ
  1. {"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
  2. {"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 มุมขวาบนของหน้าต่างเบราว์เซอร์ แล้วเมนูจะขยายลงมา
  3. {"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 ในเมนูที่ขยายลงมา. แล้วเมนูย่อยจะโผล่มา
  4. {"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>"}
    เพื่อเปิดคอลัมน์ Inspector ทางขวาของหน้าต่างเบราว์เซอร์
    • หรือเปิด Inspector โดยกดคีย์ลัด ปกติจะเป็น ⌥ Option + ⌘ Cmd + I ถ้าใช้ Mac และ Ctrl + Alt + I ถ้าใช้ Windows
  5. {"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 หรือองค์ประกอบนั้นให้เด่นขึ้นมาในหน้าเว็บ
  6. {"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>"}
    เมนูคลิกขวาจะโผล่มาในช่องที่ขยายลงมาได้
  7. {"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>"}
    เพื่อเลื่อนขึ้น-ลงในคอลัมน์ Inspector จนเจอ element ที่เลือก แล้วเน้น source code
    • ไม่ต้องเปิดคอลัมน์ Inspector เอง ก็ทำตามขั้นตอนได้ โดยเลือก Inspect ในเมนูคลิกขวา เท่านี้ Inspector ก็เปิดขึ้นมาอัตโนมัติ
    โฆษณา

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

วิธีการ
เข้าสู่ระบบ Telegram บนแอนดรอยด์
วิธีการ
ดาวน์โหลดวิดีโอจากทุกเว็บไซต์ได้แบบฟรีๆ
วิธีการ
หาละติจูดกับลองจิจูดใน Google Maps
วิธีการ
หาวันที่เผยแพร่ข้อมูลของเว็บไซต์
อิโมจิซ่อนความสยิวที่คนใช้แชตกันมากที่สุด
วิธีการ
ดาวน์โหลดบิททอเรนท์
วิธีการ
แก้ปัญหาเข้าบางเว็บไม่ได้
รู้ความหมายของอีโมจิหน้ากลับหัว
วิธีการ
เช็คตำแหน่งปัจจุบันใน Google Maps
วิธีการ
แก้ปัญหาเซิร์ฟเวอร์ DNS ไม่ตอบสนอง
วิธีการ
หา IP Address ของเว็บไซต์
วิธีการ
เขียนเว็บเพจง่ายๆ ด้วย HTML
โฆษณา

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

ในภาษาอื่น
มีการเข้าถึงหน้านี้ 9,333 ครั้ง

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

โฆษณา