2 min readMay 29, 2019
[#5 Google Dev Tools] การใช้งาน Google Chrome Developer Tools แบบสั้นๆเหมือนผมของฉันเอง…👩
ก่อนอื่นขอแนะนำให้รู้จักกับ Chrome Dev Tools หรือ Inspector หรือ Debugger ก่อนเลยจ้า ในที่นี้ขอเรียกสั้นๆว่า Dev Tools แล้วกัน เจ้าตัวนี้เป็นเครื่องมือที่สำคัญมากๆเลยเชียว ไม่ว่าจะเป็น ในการพัฒนาเว็บ การตรวจสอบ แก้ไขข้อบกพร่อง ของเว็บเรา โดยเราสามารถที่จะดู แก้ไข Elements ต่างๆบนหน้าเว็บผ่านเจ้าตัวนี้ได้เลย (คือทำผ่านหน้าเว็บที่เปิดใน Browser ได้เลย ปล. แต่ถ้าเราแก้ไขเมื่อ refresh แล้วเนี่ย มันจะหายไปนะโค้ดที่เราแก้ๆไป เพราะมันไม่ได้ไปแก้ในไฟล์โค้ดเราจริงๆแค่ทำที่หน้าเว็บ) ในส่วนของการเข้าใช้งานทำได้หลายวิธีเลยล่ะ ยกตัวอย่างมาดังนี้
- วิธีที่1 คลิกขวาที่หน้าเว็บของเรา แล้วเลือก Inspector
- วิธีที่2 กด Ctrl + Shift + I
- วิธีที่3 กด f12
ขั้นตอนการใช้งาน
- เปิดหน้า Google Chrome ของเราขึ้นมาเลยจ้า
2. กด f12 เพื่อใช้งาน Dev Tools
3. สุดท้ายจะเป็นการแนะนำ Tools แต่ละตัวกันแล้วว มีดังนี้เลย
- Elements → เป็นองค์ประกอบของหน้าเว็บ เราสามารถดู และแก้ไข HTML Source code รวมถึง Javascript ได้เลยนะ
- Network → เป็นข้อมูลด้านเครือข่าย เราสามารถรับรู้ข้อมูลการทำงานในแต่ละเครือข่ายในเว็บของเรา เว็บเราได้โหลดอะไรจาก Server บ้าง ใช้เวลาเท่าไหร่จึงจะเสร็จ ใช้ Bandwidth เท่าไหร่ ถ้าเราอยากรู้ว่าเว็บเราช้าเพราะอะไร ก็ให้มาดูที่ตัวนี้เลยจ้า
- Sources → ทำให้เราสามารถทราบถึงแหล่งที่มาของไฟล์ว่ามาจากที่ไหน โดยเราสามารถลากไฟล์มาวางเพื่อทำการดู แก้ไขต่างๆได้ เหมือนกับทำใน Editor ยังไงยังงั้นเลย
- Audits → เป็นเครื่องมือที่ช่วยบอกเราได้ว่าเว็บของเราควรปรับปรุงตรงไหน ให้มันมีประสิทธิภาพได้บ้าง หรือมีส่วนไหนที่ทำให้เว็บเราด้อยประสิทธิภาพลง
- Console → คอนโซลสามารถดูการทำงานระหว่าง Client กับ Server ได้ ซึ่งถ้ามันเกิดมีข้อผิดพลาดมันก็จะแจ้งขึ้นมา หรือถ้าเว็บของเรามีจุดที่บกพร่องตรงส่วนไหนมันก็จะเเจ้งเตือน Warning ขึ้นมาเช่นเดียวกันจ้า
