วิธีใช้เครื่องมือสำหรับนักพัฒนาเว็บของ 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 นั้นมีมานานแล้ว.
