มันคือ extension ใน Google Chrome หรือ add-on is ของ Mozilla Firefox ที่จะช่วยในการพัฒนาเว็บได้ง่ายชึ้น ทั้งหาข้อผิดพลาด และค้นหาส่วนประกอบต่าง ๆ แก้ไขหน้าเว็บให้ทำงานได้ง่ายขึ้นทั้ง web developer และ QA
ก่อนอื่นติดตั้งโดย
- Mozilla Firefox เปิด firefox แล้วเข้าไปที่ Web Developer
- Google Chrome เปิด Chrome แล้วเข้าไปที่ Web Developer
เพราะว่า firefox มันใช้ง่ายกว่า เลยจะยกตัวอย่างเฉพาะ firefox
- หลังจากติดตั้งแล้วมันจะซ่อนอยู่ข้างบนในปุ่ม extension ทางขวามือ ไกล้ ๆ แฮมเบอร์เก้อสามขีดนั้นละ
- คลิก extension
- Mange extensions
- จะมีอีก tab เปิดขึ้นมา หรือจะเปิด about:addons ตรง ๆ ก็ได้
- เลือนไปที่รายการ Web Developer
- สไลด์ ปุ่มขวามือ จะได้แสดงเป็นรูปเฟืองสีม่วงใน tools bar ข้าง ๆ แฮมเบอร์เก้อ จะได้ใช้ง่าย ๆ
ตัวอย่างเมนูที่มีประโยชน์
- เปิดหน้าเว็บที่จะ test
- คลิกรูปเฟืองสีม่วงใน tools bar ข้าง ๆ แฮมเบอร์เก้อ
- จะมี popup แสดง
- ไปที่เท็บ Forms
- คลิก View Form Information
จะมีเท็บขึ้นมาใหม่และแสดงว่ามีกี่ฟอร์ม มีกี่ input ลองใช้ดู มี tools ที่มีประโยชน์หลายตัวเลย
อ่านเพิ่มเติม