เครื่องมือนักพัฒนาของ Firefox ใช้สิ! แล้วคุณจะขาดมันไม่ได้

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

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

โดยเครื่องมือนักพัฒนาที่มีอยู่ตอนนี้ก็คือ

• เว็บคอนโซล (Web Console)
• ตัวตรวจสอบ (Inspector)
  • Inspector: ดูส่วนประกอบเว็บทั้งหมดได้แค่เพียงคลิกขวา
• ตัวดีบั๊ก (Debugger)
• เครื่องมือแก้ไขสไตล์ (Style Editor)
• Profiler
• เครือข่าย (Network)
• กระดานทดลอง (Scratchpad)
• มุมมองการออกแบบเชิงตอบสนอง (Responsive Design View)
• แถบเครื่องมือนักพัฒนา (Developer Toolbar)

เริ่มจากการคลิกที่ สลับเครื่องมือ ก็จะปรากฏที่หน้า เว็บคอนโซล ขึ้นมา ซึ่งตัวคอนโซลนี้ก็เอาไว้บอกรายละเอียดเกือบทุกอย่างเช่น คำเตือน ข้อผิดพลาด ข้อมูลต่างๆ ที่เกี่ยวกับ javascript, css, การเข้าถึงเครือข่าย และข้อความ log (เช่น console.log) แถมยังมีช่องค้นหาคำที่เราต้องการหาได้ด้วย

ในส่วนถัดมาก็เป็น ตัวตรวจสอบ (Inspector) เครื่องมือนี้เอาไว้จิ้มดูรายละเอียดแต่ละส่วน ๆ ของหน้าเว็บว่ามีอะไรบ้าง ยาวเท่าไหร่ ใช้สีไหน ฟอนต์อะไร ฯลฯ

ตัวดีบั๊ก (Debugger) เอาไว้งานสำหรับดีบั๊กใน javascript โดยเฉพาะสามารถดูเป็นขั้นๆ ได้เลย มีหยุดพักได้ด้วย

เครื่องมือแก้ไขสไตล์ (Style Editor) ก็เอาแก้ไขไฟล์ css ของหน้านั้น ๆ

Profiler เอาไว้สำหรับดูเวลาของฟังก์ชันที่ javascript ใช้ ว่าใช้ไปเท่าไหร่ เหมาะสำหรับคนที่เน้นเรื่องการ optimise

เครือข่าย (Network) ดูรายละเอียดเกี่ยวกับการเข้าถึงเครือข่ายว่า ใช้เวลาเท่าไหร่ ขนาดไหน สถานะอะไร เมธอดไหนบ้าง ที่ค่อนข้างละเอียดมาก และสีสันของเครื่องมือตัวนี้ก็ค่อนข้างสวยเลยทีเดียว

กระดานทดลอง (Scratchpad) เอาเขียน javascript และรัน javascript แบบสดๆ ในหน้าเว็บได้เลย

ตัว highlight หน้าเว็บที่มีสีแตกต่างกัน เอาไว้ดูคร่าว ๆ ว่าแต่ละบล็อกใช้ความกว้างสูงไปประมาณไหน

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

มุมมองการออกแบบเชิงตอบสนอง (Responsive Design View) เหมาะสำหรับยุคโมบายล์มือถือสมัยนี้ ที่เวลาทำเว็บต้องทดสอบในหลายขนาดหน้าจอ

และถ้าใครมีจอภาพยาวๆ อยากประหยัดเนื้อที่ด้านความสูงก็มีโหมดแถบข้างมาให้

หรือถ้ามีสองจอจะดีดออกมาเป็นหน้าต่างก็ไม่มีปัญหา

ถ้าไม่ชอบหน้าตาแบบมืด ๆ ก็ปรับเป็นสว่างได้ในหน้าการตั้งค่า แถมยังเลือกปิดเครื่องมือที่ไม่ใช้บ่อยๆ ก็ได้ และก็ยังมีการดีบั๊กโครม (ที่ไม่ใช่ Google Chrome) และ รีโมทอยู่ เอาไว้ใช้ดีบั๊ก Firefox OS ครับผม

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

ขอบคุณ : https://www.mhafai.com/2013/06/you-will-fall-in-lo...