test top bar

วิธีการ Inspect เว็บไซต์ เครื่องมือจำเป็นสำหรับนักพัฒนาเว็บไซต์

inspect-banner

เกริ่นนำ

ในบทความนี้จะมาแนะนำวิธีการ Inspect Website หรือ เรียกง่ายๆว่าการส่องโค้ดในหน้าเว็บไซต์กัน ซึ่งถือว่าเป็นหนึ่งในเครื่องมือนักพัฒนาเว็บไซต์ที่ทุกท่านควรจะใช้เป็นกัน เพราะ มีประโยชน์สูงมากในการทำเว็บไซต์นั้นเอง

วิธีการ Inspect เว็บไซต์ เพื่อดูโค้ด Html และ CSS

  1. ไปที่ไอคอนเมนู –> More Tools –> Developer Tools
    inspect-1
  2. สามารถเลือกไอคอนรูปลูกศรในกรอบสี่เหลี่ยม แล้วเลือกตำแหน่งที่เราต้องการดูโค้ดได้เลย มีทั้งโค้ด hmtl ในด้านซ้าย และ CSS ในด้านขวา
    inspect-2

วิธีการ Inspect เว็บไซต์ เพื่อดูการแสดงผลในหน้าจอต่างๆ

  1. ไปที่ไอคอนเมนู –> More Tools –> Developer Tools
    inspect-1
  2. สามารถเลือกไอคอนรูปมือถือกับไอแพด ก็แสดงหน้าจอมาตามภาพ
    inspect-3
  3. สามารถเลือกขนาดที่เราต้องการ หรือ ตามขนาดหน้าจอพื้นฐานได้เลย
    inspect-4

ปล. ในบทความนี้จะกล่าวถึงเฉพาะเบราเซอร์ Chrome นะครับ แต่ในเบราเซอร์อื่นๆ ก็สามารถเลือกได้เช่นกัน โดยขั้นตอนก็จะคล้ายๆกับของ Chrome เลยครับ