ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับเครื่องมือสำหรับนักพัฒนา Firefox

Firefox Developer Edition เป็น Firefox รุ่นพิเศษที่ได้รับการปรับแต่งสำหรับนักพัฒนา มีคุณลักษณะล่าสุดของ Firefox พร้อมด้วยเครื่องมือสำหรับนักพัฒนาผู้เชี่ยวชาญจำนวนหนึ่ง ฉันจะให้คำแนะนำเกี่ยวกับคุณลักษณะต่างๆ เพื่อให้คุณทราบทุกสิ่งที่ควรรู้เกี่ยวกับเครื่องมือสำหรับนักพัฒนาของ Firefox

หน้าจอผู้ใช้

หลังจากติดตั้ง Firefox Developer Edition คุณจะสังเกตเห็นว่ามันดูแตกต่างไปจากแถบเครื่องมือ Firefox มาตรฐานเล็กน้อย Firefox ได้ใช้แนวทางที่เน้นนักพัฒนามากขึ้นอย่างแน่นอนในการออกแบบแถบเครื่องมือ ทำให้มีลักษณะที่แคบลงและตกแต่งด้วยปุ่มต่างๆ ตามค่าเริ่มต้น

ธีมเริ่มต้นสำหรับเครื่องมือสำหรับนักพัฒนา Firefox เป็นสีเข้ม ซึ่งน่าจะเป็นผลมาจากการทดสอบของผู้ใช้ อย่างไรก็ตาม หากคุณไม่ชอบธีมสีเข้ม คุณสามารถปิดธีมสำหรับนักพัฒนาซอฟต์แวร์โดยไปที่ Menu > Customize

การสร้างเครื่องมือ

Firefox Developer Edition มาพร้อมกับเครื่องมือสร้างมากมาย ซึ่งออกแบบมาสำหรับเว็บไซต์และเว็บแอปสำหรับสร้าง ด้านล่างนี้ ฉันได้สรุปเครื่องมือและประโยชน์ของเครื่องมือเหล่านี้ เพื่อให้คุณไม่ต้องไปหาข้อมูลนี้

Scratchpad

เครื่องมือนี้เปิดโอกาสให้นักพัฒนาเว็บได้ทดลองโค้ด JavaScript ในสภาพแวดล้อมที่ให้บริการโดย Scratchpad คุณสามารถเขียน เรียกใช้ และตรวจสอบผลลัพธ์ของโค้ดที่โต้ตอบกับหน้าปัจจุบันได้

หากต้องการเปิด Scratchpad ให้กด Shift F4 หรือไปที่เมนู Web Developer แล้วคลิก Scratchpad ซึ่งจะเปิดหน้าต่างที่คุณสามารถเขียนโค้ดได้ เมื่อคุณทำเสร็จแล้ว ให้คลิก ดำเนินการ > เรียกใช้ และโค้ดจะทำงานในแท็บปัจจุบัน

ตัวแก้ไขสไตล์

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

ในการเปิด Style Editor ให้ไปที่เมนู Web Developer และคลิกที่ Style Editor กล่องเครื่องมือสำหรับนักพัฒนา Firefox จะปรากฏขึ้นที่ด้านล่างของเบราว์เซอร์พร้อมกับ Style Editor ที่พร้อมใช้งาน

Shader Editor

การใช้ Shader Editor ใน Firefox นั้นง่ายมาก นักพัฒนาสามารถดูและแก้ไข Fragment shader และ vertex ได้อย่างเต็มที่ตามที่ WebGL ใช้ และรวดเร็วสำหรับผู้ที่ไม่ทราบ WebGL ใช้ JavaScript (ผ่าน API) อย่างชาญฉลาดเพื่อแสดงผลกราฟิกทั้ง 2D และ 3D โดยตรงผ่านเบราว์เซอร์ Firefox ในขณะที่ไม่ต้องใช้ปลั๊กอิน

ในการใช้งาน Shader Editor จำเป็นต้องเปิดใช้งานก่อน ในการดำเนินการนี้ ให้ไปที่การตั้งค่า Toolbox แล้วทำเครื่องหมายที่ช่องถัดจาก 'Shader Editor' จากนั้น Shader Editor จะแสดงในแถบเครื่องมือ Firefox คลิกที่มันและคุณจะสามารถเปิดได้

โปรแกรมแก้ไขเสียงบนเว็บ

Web Audio Editor API ช่วยให้นักพัฒนาสามารถสร้างบริบทของเสียงได้ นักพัฒนาจะต้องสร้างโหนดเสียงโดยให้:

• แหล่งเสียง
• โหนดที่ทำการแปลง
• หมายเหตุแสดงปลายทางที่เลือกสำหรับสตรีมเสียง

Web Audio Editor จะตรวจสอบด้านเสียงของหน้าและแสดงภาพในกราฟ ซึ่งช่วยให้นักพัฒนาสามารถตรวจสอบการทำงานและการทำงาน และตรวจสอบว่าโหนดทั้งหมดเชื่อมต่ออย่างถูกต้อง นักพัฒนาสามารถแก้ไขและตรวจสอบคุณสมบัติของโหนด AudioParam รวมถึงคุณสมบัติอื่นๆ ได้เช่นกัน

เช่นเดียวกับ Shader Editor ต้องเปิดใช้งาน Web Audio Editor ด้วยตนเอง และไม่ใช่การตั้งค่าเริ่มต้น การเปิดใช้งานทำได้ง่าย: เพียงกลับไปที่การตั้งค่าเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ จากนั้นทำเครื่องหมายที่ช่องถัดจาก 'เสียงบนเว็บ' จากนั้น คุณจะเห็นว่ามีการแสดงแท็บเพิ่มเติมภายในแถบเครื่องมือ Firefox Toolbox เพียงคลิกที่แท็บนี้และหน้าจะถูกโหลดซึ่งคุณสามารถสร้างบริบทเสียงได้

เครื่องมือดีบัก

เครื่องมือแก้ไขข้อบกพร่องของ Firefox ได้รับการออกแบบมาเพื่อตรวจสอบ สำรวจ และตรวจแก้จุดบกพร่องเว็บไซต์และเว็บแอป ด้านล่างนี้ ฉันได้สรุปคุณลักษณะสำคัญของเครื่องมือเหล่านี้และประโยชน์ของเครื่องมือเหล่านี้

สารวัตรหน้า

เครื่องมือ Page Inspector ช่วยให้นักพัฒนาสามารถตรวจสอบและแก้ไขโค้ด HTML และ CSS ของหน้าเว็บได้ การใช้เครื่องมือนี้ นักพัฒนาสามารถตรวจสอบหน้าต่างๆ ผ่านเวอร์ชันที่โหลดในเครื่องหรือผ่านเป้าหมายระยะไกลได้

การเปิด Page Inspector เป็นเรื่องง่าย หากคุณได้เลือกองค์ประกอบแล้ว คุณสามารถคลิกขวาที่องค์ประกอบแล้วเลือก 'ตรวจสอบองค์ประกอบ' หรือคุณสามารถไปที่เมนูนักพัฒนาเว็บแล้วคลิกตัวเลือกตัวตรวจสอบ ตัวตรวจสอบหน้าจะปรากฏที่ด้านล่างของเบราว์เซอร์ของคุณ

เว็บคอนโซล

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

เว็บคอนโซลได้รับการออกแบบมาเพื่อแทนที่ Error Console แบบเก่า ซึ่งเดิมเป็นส่วนหนึ่งของเครื่องมือสำหรับนักพัฒนาของ Firefox ในขณะที่ Error Console ได้จัดเตรียมรายการข้อผิดพลาดจำนวนมากจากหลาย ๆ หน้า Web Console จะแสดงเฉพาะข้อมูลที่เกี่ยวข้องกับหน้าเว็บใดหน้าหนึ่งเท่านั้น จึงทำให้มีประโยชน์มากขึ้น

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

ดีบักเกอร์

เครื่องมือ Firefox Debugger เปิดโอกาสให้นักพัฒนาเว็บตรวจสอบและแก้ไขโค้ด JavaScript ของคุณ นอกจากนี้ยังสามารถใช้เพื่อระบุจุดบกพร่อง เมื่อใช้ Debugger คุณสามารถดีบักโค้ดใน Firefox หรือจากระยะไกลบนอุปกรณ์ Firefox OS หรือ Firefox สำหรับ Android

ในการเปิดโปรแกรมแก้ไขข้อบกพร่อง ให้ไปที่เมนูย่อย Web Developer ในเมนูหลักของ Firefox แล้วคลิก 'Debugger' หรือคุณสามารถกด Ctrl Shift S และกล่องเครื่องมือจะปรากฏที่ด้านล่างของเบราว์เซอร์โดยเปิดใช้งานดีบักเกอร์และพร้อมใช้งาน

การตรวจสอบเครือข่าย

Network Monitor ได้รับการออกแบบเพื่อแสดงคำขอเครือข่ายต่างๆ ทั้งหมดที่ Firefox ทำขึ้น ระยะเวลาในคำขอแต่ละรายการ และรายละเอียดของแต่ละคำขอ ไปที่ เมนูนักพัฒนาเว็บ > เครือข่าย เพื่อเปิดใช้งานเครื่องมือ คุณจะต้องรีเฟรชหน้าเพื่อดูคำขอ

ใน Network Monitor คุณจะดูไทม์ไลน์ของคำขอและกรองเนื้อหาตามประเภทได้ นอกจากนี้ยังมีเครื่องมือวิเคราะห์ประสิทธิภาพ ซึ่งคุณสามารถใช้เพื่อดูว่าเบราว์เซอร์ใช้เวลานานเท่าใดในการดาวน์โหลดส่วนต่างๆ ของเว็บไซต์ของคุณ ในการเรียกใช้เครื่องมือนี้ เพียงคลิกไอคอนนาฬิกาจับเวลาในแถบเครื่องมือที่ด้านล่างของ Network Monitor

เจ้าหน้าที่ตรวจสอบการจัดเก็บ

หากคุณต้องการทราบข้อมูลเกี่ยวกับประเภทพื้นที่จัดเก็บข้อมูลประเภทต่างๆ ที่หน้าเว็บสามารถใช้ได้ คุณจะต้องเปิดใช้งานเครื่องมือตรวจสอบพื้นที่เก็บข้อมูล ตัวตรวจสอบพื้นที่เก็บข้อมูลสามารถใช้เพื่อตรวจสอบคุกกี้ พื้นที่จัดเก็บในเครื่อง พื้นที่จัดเก็บเซสชัน และ IndexedDB ได้ดังที่เป็นอยู่ในปัจจุบัน

Storage Inspector ให้มุมมองที่เก็บข้อมูลแบบอ่านอย่างเดียว อย่างไรก็ตาม Firefox ได้กล่าวว่ากำลังพัฒนาเครื่องมือนี้ เพื่อให้นักพัฒนาสามารถแก้ไขเนื้อหาที่เก็บข้อมูลของตนได้ในอนาคต

ในการเปิด Storage Inspector ให้ไปที่เมนูย่อย Web Developer และคลิกที่ Storage Inspector หรือคุณสามารถกด Shift + F9 เพื่อใช้แป้นพิมพ์ลัด

แถบเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์

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

เปิดแถบเครื่องมือสำหรับนักพัฒนาโดยกด Shift + F2 หรือคุณสามารถไปที่เมนูนักพัฒนาเว็บและคลิกที่แถบเครื่องมือสำหรับนักพัฒนา

เครื่องมือดีบักอื่นๆ – มุมมอง 3 มิติ, Eyedropper, iFrames

เครื่องมือแก้ไขข้อบกพร่องอื่นๆ ที่รวมอยู่ในแพ็คเกจเครื่องมือสำหรับนักพัฒนา Firefox ได้แก่:

• มุมมอง 3 มิติ: ให้มุมมอง 3 มิติของบล็อก HTML และเนื้อหาที่ซ้อนกัน
• Eye Dropper: ช่วยให้คุณเลือกสีเฉพาะจากหน้าและคัดลอกไปยังคลิปบอร์ด)
• การเลือก iFrames: ช่วยให้คุณสามารถชี้เครื่องมือสำหรับนักพัฒนาของคุณไปที่ iFrames เฉพาะภายในเอกสารได้

เครื่องมือมือถือ

นอกจากเครื่องมือสร้างและแก้ไขจุดบกพร่องของ Firefox แล้ว ยังมีเครื่องมือมือถืออีกจำนวนหนึ่งที่นักพัฒนาสามารถใช้ในการพัฒนามือถือได้ ฉันจะพูดถึงสิ่งเหล่านี้อย่างครบถ้วนด้านล่าง

ตัวจัดการแอป

เครื่องมือนี้ช่วยให้นักพัฒนาทดสอบ ปรับใช้ และดีบักแอป HTML5 บนอุปกรณ์ Firefox OS นอกจากนี้ยังทำหน้าที่เป็นเครื่องจำลองเพื่อให้สามารถดำเนินการทดสอบได้โดยตรงจากเบราว์เซอร์เดสก์ท็อป Firefox

ตัวจัดการแอปมาพร้อมกับแผงแอป ซึ่งนักพัฒนาสามารถจัดการแอปในเครื่องและแอปที่โฮสต์ภายนอกได้ แผงอุปกรณ์ซึ่งให้ข้อมูลเกี่ยวกับอุปกรณ์ที่เชื่อมต่อ เช่น เวอร์ชันระบบปฏิบัติการและแอปที่ติดตั้ง และ Toolboxes ซึ่งเป็นชุดเครื่องมือสำหรับนักพัฒนา Firefox ที่สามารถใช้กับแอปที่ทำงานอยู่

WebIDE

เครื่องมือมือถือนี้ช่วยให้นักพัฒนาสามารถสร้าง แก้ไข ดำเนินการ และแก้ไขข้อบกพร่องของเว็บแอปผ่าน Firefox OS Simulator หรือผ่านอุปกรณ์ Firefox OS คุณสามารถใช้เพื่อเชื่อมต่อกับ Firefox Developer Tools กับเบราว์เซอร์อื่นๆ เช่น Firefox สำหรับ Android และ Chrome สำหรับ Android

เครื่องมือมือถืออื่นๆ

เครื่องมือมือถืออื่นๆ ได้แก่:

• Remote Debugging สำหรับ Firefox สำหรับ Android
• Firefox OS Simulator: สิ่งนี้จำลองอุปกรณ์ Firefox OS แต่ทำงานบนเดสก์ท็อป
• มุมมองการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์: ช่วยให้คุณสามารถดูว่าเว็บไซต์หรือเว็บแอปของคุณมีลักษณะอย่างไรบนอุปกรณ์ต่างๆ ที่มีขนาดหน้าจอต่างกัน

เครื่องมือประสิทธิภาพ

ประสิทธิภาพเป็นสิ่งสำคัญในการพัฒนาเว็บ ด้วยเหตุนี้ Firefox จึงมอบเครื่องมือจำนวนหนึ่งให้กับนักพัฒนาเว็บที่สามารถใช้ในการวินิจฉัยและแก้ไขปัญหาด้านประสิทธิภาพกับเว็บไซต์และเว็บแอป

เครื่องมือประสิทธิภาพ

เครื่องมือประสิทธิภาพแทนที่ตัวสร้างโปรไฟล์การสุ่มตัวอย่าง JavaScript ดั้งเดิมของ Firefox ยังคงมีโปรไฟล์การสุ่มตัวอย่างเวอร์ชันที่อัปเดต แต่ก็มีไทม์ไลน์อัตราเฟรมด้วย คาดว่าจะมีคุณสมบัติเพิ่มเติมในอนาคต

เครื่องมือประสิทธิภาพสามารถใช้เพื่อสร้าง วิเคราะห์ และสุ่มตัวอย่างโปรไฟล์

ตัวสร้างโปรไฟล์ JavaScript

JavaScript Profiler ได้รับการออกแบบมาเพื่อช่วยให้นักพัฒนาพบปัญหาในโค้ด JavaScript ทำได้โดยการสุ่มตัวอย่างสแต็กการเรียก JavaScript ปัจจุบันและให้สถิติเกี่ยวกับมัน

เครื่องมือกระพริบสี

เครื่องมือนี้จะเน้นส่วนของหน้าเว็บของคุณที่เบราว์เซอร์จำเป็นต้องทาสีใหม่เพื่อตอบสนองต่ออินพุต ช่วยให้นักพัฒนาเว็บสามารถทราบได้ว่าเว็บไซต์ของตนทำให้เบราว์เซอร์ทาสีใหม่มากเกินความจำเป็นหรือไม่ อย่าลืมว่าการทาสีใหม่อาจส่งผลเสียต่อประสิทธิภาพการทำงานของคุณ ดังนั้นจึงควรใช้เครื่องมือนี้เพื่อกำจัดการทาสีที่ไม่จำเป็นและปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณ

แยกโปรไฟล์นักพัฒนา

การต้องสลับไปมาระหว่างเวอร์ชันต่างๆ ของ Firefox จะเป็นความเจ็บปวดอย่างแท้จริง ข่าวดีก็คือ Firefox Developer Edition ใช้โปรไฟล์ที่แยกจากกันโดยสิ้นเชิงกับ Firefox เวอร์ชันอื่นที่คุณได้ติดตั้งไว้

บันทึกประจำรุ่นของนักพัฒนา

นักพัฒนาที่ต้องการอ่านหมายเหตุเกี่ยวกับ Firefox Developer Edition รุ่นปัจจุบันและในอดีตสามารถทำได้โดยไปที่ลิงก์นี้

ห่อ

หากคุณเป็นนักพัฒนาเว็บใหม่หรือมีประสบการณ์ คุณจะได้รับประโยชน์อย่างมากจากการใช้เครื่องมือสำหรับนักพัฒนา Firefox ที่มีรายละเอียดและหลากหลาย ตั้งแต่การสร้างโค้ดไปจนถึงการดีบัก HTML เครื่องมือนี้จะช่วยให้คุณดำเนินการต่างๆ ที่จำเป็นสำหรับการพัฒนาเว็บไซต์หรือเว็บแอปได้ เครื่องมือที่ใช้ในโทรศัพท์มือถือนอกจากนี้ยังมีประโยชน์อย่างมากโดยเฉพาะอย่างยิ่งสำหรับผู้ที่ต้องการสร้างเว็บไซต์ที่ตอบสนองในการที่จะได้รับประโยชน์จากล่าสุด (21 ^{เมษายน} 2015) การปรับปรุงอัลกอริทึมของ Google

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ Firefox Developer Tools ตรงไปที่เว็บไซต์ Mozilla Developer และเข้าร่วมชุมชนนักพัฒนา Firefox Developer Edition สามารถดาวน์โหลดและใช้งานได้ฟรี