"Inspect Element" เป็นเครื่องมือสำหรับนักพัฒนาในเบราว์เซอร์ Firefox ที่คุณสามารถใช้เพื่อติดตามโค้ด HTML บนหน้าเว็บใดก็ได้ สไตล์ชีต HTML และ CSS ของหน้าเว็บสามารถแก้ไขได้ด้วย "ตรวจสอบองค์ประกอบ" คุณสามารถลองแก้ไขหน้าเว็บได้ตามต้องการ และให้กลับมาเป็นเหมือนเดิมได้ด้วยการโหลดหน้าเว็บที่แก้ไขใหม่
ขั้นตอน
ส่วนที่ 1 จาก 2: การตรวจสอบองค์ประกอบ
ขั้นตอนที่ 1 อัปเดต Firefox (ไม่บังคับ)
เป็นไปได้ว่าคุณจะไม่สามารถเข้าถึงคุณลักษณะต่างๆ ที่กล่าวถึงในบทความนี้ หากคุณใช้ Firefox เวอร์ชันเก่า การอัปเดตจะถูกติดตั้งโดยอัตโนมัติเมื่อคุณตรวจสอบว่าคุณใช้ Firefox เวอร์ชันใด
Firefox 9 และเวอร์ชันก่อนหน้าไม่มีเครื่องมือ "ตรวจสอบองค์ประกอบ" เลย
ขั้นตอนที่ 2 คลิกขวาที่องค์ประกอบของหน้าเว็บ
คุณสามารถคลิกขวาที่รูปภาพ ข้อความ พื้นหลัง หรือองค์ประกอบใดก็ได้ หากเมาส์ของคุณมีปุ่มเพียงปุ่มเดียว การคลิกซ้ายและปุ่มควบคุมพร้อมกันจะทำให้เกิดการคลิกขวา
ขั้นตอนที่ 3 คลิก "ตรวจสอบองค์ประกอบ" จากเมนูแบบเลื่อนลง
แถบเครื่องมือจะปรากฏที่ด้านล่างของหน้าต่าง แผงด้านล่างแถบเครื่องมือจะปรากฏขึ้นและแสดงโค้ด HTML บนหน้าที่ใช้งานอยู่ด้วย
ขั้นตอนที่ 4 ทำความรู้จักกับแถบเครื่องมือและพาเนลที่มีอยู่
เมื่อคุณใช้ "ตรวจสอบองค์ประกอบ" แผงหลายแผงจะเปิดขึ้นใต้หน้าต่างเบราว์เซอร์ ข้อมูลต่อไปนี้อธิบายชื่อและฟังก์ชันของแถบเครื่องมือและแผงใน "ตรวจสอบองค์ประกอบ":
- ที่แถวบนสุดคือ Toolbox Toolbar มีเครื่องมือหลายอย่างที่จะพบได้ที่นี่ แต่เราจะเน้นที่ปุ่มตัวตรวจสอบทางด้านซ้าย ตรวจสอบให้แน่ใจว่าปุ่มนี้ทำงานอยู่ (ระบุด้วยสีของปุ่มที่เปลี่ยนเป็นสีน้ำเงินเมื่อเปิดใช้งาน) ตลอดคู่มือนี้
- ด้านล่างนั้นมีเบรดครัมบ์ขององค์ประกอบ HTML ที่ระบุตำแหน่งขององค์ประกอบที่เลือกอยู่ในปัจจุบัน
- บานหน้าต่างใต้ข้อความนำทางจะแสดงแผนผัง HTML หรือ "Markup View" ของหน้าเว็บ HTML ขององค์ประกอบที่เลือกจะถูกทำเครื่องหมายและจัดกึ่งกลางในบานหน้าต่างนี้
- บานหน้าต่างด้านขวาจะแสดงสไตล์ชีต CSS ของหน้าเว็บปัจจุบัน
ขั้นตอนที่ 5. เลือกองค์ประกอบอื่น
เมื่อแถบเครื่องมือเปิดขึ้น คุณสามารถเลือกองค์ประกอบอื่นๆ ได้อย่างง่ายดาย มีสามวิธีในการทำเช่นนี้:
- วางเมาส์เหนือบรรทัด HTML เพื่อทำเครื่องหมายองค์ประกอบที่เลือก (คุณลักษณะนี้ต้องใช้ Firefox 34+) คลิก HTML เพื่อเลือกองค์ประกอบนั้น
- คลิกเครื่องมือ "Select Element" ที่มุมซ้ายของแถบเครื่องมือ ซึ่งมีไอคอนรูปเคอร์เซอร์เหนือกล่อง ย้ายเคอร์เซอร์บนหน้าเว็บเพื่อทำเครื่องหมายองค์ประกอบแล้วคลิกเพื่อเลือก
ขั้นตอนที่ 6 ติดตามโค้ด HTML
คลิกที่ใดก็ได้ในบานหน้าต่าง HTML ใช้ปุ่มทิศทางซ้ายและขวาบนแป้นพิมพ์เพื่อย้ายจากโค้ดหนึ่งไปยังอีกโค้ดหนึ่ง (คุณลักษณะนี้ต้องใช้ Firefox 39+) วิธีนี้มีประโยชน์สำหรับการเลือกองค์ประกอบที่เล็กเกินกว่าจะเลือกด้วยเคอร์เซอร์ได้
- HTML ที่เป็นสีเทา หมายถึงองค์ประกอบที่ไม่แสดงบนหน้า องค์ประกอบที่รวมอยู่ในนี้คือความคิดเห็น เช่น โหนด และองค์ประกอบอื่นๆ ที่ซ่อนอยู่โดยคุณสมบัติการแสดงผล CSS
- คลิกลูกศรทางด้านซ้ายของกล่องเพื่อแสดงหรือซ่อนเนื้อหา หากต้องการแสดงเนื้อหาทั้งหมด ให้กด alt=""Image" หรือตัวเลือกค้างไว้ขณะคลิกลูกศร</li" />
ขั้นตอนที่ 7 ค้นหาองค์ประกอบ
มองหาช่องค้นหา (ไอคอนรูปวงรี) ที่มุมขวาสุดของแถวเบรดครัมบ์ คลิกเพื่อขยายช่องค้นหาและพิมพ์โค้ด HTML ที่คุณต้องการค้นหา ขณะที่คุณพิมพ์ ป๊อปอัปจะปรากฏขึ้นเพื่อแสดงผลการค้นหาที่ตรงกัน คลิกองค์ประกอบจากผลการค้นหาและเลื่อนบานหน้าต่าง HTML ไปยังโค้ดที่คุณต้องการ
ส่วนที่ 2 จาก 2: การแก้ไข HTML
ขั้นตอนที่ 1. โหลดหน้าซ้ำเพื่อเริ่มต้นใหม่
หากคุณเพิ่งเริ่มใช้เครื่องมือพัฒนาเว็บไซต์ โปรดทราบว่าคุณไม่ได้ทำการเปลี่ยนแปลงอย่างถาวรในหน้าเว็บที่คุณแก้ไข การแก้ไขของคุณจะปรากฏบนหน้าจอเท่านั้น จนกว่าคุณจะโหลดซ้ำหรือปิดหน้า อย่าลังเลที่จะทดลองแม้ว่าคุณจะไม่รู้ว่าจะเกิดอะไรขึ้น
ขั้นตอนที่ 2 ดับเบิลคลิก HTML เพื่อแก้ไข
ดับเบิลคลิก HTML แบบอินไลน์ พิมพ์ข้อความใหม่และกด Enter เพื่อบันทึกการเปลี่ยนแปลง
ขั้นตอนที่ 3 คลิกค้างไว้ที่เครื่องมือในการแสดงเส้นทางเพื่อแสดงตัวเลือกเพิ่มเติม
โปรดทราบว่าแถบเครื่องมือเบรดครัมบ์อยู่ระหว่างแผนผัง HTML และแถบเครื่องมือด้านบน คลิกเครื่องมือในแถวนี้ค้างไว้เพื่อเปิดเมนูเพิ่มเติม ด้านล่างนี้เป็นคำแนะนำของตัวเลือกที่มี (ไม่ครบถ้วนสมบูรณ์):
- "แก้ไขเป็น HTML" ให้คุณแก้ไขเนื้อหา HTML ทั้งหมดจากโครงสร้าง HTML ได้โดยตรง แทนที่จะแก้ไขแต่ละบรรทัด
- "คัดลอก HTML ภายใน" คัดลอกเนื้อหาทั้งหมดภายในโหนด ขณะที่ "คัดลอก HTML ภายนอก" คัดลอกเนื้อหาและโหนด (เช่น หรือ
- "วาง →" จะแสดงตัวเลือกต่างๆ สำหรับตำแหน่งที่จะวางสำเนา เช่น ก่อนโหนดหรือหลังโหนดลูกคนแรกของโหนด
- :hover,:active และ:focus เปลี่ยนรูปลักษณ์ขององค์ประกอบเมื่อผู้ใช้โต้ตอบ เอฟเฟกต์ที่เปลี่ยนแปลงถูกกำหนดจากสไตล์ชีต CSS (แก้ไขได้จากแผงด้านขวา)
ขั้นตอนที่ 4. ลากและวาง
หากต้องการจัดเรียงองค์ประกอบในโค้ดใหม่ ให้คลิก HTML ค้างไว้จนกว่าเส้นประจะปรากฏขึ้น ย้ายเส้นขึ้นและลงต้นไม้ แล้วปล่อยปุ่มเมาส์เมื่อเส้นอยู่ในตำแหน่งที่คุณต้องการ
คุณลักษณะนี้ต้องใช้ Firefox 39 และใหม่กว่า
ขั้นตอนที่ 5. ปิดแถบเครื่องมือสำหรับนักพัฒนา
หากต้องการปิดหน้าต่างตรวจสอบองค์ประกอบทั้งหมด ให้คลิกปุ่ม X ที่มุมขวาบนของแถบเครื่องมือที่อยู่เหนือแผง CSS
เคล็ดลับ
- คุณยังสามารถเปิดแถบเครื่องมือจากตัวเลือกเมนูที่ด้านบนของหน้าต่าง:
- Windows: Firefox → นักพัฒนาเว็บ → เครื่องมือสลับ
- Mac หรือ Linux: เครื่องมือ → นักพัฒนาเว็บ → เครื่องมือสลับ
- Firefox 40 มีตัวเลือกในการซ่อนแผง CSS เพื่อให้คุณมีพื้นที่มากขึ้นในการแก้ไข HTML มองหาไอคอนลูกศรที่มุมขวาสุดของแถวเบรดครัมบ์และทางด้านขวาของช่องค้นหา คลิกไอคอนนี้เพื่อซ่อนแผง CSS และคลิกอีกครั้งเพื่อเรียกขึ้นมา
- คุณยังสามารถแก้ไขแผง CSS ได้ แต่ไม่มีอยู่ในบทความนี้ คุณดูคำแนะนำในการแก้ไขโค้ด CSS ได้ทางอินเทอร์เน็ต
