ดู HTML และ CSS ของเว็บเพจใดก็ได้
เว็บไซต์สร้างขึ้นด้วยบรรทัดของ รหัส แต่ผลที่ได้คือหน้าเว็บเฉพาะที่มีรูปภาพวิดีโอแบบอักษรและอื่น ๆ หากต้องการเปลี่ยนองค์ประกอบเหล่านี้หรือดูว่ามีองค์ประกอบอะไรบ้างคุณต้องค้นหาโค้ดเฉพาะที่ควบคุม คุณสามารถทำได้ด้วยเครื่องมือตรวจสอบองค์ประกอบ
เว็บเบราเซอร์ส่วนใหญ่ไม่ได้ทำให้คุณดาวน์โหลดเครื่องมือตรวจสอบหรือติดตั้ง Add-on แต่ให้คลิกขวาที่องค์ประกอบของหน้าและเลือก ตรวจสอบ หรือ ตรวจสอบองค์ประกอบ อย่างไรก็ตามขั้นตอนอาจแตกต่างออกไปเล็กน้อยในเบราเซอร์ของคุณ
ตรวจสอบองค์ประกอบต่างๆใน Chrome
Google Chrome รุ่นล่าสุดช่วยให้คุณสามารถตรวจสอบหน้าเว็บได้ในสองสามวิธีซึ่งทั้งหมดนี้ใช้ DevTools ในตัวของ Chrome:
- คลิกขวาที่บางส่วนในหน้าเว็บ (หรือพื้นที่ว่าง) แล้วเลือก ตรวจสอบ
- ป้อนแป้นพิมพ์ลัด Ctrl + Shift + I
- ใช้เมนู Chrome เพื่อเข้าถึง เครื่องมือเพิ่มเติม> เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
Chrome DevTools ช่วยให้คุณทำสิ่งต่างๆได้ง่ายเช่นการคัดลอกหรือแก้ไขบรรทัด HTML หรือซ่อนหรือลบองค์ประกอบทั้งหมด (จนกว่าหน้าจะโหลดซ้ำ)
เมื่อ DevTools เปิดขึ้นที่ด้านข้างของหน้าเว็บคุณสามารถเปลี่ยนตำแหน่งที่ต้องการนำออกจากหน้าค้นหาไฟล์ทั้งหมดของหน้าเว็บเลือกองค์ประกอบจากหน้าเว็บเพื่อตรวจสอบเฉพาะคัดลอกไฟล์และ URL และแม้แต่ปรับแต่งพวง ของการตั้งค่า
ตรวจสอบองค์ประกอบต่างๆใน Firefox
เช่นเดียวกับ Chrome Firefox มีวิธีต่างๆหลายวิธีในการเปิดเครื่องมือที่เรียกว่า Inspector:
- คลิกขวาที่พื้นที่ว่างในเพจหรือเลือกองค์ประกอบและเลือก ตรวจสอบองค์ประกอบ
- ป้อน Ctrl + Shift + T หรือ Ctrl + Shift + I พร้อมด้วยแป้นพิมพ์
- จากเมนู Firefox คลิกผู้ พัฒนา > Inspector
- จากเมนู Tools คลิก Web Developer> Inspector
เมื่อคุณเลื่อนเมาส์ไปบนองค์ประกอบต่างๆใน Firefox เครื่องมือตรวจสอบจะค้นหาข้อมูลรหัสขององค์ประกอบโดยอัตโนมัติ คลิกองค์ประกอบและ "การค้นหาแบบ on-the fly" จะหยุดลงและคุณสามารถตรวจสอบองค์ประกอบได้จากหน้าต่าง Inspector
คลิกขวาที่องค์ประกอบเพื่อค้นหาตัวควบคุมที่สนับสนุนทั้งหมด คุณสามารถทำสิ่งต่างๆเช่นแก้ไขหน้าเว็บเป็น HTML คัดลอกหรือวางโค้ด HTML ภายในหรือภายนอกแสดงคุณสมบัติ DOM ภาพหน้าจอหรือลบโหนดใช้แอตทริบิวต์ใหม่ดู CSS ของเพจทั้งหมดและอื่น ๆ ได้อย่างง่ายดาย
ตรวจสอบ Elements ใน Opera
Opera สามารถตรวจสอบองค์ประกอบได้ด้วยเครื่องมือตรวจสอบ DOM ซึ่งเหมือนกับ Chrome ต่อไปนี้คือวิธีการ:
- ใช้แป้นพิมพ์ลัด Ctrl + Shift + I
- ไปที่ เมนู> เครื่องมืออื่น ๆ > แสดงเมนูนักพัฒนาซอฟต์แวร์ จากนั้นเปิดเมนูผ่าน เมนู> นักพัฒนาซอฟต์แวร์> เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- จากเมนูคลิกขวาบนองค์ประกอบใดก็ได้ในเพจให้เลือก ตรวจสอบองค์ประกอบ
ตรวจสอบองค์ประกอบต่างๆใน Internet Explorer
เครื่องมือเครื่องมือตรวจสอบที่คล้ายกันซึ่งเรียกว่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์มีอยู่ใน Internet Explorer:
- กด F12 บนแป้นพิมพ์
- ใช้ เครื่องมือ> ตัวเลือก สำหรับนักพัฒนาซอฟต์แวร์ F12 (กด Alt + X ถ้าคุณไม่เห็นเมนู Tools )
- คลิกขวาที่หน้าเว็บและคลิก ตรวจสอบองค์ประกอบ
IE มีเครื่องมือ element เลือก ในเมนูใหม่นี้ที่ช่วยให้คุณคลิกที่องค์ประกอบของหน้าใด ๆ เพื่อดูรายละเอียด HTML และ CSS นอกจากนี้คุณยังสามารถปิด / เปิดใช้งานการเน้นองค์ประกอบได้อย่างง่ายดายในขณะที่คุณกำลังเรียกดูผ่านแท็บ DOM Explorer
เช่นเดียวกับเครื่องมือตรวจสอบองค์ประกอบอื่น ๆ ในเบราว์เซอร์ข้างต้น Internet Explorer ช่วยให้คุณสามารถตัดคัดลอกและวางองค์ประกอบรวมทั้งแก้ไข HTML เพิ่มแอตทริบิวต์คัดลอกองค์ประกอบที่มีสไตล์ที่แนบมาและอื่น ๆ