Inspect เว็บไซต์เพื่อแก้ไข html/css อย่างง่าย

Inspect Element เป็นเครื่องมือที่คนทำเว็บไซต์ทุกคนควรรู้จักกัน เพราะมีโปรโยชน์อย่างมากช่วยประหยัดเวลาในการปรับแก้โค๊ด html/css และเราสามารถใช้ในการส่องโค๊ดของเว็บไซต์คนอื่นว่าเขียนยังไง วางโครงยังไง มีการประแต่ง css ยังไงให้เว็บสวย

Inspect Element เป็นการจำลองการแก้ไขโค๊ดให้ดูแบบ realtime เช่น อยากลองเปลี่ยนสีfont หรืออยากปรับlayout จะเห็นผลลัพท์ทันทีในหน้าจอ แต่ถ้าทำการ refresh หน้าจอโค๊ดที่แก้ไปก็จะหาย แต่จะไม่มีผลกระทบต่อเว็บจริงที่เราทำไว้

จุดเด่นของ Inspect Element

• ช่วยให้เราแก้ไข html/css ได้แบบ realtime
• สามารถจับ Element html ได้ว่าจุดๆนั้น เป็น tag ไหนของโค๊ด เพื่อที่จะทำการแก้ไขได้ถูกจุด
• ช่วยแกะโค๊ดได้อย่างง่ายดาย
• สามารถจำรองหน้าจอให้เป็น mobile, Tablet ได้สำหรับดู responsive

วิธี Inspect เว็บไซต์ บน Chrome

1. เปิด Inspect Element มี 4 วิธี คือ
   1. คลิกไอคอนเมนู > More tools > Developer tools
   2. กด F12
   3. คลิกขวา ตรงหน้าเว็บ > view page source
   4. กดคีย์ลัด Ctrl+Shift+I

2. จะได้หน้า Inspect Element ตามรูป

วิธี Inspect เว็บไซต์ บน Firefox

1. เปิด Inspect Element มี 4 วิธี คือ
   1. คลิกไอคอนเมนู > Web Developer > Inspector
   2. กด F12
   3. คลิกขวา ตรงหน้าเว็บ > Inspect Accessibility Properties
   4. กดคีย์ลัด Ctrl+Shift+I

2. จะได้หน้า Inspect Element ตามรูป

วิธี Inspect ดูโค๊ด html / css

1. คลิกไอคอน Select an element in the page to inspect it หรือ กดคีย์ลัด ctrl+shift+C
2. นำเม้าส์ไปคลิกที่ตัวหน้าเว็บไซต์ตรงจุดที่เราต้องการรู้ว่า htmlหรือcss เขียนแบบไหน จะเห็นว่าตรงช่อง inspect element จะมีไฮไลท์ที่ tag ของก้อนนั้น พร้อมกับตรง styles จะแสดง css ว่าเขียนแบบไหน
3. ดับเบิ้ลคลิก ตรง css ที่เราต้องการแก้ไขและแก้ได้ตามใจชอบ

ที่สำคัญจำให้ได้ว่า เราแก้จุดไหนไปบ้าง และอย่าเผลอกด refresh ไม่งั้นที่สิ่งเขียนลงไปจะหายหมดนะ

วิธีใช้โหมด Responsive

1. คลิกไอคอน Toggle device toolbar หรือกดคีย์ลัด ctrl+shift+M
2. เลือกได้ว่าจะจำลองหน้าจอในมือถือไซส์ไหน

• Facebook
• Line