การใช้งาน Google chrome developer tools ในการพัฒนาเว็บแอพพลิเคชั่น

การใช้งาน Google chrome developer tools ในการพัฒนาเว็บแอพพลิเคชั่น

การพัฒนา และออกแบบเว็บแอพพลิเคนั้น ในขั้นตอนของการพัฒนาบางครั้งเราต้องการที่จะทดสอบการทำงาน และการแสดงผลของเว็บแอพพลิเคชั่นที่เราพัฒนาขึ้นมา ว่าเป็นไปตามความต้องการของเราหรือไม่ จะต้องแก้ไข หรือปรับปรุงในส่วนของ Element หรือ Tag ตัวไหน เพื่อให้ได้แอพพลิเคชั่นที่ตรงกับความต้องการของเรา ซึ่งเมื่อก่อนเราต้องไปไล่ Code ที่เราเขียนขึ้นมาทีละบรรทัด แล้วทำการแก้ไข จากนั้นก็ทำการทดสอบในบราว์เซอร์ เพื่อดูการทำงาน และการแสดงผล ซึ่งนับเป็นการยุ่งยากอย่างมากในการพัฒนาเว็บแอพพลิเคชั่น และทำให้เกิดความล่าช้าในการตรวจสอบแก้ไข วันนี้ผมเลยมาแนะนำการใช้งาน Google chrome developer tools ซึ่งเป็นเครื่องมือที่มีอยู่ใน Google chome webbrowser ซึ่งจะช่วยอำนวยความสะดวกกับเราในการพัฒนาเว็บแอพพลิเคชั่น และจะเป็นประโยชน์สำหรับนักพัฒนาเพื่อลดการทำงาน ได้เป็นอย่างดีเลยทีเดียว


Chrome developer tools เป็นเครื่องมือสำหรับนักพัฒนาเว็บแอพพลิเคชั่น เพื่อตรวจสอบ และแก้ไขจุดบกพร่อง ของเว็บแอพพลิเคชั่นของเรา ซึ่งเราสามารถใช้งานเครื่องมือสำหรับนักพัฒนา เพื่อติดตามปัญหารูปแบบ (Inspect element) การแก้ปัญหาโดยใช้ JavaScript โดยสามารถเลือกเมนู Tools เครื่องมือสำหรับนักพัฒนา หรือกด ctrl + shift + i หรือเพียงกด F12 เพื่อเปิดใช้งาน เครื่องมือ Developer tools

องค์ประกอบของเครื่องมือ
  • Elements (องค์ประกอบหน้าเว็บแอพพลิเคชั่น)
  • Resources (ทรัพยากรระบบต่างๆ)
  • Network (ข้อมูลด้านเครือข่าย)
  • Source (แหล่งที่มา)
  • Timeline (เส้นแสดงเวลาการทำงาน การประมวลผล การแสดงผล)
  • Profile (ข้อมูลส่วนตัว)
  • Audits (เครื่องมือตรวจสอบ)
  • Console (คอนโซลตรวจสอบองค์ประกอบ)
  • Emulation (การจำลองเครื่องมือ และสภาพแวดล้อม)
  • Media Queries (การเรียกใช้งาน และการแสดงลักษณะ Style Sheets ของแต่ละขนาดหน้าจอ)



Resources (ทรัพยากรระบบต่างๆ)
การใช้แท็บทรัพยากรเราจะสามารถมองเห็น และโต้ตอบกับไฟล์ HTML, Script, ฐานข้อมูล, Local Storage, คุกกี้, AppCache ฯลฯ



Network (ข้อมูลด้านเครือข่าย)
การใช้เครือข่ายที่เราสามารถสามารถรับข้อมูลเกี่ยวกับการดำเนินงานแต่ละเครือข่ายในเว็บแอพพลิเคชั่นของเรารวมทั้งข้อมูลรายละเอียดระยะเวลาการร้องขอ HTTP และการตอบกลับจากเครื่องแม่ข่าย Server, คุกกี้, WebSocket ข้อมูล และไฟล์ทรัพยากรที่จำเป็นต้องใช้ในการโหลดหน้าเว็บเช่น HTML, Script, CSS และ รูปภาพของเรา



Source (Source Code และแหล่งที่มา)
แท็บ Source จะสามารถระบุให้เราทราบถึงแหล่งที่มาของไฟล์เอกสาร Source Code ต่างๆ เช่น HTML, CSS และ JS ว่าได้ถูกโหลดขึ้นมา หรือเรียกใช้งานมาจากไดเรคทอรี่ไหน และยังสามารถแก้ไขไฟล์ Source Code นั้นได้ ซึ่งเราสามารถลาก / วางไฟล์จากตำแหน่งของแฟ้มที่จะแก้ไขในระหว่างการทำงานได้ ซึ่งจะทำงานเหมือน IDE

คุณสมบัติ และประโยชน์ของแท็บ Source (แหล่งที่มา)
  • การใช้แท็บ Source (แหล่งที่มา) เราสามารถดูแหล่งที่มาทั้งหมดที่เกี่ยวข้องกับหน้าเว็บแอพลิเคชั่น
  • เราสามารถเพิ่มแหล่งที่มาของไฟล์ และแก้ไขไฟล์ในระหว่างการทำงานได้



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





Console (คอนโซลตรวจสอบองค์ประกอบ)
โหมดของคอนโซลสามารถใช้ในการดูการทำงานระหว่าง Client และ Server ได้ ซึ่งหากพบข้อผิดพลาดก็จะแจ้งเตือนข้อผิดพลาดให้เราทราบ รวมถึงการแจ้งเตือน Warning ในส่วนที่บกพร่องของเว็บแอพพลิเคชั่นที่เราพัฒนา



Emulation (การจำลองเครื่องมือ และสภาพแวดล้อม)
Emulation (การจำลองเครื่องมือ และสภาพแวดล้อม) เราสามารถที่จะจำลองการทำงานเว็บแอพพลิเคชั่นของเราได้ในอุปกรณ์ต่างๆ เช่น Android, iPhone และ Tablet ฯลฯฯ ซึ่งในการพัฒนาเว็บแอพพลิเคชั่นแบบ Responsive นั้นจำเป็นอย่างยิ่งที่จะต้องดูการทำงาน และการแสดงผล เพื่อให้ได้เว็บแอพพลิเคชั่นที่ตรงตามความต้องการของเรา




Media Queries (การเรียกใช้งาน Style Sheets ของแต่ละขนาดหน้าจอ)
เราสามารถดูลักษณะการแสดงผลบนอุปกรณ์ที่มีขนาดหน้าจอแตกต่างกันได้ โดยใช้แบบสอบถาม Media Queries เพื่อดูขอบเขตการทำงาน ขนาดความกว้าง และความสูง ของการแสดงผลสำหรับอุปกรณ์ต่างๆ เพื่อที่จะสามารถปรับลดขนาดของการแสดงผลได้



หวังว่าจะมีประโยชน์สำหรับนักพัฒนาเว็บแอพพลิเคชั่นหลายๆท่านนะครับ


แชร์บทความ

Facebook Twitter Google Digg Reddit LinkedIn StumbleUpon Email
กำลังโหลด ...