เนื้อหา

• ขั้นตอน

อ่านบทความนี้เพื่อเรียนรู้วิธีตรวจสอบซอร์สโค้ด HTML สำหรับองค์ประกอบภาพบนหน้าเว็บใดก็ได้ใน Google Chrome

ขั้นตอน

1. 

   เปิด Google Chrome บนคอมพิวเตอร์ของคุณ คุณจะพบไอคอนเบราว์เซอร์ (ทรงกลมสี) ในโฟลเดอร์ Mac Applications หรือในเมนู Start ของ Windows

2. 

   
   
   คลิกที่ไอคอนจุดแนวตั้งสามจุด ปุ่มนี้จะอยู่ถัดจากแถบที่อยู่ที่มุมขวาบนของหน้าต่างเบราว์เซอร์ เมนูแบบเลื่อนลงจะเปิดขึ้น

3. 

   วางเมาส์เหนือ เครื่องมือเพิ่มเติม. เมนูย่อยจะปรากฏขึ้น

4. 

   
   
   คลิกเข้า เครื่องมือสำหรับผู้พัฒนา. แผง Inspector จะเปิดขึ้นทางด้านขวาของเบราว์เซอร์
   • คุณยังสามารถเปิดตัวตรวจสอบโดยใช้ทางลัด ⌥ตัวเลือก+⌘ซม+ผม บน Mac และ Ctrl+Alt+ผม บน Windows

5. 

   
   
   วางเมาส์เหนือองค์ประกอบในแผงตัวตรวจสอบเพื่อให้ไฮไลต์บนหน้าเว็บ

6. 

   คลิกขวาที่องค์ประกอบที่คุณต้องการตรวจสอบบนหน้าเว็บใดก็ได้ เมนูแบบเลื่อนลงจะปรากฏขึ้น

7. 

   เลือก ตรวจ. แผงตัวตรวจสอบจะค้นหาองค์ประกอบที่เลือกโดยไฮไลต์ซอร์สโค้ด
   • แผงตัวตรวจสอบสามารถเปิดได้โดยตรงโดยใช้ขั้นตอนนี้