ผลพวงจาก Blognone Tech Day, ตอนที่คุณป็อกใช้ Firefox เปิด RoR ที่ทำ demo อยู่เห็นมี console บอกว่าเบราเซอร์ส่งอะไรไปบ้าง. เลยไปคุยถามได้ความว่าเป็น Firebug. กลับมาที่บ้านแล้วเลยไปดู Firefox Extension ประเภท Developer Tools. ดูๆไปว่ามีอะไรน่าใช้บ้างเพราะตอนนี้ที่ใช้อยู่ก็มี Web developer ซึ่งก็เรียกว่าดีอยู่แล้วยังไม่เคยดูตัวอื่นเพิ่มเติม, วันนี้เลยลองเข้ามาดูทีละตัว.

สรุปว่าลองลิสๆดูเลือกเอาตัวที่น่าสนใจมาติดตั้งดังนี้

• DOM inspector
  
  
  
  

  Dom inspector

  รู้สึกว่าตอนติดตั้ง Firefox มันก็มีมาอยู่แล้วแต่เห็นให้ดาว์นโหลดก็เลยดาว์นโหลดมาด้วย. อันนี้ใช้ดีเวลาดูโครงสร้างของเว็บไซด์. ผมมักจะใช้ตอนที่ต้องการเอาเว็บไซด์นั้นเป็นตัวอย่างแล้วดูว่ามันเขียนอย่างไร, ใช้ TAG ไหนเขียนถึงเป็นอย่างนั้น.

• FireBug
  
  
  

  Firebug

  พึ่งรู้จักวันนี้. เท่าที่ใช้ๆผ่านๆคงจะไม่ใช้ DOM inspector แล้วเพราะอันนี้ก็ทำได้และทำได้ดีกว่าด้วย. ใช้ debug JavaScript, AJAX ฯลฯ ได้.

• View source chart
  
  
  

  View source chart

  ตัวนี้เอาไว้สำหรับดู source ของหน้าที่เปิดอยู่. ปรกติ Firefox ก็ดู source ได้อยู่แล้ว (ผมชอบกด C-u) แต่อันนี้จะแยกสีแบ่งเป็นส่วนๆให้เห็นชัดเจน แถมทำกรอบใหด้วย.

• X-ray
  
  
  

  X-ray

  อันนี้ก็เจ๋ง. กดคลิ้กขวาเลือก X-ray เสร็จแล้วมันจะแสดงโค้ดที่ตรงส่วนต่างๆเลย. สะดวกมาก, สมชื่อ X-ray จริงๆ. จะให้กลับคืนเหมือนเดิมก็คลิ้ก X-ray อีกครั้งครับ.

• Header monitor
  
  
  

   

  อันนี้เอาไว้แสดง HTTP header ที่เซิร์ฟเวอร์ส่งกลับมา. บางทีอาจจะมีประโยชน์เลยเอามาใช้ดู. มันจะแสดง Header ที่เราเลือกไว้ตรง status bar ด้านล่างให้. สมมติว่าผมเลือกอยากดู Content-Type มันก็จะแสดงแค่ Content-Type คือได้ตัวเดียว. อยากให้มันแสดงหลายๆตัวจัง. Extension นี้ต้องการ LiveHTTPHeaders ต้องลงด้วยถึงจะใช้ได้.

• LiveHTTPHeaders
  
  
  

  Live HTTP headers

  อันนี้เป็นตัวที่ Header Monitor ใช้ซึ่งจะให้ข้อมูลมากกว่าแต่ Header Monitor ใช้สะดวกกว่าเพราะมันอยู่ตรง Status bar เลย. บางทีนี่ต้องใช้เพราะเบราเซอร์มันแสดงผล HTML ที่ได้มา. ส่วน HTTP header ที่รับส่งนี่ไม่มีให้ดูอยู่แล้วจึงนับว่า Extension ตัวนี้ดีมาก. ถ้าไม่มีตัวนี้ก็ต้องพึ่ง telnet จากเทอร์มินอล (เท่าที่เคยทำ).

• Measure it
  
  
  

  Measure it

  คนคิดช่างมีไอเดียดีจริงๆ, ชอบมากสำหรับ Extension อันนี้. เอาไว้วัดขนาดพิกเซลส่วนต่างๆในหน้าที่สร้างอยู่ไง. ถ้าไม่มีตัวนี้จะทำยังไงเนี่ย? Capture แล้วเอาไปวัดใน Gimp ? ตรง Status bar จะมีไอคอนไม้บรรทัดให้กด. แล้วเอาเมาส์กากบาทไปลากวัดส่วนที่ต้องการได้เลย.

• ColorZilla
  
  
  

  ColorZilla

  อันนี้แนวคิดเหมือนกับไม่บรรทัดวัดเมื่อสักครู่ คือเอาเมาส์ไปจิ้มที่ต้องการรู้โค้ดสีแล้วมันจะแสดงที่ Status bar. หลายครั้งที่ออกแบบเว็บไซด์แล้วอยากจะรู้ว่าตรงนั้นสีอะไรนะ. ผมก็ขวานผ่าซาก, capture เข้า Gimp แล้วใช้ color picker. ตั้งแต่นี้เป็นต้นไปไม่ต้องแล้วครับ.

• Regular Expression Tester
  
  
  

  Regexp Tester

  อันนี้ทำให้นึกถึงEPIC ซึ่งเป็น Plug-in ของ Eclipse สำหรับใช้กับ Perl. มันจะมี Tool คล้ายๆกันสำหรับเช็ค Regexp ที่เขียนว่า match กับอะไรบ้าง. เมื่อก่อนสงกรานต์ก็มีโอกาสเปิดคอร์สสอน Perl ก็ใช้ EPIC นี่แหละทดสอบ regexp ให้ผู้ฝึกอบรมดู. (ใครสนใจเรียน Perl ติดต่อได้ครับ) ต่อไปนี้เวลาต้องการตรวจสอบ regexp ก็แปลกดีมาเปิด Firefox แทน.

• IE Tab
  
  
  

  IE Tab

  อันนี้มีประโยชน์มากครับ. เอาไว้ใช้กับเว็บที่มันใช้ Firefox ไม่ได้หรือไม่ก็เวลาพัฒนาเว็บต้องทดสอบทั้ง Firefox และ IE. ปรกติ Firefox จะมี Extension ที่เลือกเปิดลิงก์ด้วย IE ได้. คือไปเรียก IE มาเปิด URL ต่างหากเลย. แต่นี่เปิด IE ใน Tab ของ Firefox. ก็ใช้ Ctrl+Tab เปลี่ยนแท็บสะดวกมาก.

  สมมติว่าเปิดหน้าไหนแล้วใช้ Firefox ไม่ได้ต้องเปลี่ยนเป็น IE ก็แค่เลื่อนเมาส์ไปที่ Status bar ด้านขวาล่างแล้วกดไอคอน Firefox, มันก็จะเรียน IE มาเปิดให้ในแท็บนั้นเลย. แล้วไอคอนข้างล่างก็จะเปลี่ยนบอกให้รู้ว่าอันนี้เป็น IE.

  เท่าที่ลองดูตัวแปร HTTP_USER_AGENT ที่เซิร์ฟเวอร์รับไป, ถ้าเป็นเป็น Firefox มันจะมีค่าเป็น Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.0.1)Gecko/20060308 Firefox/1.5.0.1. ส่วนถ้าลอง IE Tab นี่จะมีค่าเป็น Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.1.4322; FDM; .NET CLR 2.0.50727). เป็น IE แท้ๆทำไมเขียนว่า Mozilla/4.0 นำหน้าก็ไม่รู้.