รู้จักกับ Inspector เครื่องมือช่วยคนทำเว็บ

Inspector (บางคนก็เรียก Debugger หรือ Developer Tools) เป็นเครื่องมือที่ช่วยให้เราสามารถดูและแก้ไข element ต่างๆ บนหน้าเว็บและดูผลลัพธ์ได้ทันที (แต่จะเป็นการแก้ไขชั่วคราว  รีเฟรชหน้าเว็บก็หาย  เหมาะกับการลองแก้เว็บ  ก่อนจะเอาไปลงไฟล์จริงๆ)  รวมทั้งใช้ตรวจสอบโค๊ดที่ผิดพลาดต่างๆ  การดูค่าของตัวแปรและวัตถุของจาวาสคริปท์   และยังมีฟีเจอร์อำนวยความสะดวกต่างๆ สำหรับคนทำเว็บอีกมากมาย

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

Inspector ในแต่ละเบราเซอร์

ปกติแล้วในแต่ละเบราเซอร์  ก็มักจะแถม Inspector ของตัวเองมาให้ใช้งานด้วยเช่นกัน (หรือถ้าเป็นเบราเซอร์ที่ใช้พื้นฐานมาจาก Chromium ก็จะแถม Developer tools ของ Chrome มาให้ใช้งาน)

Opera 12 มาพร้อมกับ Opera Dragonfly เรียกใช้ได้โดยการกด Ctrl+Shift+I (หรือคลิกขวาแล้วเลือก Inspect Element)

Firefox มาพร้อมกับ Inspector เรียกใช้ได้โดยการกด Ctrl+Shift+I (หรือคลิกขวาแล้วเลือก Inspect Element)

Chrome มาพร้อมกับ Developer tools เรียกใช้ได้โดยการกด Ctrl+Shift+I (หรือคลิกขวาแล้วเลือก Inspect Element)

Internet Explorer มาพร้อมกับ Developer tools เรียกใช้โดยการกด F12

Inspector แต่ละตัวจะมีฟีเจอร์และลักษณะการใช้งานที่คล้ายคลึงกัน นั่นคือจะมีมุมมองสำหรับแก้ไข HTML และ CSS ต่างๆ มี Console สำหรับทดสอบคำสั่ง JavaScript บ้างก็จะมีหน้าสำหรับดู resource ต่างๆ บนหน้าเว็บ อะไรที่โหลดได้ อะไรโหลดไม่ได้ แต่ละอย่างใช้เวลาโหลดเท่าไหร่ หรือบ้างก็จะมี JavaScript Debugger ที่สามารถใช้ดูการทำงานของ JavaScript ไล่ไปทีละบรรทัดได้เลยทีเดียวครับ

โหมดแก้ไข HTML และ CSS

ฟีเจอร์หลักของบรรดา Inspector คือการใช้ทดสอบการแก้ไข HTML และ CSS บนหน้าเว็บ (อย่างเช่นในภาพข้างบน) ลักษณะของมันจะแบ่งออกเป็น 2 คอลัมน์  โดยจะมีคอลัมน์ที่เป็นโค๊ด HTML และคอลัมน์ที่เป็นโค๊ด CSS ของ element ที่เราเลือกอยู่

ข้อควรระวังสำหรับมือใหม่ที่เพิ่งเริ่มใช้ Inspector คือโค๊ดที่แสดงในหน้านี้  จะไม่เหมือนกับโค๊ดที่เราเขียน 100% แต่มันจะเป็นโค๊ดที่ผ่านการประมวลผลมาเรียบร้อยแล้ว (อย่างเช่นการที่เราใช้ JavaScript  ทำการเพิ่ม element หรือแก้ไข properties ต่างๆ ของ element เราก็จะเห็นในหน้านี้เช่นกัน)

เมื่อเราเอาเมาส์ไปชี้ที่โค๊ด HTML ในคอลัมน์ซ้าย หรือคลิกเลือก element ที่ต้องการบนหน้าจอ  ซึ่ง inspector บางตัวต้องกดตัวเลือกก่อน  ถึงจะคลิกเลือก element บนหน้าเว็บได้

  • ใน Internet Explorer ต้องกดที่ไอคอนรูปลูกศรเมาส์ที่มุมซ้ายบน
  • ใน Chrome ต้องกดที่ไอคอนแว่นขยายที่มุมซ้ายล่าง
  • ใน Firefox ต้องกดที่ไอคอนรูปลูกศรเมาส์ที่ชี้กล่องสี่เหลี่ยมที่มุมซ้ายบน
  • ใน Opera ปกติจะคลิกเลือกได้ทันที แต่ถ้าไม่ได้ ให้กดที่ไอคอนลูกศรเมาส์ที่ชี้อยู่บนดอกจัน

และเมื่อเราเลือก element ที่จะตรวจสอบได้แล้ว  คอลัมน์ทางขวาซึ่งเป็นส่วนของ CSS ก็จะแสดง CSS Properties ทั้งหมดของ element นั้นๆ  เช่น property นี้มาจาก rules ไหนบ้าง  อะไรที่ถูก override ไปบ้าง (ปกติเมื่อเราเขียน css ก็จะมีการ override ค่าต่างๆ กันอยู่แล้ว  ซึ่งใน inspector ก็จะบอกเราทั้งหมดว่าค่าไหนที่ถูกใช้  ค่าไหนที่ถูก override)


หรือถ้าเราจะดู CSS ทั้งหมดของ element นั้นๆ ที่ถูกประมวลผลเรียบร้อยแล้ว  ก็สามารถดูได้ใน Computed style (แท็บ computed ใน Firefox หรือแท็บ Trace Styles ใน IE)

ฟีเจอร์ในส่วนนี้ก็จะทำงานเหมือนๆ กัน  เราสามารถเลือกปิด properties ที่ไม่ต้องการได้โดยการเอาเครื่องหมายถูกข้างหน้าออก (ลองเอาเมาส์ชี้ดูครับ  มันจะขึ้นติ๊กถูกอยู่ข้างหน้า) และยังสามารถแก้ไขหรือเพิ่ม properties ต่างๆ ลงไปได้ด้วยเช่นกัน (คลิกหรือดับเบิลคลิกบน property ที่ต้องการแก้ไข) และใน Inspector บางตัวเช่นใน Opera หรือ Chrome ก็ยังเปิดโอกาสให้เราสามารถเพิ่ม rules ใหม่เข้าไปได้ด้วยเช่นกัน

Console สำหรับ JavaScript

อีกฟีเจอร์หนึ่งที่เป็นประโยชน์มากๆ สำหรับคนทำ JavaScript นั่นคือในส่วนของ Console ครับ  ซึ่งหลักๆ แล้วในหน้านี้  จะใช้แสดง error ต่างๆ ของ JavaScript และสามารถพิมพ์คำสั่ง JavaScript ลงไปเพื่อทดสอบการทำงานก็ได้เช่นกัน


และโดยปกติแแล้ว  ในหน้า Console ยังใช้แสดง error จากส่วนอื่นๆ เช่น HTTP Error ได้ด้วยเช่นกัน (อันนี้ขึ้นอยู่กับแต่ละค่ายแล้วครับ  ว่าทำออกมาให้รองรับอะไรบ้าง  ซึ่งบางค่ายก็จะมี error console แยกออกไปเลยก็มี)

ปกติแล้วผมจะใช้ console ในการเปลี่ยนค่าของตัวแปร  แล้วสั่งรันฟังก์ชันใหม่อีกครั้งเพื่อตรวจสอบผลลัพธ์  หรือการสั่งให้ค่าของตัวแปรมาแสดงที่คอนโซล  เพื่อดูว่าในตัวแปรนั้นมันเก็บค่าอะไรไว้บ้าง

สำหรับการคืนค่าออกมาที่ console เราสามารถใช้คำสั่ง console.log(value); เพื่อโยนค่ากลับออกมาได้  โดย value นั้นเป็นได้ตั้งแต่ข้อความธรรมดา (ผมมักจะแสดงข้อความธรรมดาออกมาเพื่อบอกว่าสคริปท์ประมวลผลถึงส่วนไหนแล้ว  ซึ่งมีประโยชน์มากเวลาตรวจสอบว่าทำไมมันไม่เข้า if … else หรือ loop ตามเงื่อนไข) มันใช้เช็คเรื่องลูปและเงื่อนไขได้ดีมากเลย) ไปจนถึงตัวแปร  อาร์เรย์ และออพเจ็กท์ (JavaScript ไม่มี var_dump(); แบบ php ดังนั้นการโยนค่าออกมาที่คอนโซล  จึงเป็นทางเลือกที่ดีที่สุดสำหรับดูค่าในออพเจ็กท์และอาร์เรย์)

ตรวจสอบความเร็วการโหลดเว็บไซต์

Inspector ที่แถมมากับ Opera, Chrome, และ Internet Explorer จะมีแท็บ Network มาให้ด้วย  หน้าที่ของมันคือจะใช้เช็คว่าแต่ละ request บนหน้าเว็บนั้นใช้เวลาในการตอบสนองและดาวน์โหลดนานเท่าไหร่

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

ปล.เดี๋ยวนี้กูเกิลก็เอาความเร็วในการโหลดหน้าเว็บมาช่วยจัดอันดับผลการค้นหาแล้วนะครับ

ดูว่าเว็บมีการบันทึกข้อมูลอะไรเอาไว้ในเครื่องของเราบ้าง

Inspector ที่แถมมากับ Opera และ Chrome จะสามารถดูได้ด้วยว่าหน้าเว็บนั้นๆ ดาวน์โหลดไฟล์อะไรมาบ้าง  และมีการบันทึกข้อมูลอะไรบ้าง (เช่น Cookie, Session, LocalStorage, และ WebDatabase)

โดยของ Chrome จะะรวมอยู่ในแท็บ Resources ทั้งหมด

ส่วนของ Opera จะแสดงไฟล์ที่ดาวน์โหลดมาอยู่ในแท็บ Resources และแสดงข้อมูลที่บันทึกไว้ในแท็บ Storage

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

สำหรับคนที่ใช้ IE และ Firefox

จากที่พูดมา  บางคนอาจจะเริ่มคิดได้ว่า Inspector ที่มากับ Firefox และ IE นั้นมีฟีเจอร์น้อยกว่าของ Chrome และ Opera แต่ก็ไม่ต้องน้อยใจไปครับ  เพราะใน Firefox นั้นมี Inspector ที่ความสามารถไม่แพ้เจ้าอื่น (แถมยังลง extension เพิ่มได้อีกต่างหาก) นั่นก็คือ Firebug และยังมี Firebug Lite สำหรับติดตั้งบน “ทุกเบราเซอร์” ได้อีกด้วย (รองรับ IE6+, Firefox, Opera, Safari, และ Chrome)

ทิ้งท้าย

สำหรับผมแล้ว  เรื่องพวกพวก Inspector นี่ถือว่าจำเป็นมากๆ สำหรับคนที่เป็น developer เมื่อก่อนผมจะ debug โค๊ดต่างๆ ด้วยการใช้ JavaScript เด้ง Alert ขึ้นมา  ซึ่งมันทั้งรก ทั้งน่ารำคาญ ทั้งเสียเวลา  ในตอนหลังผมเริ่มมาใช้ Inspector (ผมเริ่มจาก Dragonfly) แล้วพบว่างาน debug เว็บมันทำได้สะดวกและรวดเร็วขึ้นมากครับ

น่าเสียดายว่ามีคนทำเว็บอีกหลายคน  ที่เรียนจนจบออกมาก็ยังไม่ได้ใช้เครื่องมือพวกนี้ช่วยในการทำงาน (หลายครั้งที่คุยกับ Web Developer ของลูกค้าที่มาดูแลเว็บที่ผมทำให้  แล้วเค้าใช้ Inspector ไม่เป็น  มันหงุดหงิดนะนี่  ให้ debug หา error อะไรให้ก็ไม่ได้  สุดท้ายก็ต้องกลับไปแก้ให้เองเสียทุกที)

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

Posted by Jirayu

WordPress Developer ที่พอมีประสบการณ์อยู่บ้าง วันไหนไม่ทำงานอยู่บ้านว่างๆ ก็นั่งเลี้ยงแมว

Comments