Chrome Developer Tools เป็นเครื่องมือตัวหนึ่งที่อยู่ภายใน Chrome ซึ่งมันสามารถช่วยให้เราสามารถ Debug หรือดูองค์ประกอบต่าง ๆ เว็บที่เราเขียนขึ้นมาได้
ซึ่งก่อนที่เราจะทำการใช้ได้นั้นก็จำเป็นต้องมี Chrome ก่อน
สามารถทำการดาวน์โหลดได้ที่นี่ Download
ขั้นตอนการใช้งาน
เมื่อเราอยู่ในหน้า Website หนึ่ง ๆ เราสามารถทำการตรวจสอบส่วนประกอบต่าง ๆ ของเว็บนั้น ๆ โดยหลายวิธีดังนี้
- คลิกขวาที่หน้านั้น ๆ จุดใดจุดนึง → จากนั้นเลือก Inspect
- กด F12
- คลิกที่ไอคอนเพิ่มเติมดังนี้
แล้วเลือก More Tools → Developer Tools
- กด Command + Option + I (สำหรับ macOS)
เมื่อเข้าเสร็จจะได้ดังนี้
โดยบรรทัดที่โดนครอบไว้จะเป็น Code ในจุดที่เราได้ทำการกด Inspect
ซึ่งเราสามารถเลือกส่วนที่ต้องการจะดูได้เลยโดยการกดที่ปุ่มนี้
จากนั้นก็นำ Mouse ไปชี้จุดที่ต้องการได้เลยภายในหน้าเว็บ
เราสามารถสลับมุมมองของเครื่อง Device ต่าง ๆ ได้โดยการกดปุ่มดังนี้
เครื่องมือของ Developer Tools
โดยเครื่องมือหลัก ๆ ก็จะมีดังนี้
Elements
เป็นเครื่องมือที่สามารถดู Source Code ได้ ในรูปแบบ HTML & JavaScript ซึ่งเมื่อเอา Mouse ไปชี้ที่จุดใดจุดนึง ตัว Tool จะบอกให้ทราบว่าบนหน้าเว็บคือส่วนใด
Console
เป็นเครื่องมือที่ทำให้สามารถทำงานติดต่อกับ JavaScript และ เขียนโปรแกรมติดต่อกับเว็บเพจของเราได้
Sources
เป็นเครื่องมือสำหรับ JavaScript โดยเฉพาะ เนื่องจากสามารถที่จะ Debug หรือว่าแก้ไขตัว JavaScript ได้ขณะที่มันกำลังทำงานอยู่
Network
เป็นเครื่องมือที่สามารถดูว่าโหลดอะไรมาจาก Server บ้าง แล้วใช้เวลานานแค่ไหนใช้ Bandwidth เท่าไร รวมถึงการดู HTTP Header ทั้ง Request และ Response ได้
ทั้งนี้สามารถเข้าไปดูคำอธิบายและเครื่องมือเพิ่มเติมได้ที่นี่เลย Chrome DevTools
< — — — — — จบขั้นตอนในการใช้งาน Chrome Developer Tools — — — — — >
