วิธีใช้เครื่องมือสำหรับนักพัฒนาเว็บของ Firefox

เมนูนักพัฒนาเว็บของ Firefox มีเครื่องมือสำหรับการตรวจสอบหน้าเว็บดำเนินการโค้ด JavaScript ตามอำเภอใจและดูคำขอ HTTP และข้อความอื่น ๆ Firefox 10 เพิ่มเครื่องมือตรวจสอบใหม่และ Scratchpad ที่อัปเดตแล้ว.

คุณสมบัตินักพัฒนาเว็บใหม่ของ Firefox เมื่อรวมกับส่วนเสริมนักพัฒนาเว็บยอดเยี่ยมเช่น Firebug และแถบเครื่องมือสำหรับนักพัฒนาเว็บทำให้ Firefox เป็นเบราว์เซอร์ที่เหมาะสำหรับนักพัฒนาเว็บ เครื่องมือทั้งหมดมีอยู่ใน Web Developer ในเมนูของ Firefox.

สารวัตรหน้า

ตรวจสอบองค์ประกอบเฉพาะด้วยการคลิกขวาและเลือก ตรวจ (หรือกด Q) คุณยังสามารถเปิดตัว ผู้ตรวจการ จากเมนูนักพัฒนาเว็บ.

คุณจะเห็นแถบเครื่องมือที่ด้านล่างของหน้าจอซึ่งคุณสามารถใช้เพื่อควบคุมผู้ตรวจสอบ องค์ประกอบที่คุณเลือกจะถูกเน้นและองค์ประกอบอื่น ๆ บนหน้าจะจางลง.

หากคุณต้องการเลือกองค์ประกอบใหม่ให้คลิกที่ ตรวจ บนแถบเครื่องมือวางเม้าส์ของคุณเหนือหน้าและคลิกองค์ประกอบของคุณ Firefox เน้นองค์ประกอบภายใต้เคอร์เซอร์ของคุณ.

คุณสามารถนำทางระหว่างองค์ประกอบหลักและองค์ประกอบย่อยได้โดยคลิกที่ breadcrumbs บนแถบเครื่องมือ.

สารวัตร HTML

คลิก HTML เพื่อดูรหัส HTML ขององค์ประกอบที่เลือกในปัจจุบัน.

เครื่องมือตรวจสอบ HTML ช่วยให้คุณสามารถขยายและยุบแท็ก HTML ทำให้ง่ายต่อการมองเห็นได้อย่างรวดเร็ว หากคุณต้องการดู HTML ของเพจในไฟล์แฟล็ตคุณสามารถเลือก ดูที่มาของหน้า จากเมนูนักพัฒนาเว็บ.

สารวัตร CSS

คลิก สไตล์ เพื่อดูกฎ CSS ที่ใช้กับองค์ประกอบที่เลือก.

นอกจากนี้ยังมีแผงคุณสมบัติ CSS - สลับระหว่างสองโดยคลิกที่ กฎระเบียบ และ คุณสมบัติ ปุ่ม เพื่อช่วยคุณค้นหาคุณสมบัติเฉพาะพาเนลคุณสมบัติจะมีกล่องค้นหา.

คุณสามารถแก้ไข CSS ขององค์ประกอบได้ทันทีจากแผงกฎ ยกเลิกการเลือกช่องทำเครื่องหมายใด ๆ เพื่อปิดการใช้งานกฎคลิกข้อความเพื่อเปลี่ยนกฎหรือเพิ่มกฎของคุณเองไปยังองค์ประกอบที่ด้านบนของบานหน้าต่าง ที่นี่ฉันได้เพิ่ม น้ำหนักตัวอักษร: ตัวหนา; กฎ CSS ทำให้ข้อความขององค์ประกอบเป็นตัวหนา.

Scratchpad ของ JavaScript

Scratchpad ยังเห็นการอัปเดตด้วย Firefox 10 และตอนนี้มีการเน้นไวยากรณ์ คุณสามารถพิมพ์รหัส JavaScript เพื่อเรียกใช้บนหน้าปัจจุบัน.

เมื่อคุณมีให้คลิก ปฏิบัติ เมนูและเลือก วิ่ง. รหัสทำงานในแท็บปัจจุบัน.

เว็บคอนโซล

Web Console จะแทนที่คอนโซลข้อผิดพลาดเก่าซึ่งเลิกใช้แล้วและจะถูกลบใน Firefox รุ่นอนาคต.

คอนโซลแสดงข้อความสี่ประเภทที่แตกต่างกันซึ่งคุณสามารถสลับการเปิดเผยของ - คำขอเครือข่ายข้อความแสดงข้อผิดพลาด CSS ข้อความแสดงข้อผิดพลาด JavaScript และข้อความนักพัฒนาเว็บ.

ข้อความนักพัฒนาเว็บคืออะไร มันเป็นข้อความที่พิมพ์ไปที่วัตถุ window.console ตัวอย่างเช่นเราสามารถเรียกใช้ window.console.log (“ Hello World”); รหัส JavaScript ใน Scratchpad เพื่อพิมพ์ข้อความผู้พัฒนาไปยังคอนโซล นักพัฒนาเว็บสามารถรวมข้อความเหล่านี้เข้ากับรหัส JavaScript เพื่อช่วยในการแก้ไขข้อบกพร่อง.

รีเฟรชหน้าและคุณจะเห็นคำขอเครือข่ายที่สร้างขึ้นและข้อความอื่น ๆ.

ใช้ช่องค้นหาเพื่อกรองข้อความ คลิกที่คำขอถ้าคุณต้องการดูรายละเอียดเพิ่มเติม.

ตั้งแต่ Firefox 10 เว็บคอนโซลสามารถทำงานร่วมกับ Page Inspector ได้ ตัวแปร $ 0 แสดงถึงวัตถุที่เลือกในปัจจุบันในการตรวจสอบ ตัวอย่างเช่นหากคุณต้องการซ่อนวัตถุที่เลือกในปัจจุบันคุณสามารถเรียกใช้ $ 0.style.display =” ไม่มี” ในคอนโซล.

หากคุณสนใจที่จะเรียนรู้เพิ่มเติมเกี่ยวกับการใช้คอนโซลและฟังก์ชั่นในตัวโปรดดูหน้าเว็บคอนโซลบนเว็บไซต์เครือข่ายนักพัฒนาของ Mozilla.

รับเครื่องมือเพิ่มเติม

รับเครื่องมือเพิ่มเติม ตัวเลือกจะนำคุณไปยังคอลเลกชัน Add-on Toolbox ของ Web Developer บนเว็บไซต์ Mozilla Add-Ons มันมีส่วนเสริมที่ดีที่สุดสำหรับนักพัฒนาเว็บรวมถึง Firebug และแถบเครื่องมือสำหรับนักพัฒนาเว็บ.

หากคุณใช้ Firefox มาสองสามปีคุณอาจจำผู้ตรวจสอบ DOM เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่ครบวงจรของ Firefox นั้นมีมานานแล้ว.