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