Google Chrome ไม่ใช่แค่เบราว์เซอร์เร็วสำหรับผู้ใช้ทั่วไป แต่ซ่อนคุณสมบัติ Developer ไว้ภายใต้ฝาเครื่อง ใช้ "Inspect Tool" เพื่อเข้าถึงพลังเหล่านี้ แม้ดูทะลุทะลวงตอนแรก แต่เครื่องมือนี้ให้ข้อมูลลึกถึงโครงสร้างเว็บไซต์ และช่วย Debug เว็บของตัวเองได้
เข้าถึง Inspect Tool
Inspect Tool อยู่ใน Context Menu ของ Chrome
คลิกขวาที่ Element ใดๆ ในเบราว์เซอร์ -> คลิก "Inspect" ใน Context Menu
หน้าต่างจะ Slide ออกมาจากข้างของ Chrome เรียกว่า DevTools Panel หากเคยใช้ Firebug บน Firefox อาจคุ้นเคยบางส่วน
มีอะไรเยอะมาย มาดูองค์ประกอบแต่ละส่วน
Inspecting the Inspector (ตรวจสอบตัวตรวจสอบ)
Inspect Panel แบ่งเป็น Tab หลายอัน ที่ด้านบนหน้าต่าง เราจะเน้น Tab "Elements" เริ่มต้น
มีปุ่มมีประโยชน์ 2 ปุ่ม ตรงข้าง Tab:
1. Inspect Element Tool – ให้ Mouse Over และเลือก DOM Elements ต่างๆ เพื่อ Inspect
2. Device Preview Mode – เปิดโหมดนี้เพื่อดูหน้าเว็บที่ Resolutions และ Screen Sizes ต่างๆ
คลิกปุ่มนี้ -> หน้าเว็บ Snap เข้ามุมมองใหม่ ใช้ Drop-down Menu เหนือ Preview หรือ Handles ด้านข้างเพื่อปรับขนาด Device Preview
HTML View
ส่วนใหญ่ของ DevTools Tab ถูกครองโดย HTML Pane
Pane นี้เหมือน "View Source" แบบ Super Power โครงสร้างตาม DOM Elements ต่อยอดอยู่ใน Parent Elements
Element ที่คุณ "Inspect" ตอนแรกจะ Highlight ด้วยพื้นหลังสีเทาหรือสีน้ำเงิน ตัวอย่าง: Inspect รูปภาพที่อยู่ใน Link -> เจอ Anchor Tag ที่ Highlight
รูปภาพอยู่ไหน? คลิก Disclosure Triangle (สามเหลี่ยมเล็ก) ข้าง <a> จะแสดง Elements ต่อยอด ในกรณีนี้คือ <img> Tag ที่คาดหวัง
เห็น Menu Bar เล็กๆ ที่ด้านล่าง HTML Pane เรียกว่า "Breadcrumb Trail" แสดง Parent Elements ทั้งหมดของ Element ที่เลือก คลิกที่ Element ใดๆ ใน Breadcrumb เพื่อนำทางไปนั้น
Styles (สไตล์)
ใต้ HTML View มี Pane แสดง CSS Rules ที่ Apply กับ Element นี้ เรียกว่า Styles Pane กรณีนี้เห็น Rules ทั้งหมดที่ Apply กับ Anchor Tag ที่ Inspect
Toggle Rule On/Off ได้โดย Hover แล้วคลิก Checkbox ข้าง Rule
จะเห็นการเปลี่ยนแปลงทันทีใน Page Preview คลิกโดยตรงที่ Rule -> เปลี่ยน Name และ Value ได้
ค้นหา Rules เฉพาะได้ด้วย Filter Search Box
Styles Pane ทำได้อะไรมากกว่านี้เยอะ ดู Documentation ของ Google สำหรับคำอธิบายครบถ้วน
Box Model และ Computed Style
ข้าง곁 Styles คือ Box Model ของ Element ที่เลือก หากไม่คุ้นเคย: Box Model เป็นการแสดงภาพนามธรรมของ Margin, Border, Padding, และ Content Size ของ Element นั้น
กรณีนี้ Element มีขนาดหลัก 461 x 209 Pixels ไม่มี Margin, Border, Padding -> กล่องเหล่านั้นว่าง
หากเลือก Element ที่มี Position, Margin, Border, Padding Box Model จะดูซับซ้อนกว่า
ยังเห็น Box Model แบบ In-situ ได้โดย Mouse Over DOM Elements พร้อม Inspect Element Tool เปิดอยู่
ใต้ Box Model มีรายการ Styling Rules ทั้งหมดที่ Apply กับ Element นี้ แตกต่างจาก Styles Pane: ไม่แสดงโค้ด CSS จริง แสดงแค่ "ผลลัพธ์" ของ Rules นั้น们 เรียกว่า "Computed Style" คือผลรวมของ CSS ทั้งหมด
ค้นหา Rules เฉพาะได้ด้วย Filter Box ด้านล่าง
สรุป
หากทำงานกับหน้าเว็บบ่อย Chrome Inspect Tool คุ้มค่าที่จะสำรวจ Tab อื่นๆ ใน DevTools เช่น Console และ Network มีค่ามากสำหรับ Developer มีอะไรมากกว่าที่จะครอบคลุมได้ในที่นี้ แต่ Documentation ของ Google เองครบถ้วนและมีประโยชน์
