ทำความรู้จัก Chrome DevTools
ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

     Chrome DevTools เป็นเครื่องมือสำหรับนักพัฒนาเว็บไซต์ที่ติดตั้งมาใน Browser อย่าง Google Chrome ซึ่งจะช่วยให้การพัฒนาเว็บไซต์ทำได้รวดเร็วขึ้น และง่ายมากขึ้น การทำงานส่วนหนึ่งจะเหมาะสำหรับใช้กับภาษาโปรแกรมที่ทำงานทางฝั่ง Client อย่าง HTML, CSSJavascript ส่วนที่ใช้ตรวจสอบประสิทธิภาพ ความเร็ว การใช้ทรัพยากร โดยจะอธิบายความสามารถของ Chrome DevTools ออกเป็นส่วนๆ ดังนี้

Elements ใช้สำหรับตรวจสอบโครงสร้างของหน้าเว็บไซต์ ใช้ความสามารถคลิกวัตถุที่อยู่บนหน้าเว็บไซต์ เพื่อหาตำแหน่งของ Source Code สามารถแก้ไขโครงสร้างและดูผลลัพธ์ได้ทันที นอกจากนี้ยังใช้แก้ไข CSS ตรวจสอบการใช้ Style ในแต่ละวัตถุบนหน้าเว็บไซต์ได้อีกด้วย

Console ส่วนนี้ใช้สำหรับตรวจสอบการทำงานของ Javascript หาข้อผิดพลาด หรือ การแจ้งเตือนต่างๆ สามารถใส่ log เพื่อดูโครงสร้างของ Object ของภาษา Javascript ได้ และมีช่องสำหรับใส่คำสั่งของ Javascript และทดสอบให้ทำงานได้ทันที

Sources จะแสดงโครงสร้างของโฟลเดอร์และไฟล์ที่มีการเรียกใช้ในหน้าที่ทำงานอยู่ สามารถกำหนดให้เชื่อมต่อกับไฟล์บนเครื่องของเรา และแก้ไขได้ทันที

Network ใช้สำหรับแสดงข้อมูลของไฟล์ต่างๆ ที่เรียกเข้ามาตามลำดับ ขนาดไฟล์ เวลาที่ใช้ในการเรียก สามารถกำหนดได้ว่าจะดูประเภทไฟล์ทั้งหมด ดูเฉพาะไฟล์ CSS ดูเฉพาะไฟล์ Javascript ทำให้ทราบความเร็วในการโหลดหน้า และปริมาณข้อมูลที่โหลด

Timeline ใช้สำหรับบันทึกและวิเคราะห์กิจกรรมที่เกิดขึ้นบนหน้าเว็บไซต์ในขณะที่กำลังโหลด แสดงออกมาในรูปของกราฟซึ่งอาจจำเป็นต้องศึกษาและมีความเข้าใจในการอ่านค่า ต่างๆ ก่อน

Profiles ใช้สำหรับตรวจสอบประสิทธิภาพการทำงานของ Javascript ตรวจสอบการทำงานของ Javascript ที่อาจจะส่งผลต่อการใช้ Memory แบบเกินความจำเป็น

Resources ใช้แสดงข้อมูลทรัพยากรทั้งหมดที่มีการโหลด เช่น IndexedDB, Web SQL databases, Local storage, Session storage, cookies, Application Cache, images, fonts และ Stylesheets

Device Mode ใช้สำหรับจำลองการแสดงผลตามขนาดหน้าจอของอุปกรณ์ต่างๆ ทั้ง คอมพิวเตอร์ แท็บเล็ต และมือถือ

สามารถสอบถามบริการจากทางบริษัทได้ที่ www.mdsoft.co.th/support


พัฒนาโปรแกรมบนเว็บ PHP บริการพัฒนา Joomla Extension พัฒนาและปรับแต่งเว็บบอร์ด phpBB