เมนูนักพัฒนาเว็บของ Firefox มีเครื่องมือสำหรับการตรวจสอบหน้าเรียกใช้โค้ด JavaScript ตามอำเภอใจและดูคำขอ HTTP และข้อความอื่น ๆ Firefox 10 เพิ่มเครื่องมือตัวตรวจสอบใหม่ทั้งหมดและอัปเดต Scratchpad
คุณลักษณะใหม่สำหรับนักพัฒนาเว็บของ Firefox ร่วมกับโปรแกรมเสริมสำหรับนักพัฒนาเว็บที่ยอดเยี่ยมเช่น Firebug และแถบเครื่องมือนักพัฒนาเว็บทำให้ Firefox เป็นเบราว์เซอร์ที่เหมาะสำหรับนักพัฒนาเว็บ เครื่องมือทั้งหมดมีอยู่ใน Web Developer ในเมนูของ Firefox
ตัวตรวจสอบหน้า
ตรวจสอบองค์ประกอบเฉพาะโดยคลิกขวาและเลือก ตรวจสอบ (หรือกด ถาม ). คุณยังสามารถเปิดไฟล์ สารวัตร จากเมนู Web Developer
คุณจะเห็นแถบเครื่องมือที่ด้านล่างของหน้าจอซึ่งใช้ควบคุมตัวตรวจสอบได้ องค์ประกอบที่คุณเลือกจะถูกไฮไลต์และองค์ประกอบอื่น ๆ ในหน้าจะจางลง
หากคุณต้องการเลือกองค์ประกอบใหม่ให้คลิก ตรวจสอบ บนแถบเครื่องมือวางเมาส์เหนือหน้าแล้วคลิกองค์ประกอบของคุณ Firefox จะเน้นองค์ประกอบที่อยู่ใต้เคอร์เซอร์ของคุณ
คุณสามารถนำทางระหว่างองค์ประกอบหลักและองค์ประกอบย่อยได้โดยคลิกที่เบรดครัมบ์บนแถบเครื่องมือ
ตัวตรวจสอบ HTML
คลิก HTML เพื่อดูโค้ด HTML ขององค์ประกอบที่เลือกในปัจจุบัน
ตัวตรวจสอบ HTML ช่วยให้คุณขยายและยุบแท็ก HTML ทำให้ง่ายต่อการมองเห็นได้ในพริบตา หากคุณต้องการดู HTML ของเพจในรูปแบบไฟล์เดียวคุณสามารถเลือกได้ ดูที่มาของเพจ จากเมนู Web Developer
ตัวตรวจสอบ CSS
คลิก สไตล์ เพื่อดูกฎ CSS ที่ใช้กับองค์ประกอบที่เลือก
นอกจากนี้ยังมีแผงคุณสมบัติ CSS - สลับไปมาระหว่างทั้งสองโดยคลิกที่ กฎ และ คุณสมบัติ ปุ่ม เพื่อช่วยคุณค้นหาคุณสมบัติเฉพาะแผงคุณสมบัติจะมีช่องค้นหา
คุณสามารถแก้ไข CSS ขององค์ประกอบได้ทันทีจากแผงกฎ ยกเลิกการเลือกช่องทำเครื่องหมายใด ๆ เพื่อปิดใช้งานกฎคลิกข้อความเพื่อเปลี่ยนแปลงกฎหรือเพิ่มกฎของคุณเองในองค์ประกอบที่ด้านบนสุดของบานหน้าต่าง ที่นี่ฉันได้เพิ่มไฟล์ น้ำหนักตัวอักษร: ตัวหนา; กฎ CSS ทำให้ข้อความขององค์ประกอบเป็นตัวหนา
JavaScript Scratchpad
Scratchpad ยังเห็นการอัปเดตด้วย Firefox 10 และตอนนี้มีการเน้นไวยากรณ์ คุณสามารถพิมพ์โค้ด JavaScript เพื่อเรียกใช้ในหน้าปัจจุบัน
เมื่อคุณมีให้คลิกไฟล์ ดำเนินการ เมนูและเลือก วิ่ง. รหัสทำงานในแท็บปัจจุบัน
เว็บคอนโซล
เว็บคอนโซลแทนที่ Error Console รุ่นเก่าซึ่งเลิกใช้แล้วและจะถูกลบออกใน Firefox เวอร์ชันอนาคต
คอนโซลแสดงข้อความสี่ประเภทที่แตกต่างกันซึ่งคุณสามารถสลับการเปิดเผยได้ ได้แก่ คำขอเครือข่ายข้อความแสดงข้อผิดพลาด CSS ข้อความแสดงข้อผิดพลาดของ JavaScript และข้อความของนักพัฒนาเว็บ
ข้อความของนักพัฒนาเว็บคืออะไร เป็นข้อความที่พิมพ์ไปยังวัตถุ window.console ตัวอย่างเช่นเราสามารถเรียกใช้ไฟล์ window.console.log (“ สวัสดีชาวโลก”); โค้ด JavaScript ใน Scratchpad เพื่อพิมพ์ข้อความของนักพัฒนาไปยังคอนโซล นักพัฒนาเว็บสามารถรวมข้อความเหล่านี้ลงในโค้ด JavaScript เพื่อช่วยในการดีบัก
รีเฟรชหน้าแล้วคุณจะเห็นคำขอเครือข่ายที่สร้างขึ้นและข้อความอื่น ๆ
ใช้ช่องค้นหาเพื่อกรองข้อความ คลิกคำขอหากคุณต้องการดูรายละเอียดเพิ่มเติม
ใน Firefox 10 เว็บคอนโซลสามารถทำงานควบคู่กับ Page Inspector ได้ ตัวแปร $ 0 แสดงถึงออบเจ็กต์ที่เลือกในปัจจุบันในตัวตรวจสอบ ตัวอย่างเช่นหากคุณต้องการซ่อนวัตถุที่เลือกในปัจจุบันคุณสามารถเรียกใช้ $ 0.style.display = "ไม่มี" ในคอนโซล
หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการใช้คอนโซลและฟังก์ชันในตัวโปรดดูที่ หน้าเว็บคอนโซล บนเว็บไซต์ Mozilla’s Developer Network
รับเครื่องมือเพิ่มเติม
รับเครื่องมือเพิ่มเติม ตัวเลือกจะนำคุณไปยังคอลเล็กชันส่วนเสริม Toolbox ของนักพัฒนาเว็บบนเว็บไซต์ Mozilla Add-Ons มันมีบางส่วนของไฟล์ ส่วนเสริมที่ดีที่สุดสำหรับนักพัฒนาเว็บ รวมถึง Firebug และแถบเครื่องมือนักพัฒนาเว็บ
หากคุณใช้ Firefox มาสองสามปีคุณอาจจำ DOM Inspector ได้ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แบบบูรณาการของ Firefox มีมานานแล้ว
