Inspector หรือ ตัวตรวจสอบ(หน้าเว็บ) เป็นเครื่องมือพื้นฐานสำหรับการทำเว็บเลยก็ว่าได้ โดยเครื่องตัวนี้เอาไว้จิ้มหาชิ้นส่วนใน HTML ทีเราต้องการจะตรวจสอบว่า กว้าง ยาว สูง มีคุณสมบัติของ CSS อะไรบ้าง และรวมถึงการเพิ่ม/ปรับเปลี่ยน/ลบคุณสมบัตินั้น ๆ ด้วย วิธีเปิดใช้งานนั้นมี 3 วิธี แต่จะแนะนำ 2 วิธีที่ง่ายที่สุดก็คือ

• กด Ctrl + Shift + I (ไอ)
• คลิกขวาที่หน้าเว็บแล้วกด “ตรวจดูส่วนประกอบ”
  

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

พอเปิด ตัวตรวจสอบ ปุ๊บมันก็จะมีหน้าตาเป็นอย่างนี้ เราจะเห็นโครงสร้างของ HTML ทั้งหมดเหมือนกับการดูซอร์สโค้ด สมมติว่า ถ้าเราอยากรู้ว่า element ของ h2 มีอะไรบ้างก็แค่ไปดูที่ส่วนของ กฎ (Rules) ก็จะเห็น

มาลองเพิ่มคุณสมบัติ css กันแบบ inline กันหน่อย… ก็ทำได้สด ๆ ดูได้ทันที

ในส่วนของ คำนวณ (Computed) ก็จะเห็นว่า element ที่สืบทอด (inherit) มามีอะไรบ้าง ถ้าเราติ๊กตรงเบราว์เซอร์สไตล์มาก็จะโชว์คุณสมบัติที่เบราว์เซอร์กำหนดมาเป็นค่าเริ่มต้นให้ดูด้วย

(Firefox 22 ขึ้นไป) อันนี้เป็นคุณสมบัติใหม่และเป็นคุณสมบัติที่ชอบมาก ๆ ตามปกติในช่อง กฎ ก็จะมีบอก font-family ว่าใช้ตัวไหนบ้าง แต่เราก็ไม่รู้ว่าเบราว์เซอร์นะมันใช้ฟอนต์อะไรในกรณีที่เรากำหนดฟอนต์หลายตัวและระบบปฏิบัติการมันมีฟอนต์ที่ css กำหนดหรือเปล่า? แต่ใน แบบอักษร สามารถดูได้ว่า element ที่เราจิ้มดูอยู่ใช้ฟอนต์ตระกูลอะไร ถ้ามีการใช้ @font-face ก็จะมีการบอก url และโครงสร้าง css มาให้ดูด้วย มีประโยชน์และดูง่ายมาก ๆ

Box Model ก็เอาไว้ดูว่า element ที่เราจิ้มมี width, height, border, margin และ padding อยู่ที่เท่าไหร่บ้าง

ในกรณีที่เราอยากดูว่า css ในช่วง :hover :focus หรือ :active เนี่ยมันมีคุณสมบัติอะไร เราก็แค่จิ้มที่ป๊อปอัพของ ตัวตรวจสอบ ที่อยู่ด้านบนแล้วเลือกช่วงที่เราอยากตรวจสอบ ที่ผมมักจะเจอบ่อย ๆ ก็เช่น :hover ก็จิ้มเลือกซะ เราก็จะเห็นมันปรากฏที่หน้าเว็บและคอนโซลของ ตัวตรวจสอบ เสมือนเราเอาเมาส์ไปจ่ออยู่ ซึ่งแต่ก่อนผมก็ไม่รู้ว่าจะทำยังไงเพราะเราต้องเอาเมาส์ออกมาดูเลื่อนดูคุณสมบัติในช่อง ไม้บรรทัด แทน แต่มันจะใช้ไม่ได้ในกรณีที่ใช้ javascript ในการจับ event จะใช้วิธีนี้ได้ก็ต่อเมื่อเขียนเป็น pure css เท่านั้น (ผมเพิ่งรู้เมื่อวานจากคนรอบข้างที่ผมเพิ่งแนะนำเครื่องมือพัฒนาเว็บใน Firefox ว่ามันทำอย่างนี้ได้ด้วย)

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