การตรวจสอบประสิทธิภาพของระบบเครือข่ายและการดีบักใน Internet Explorer 9 [Step by Step]

หมายเลขบทความ (Article ID): 2675244 - ผลิตภัณฑ์ที่เกี่ยวข้องในบทความนี้

เกี่ยวกับผู้เขียน

ยุบตารางนี้ขยายตารางนี้
ยุบรูปภาพนี้ขยายรูปภาพนี้
2401266
บทความนี้เขียนโดยคุณ Patpong Buparat ตำแหน่ง Developer Security: Architecture MVPคุณ Patpong เป็นหนึ่งในคณะกรรมการก่อตั้งสมาคม International Associated of Software Architect Thailand Chapter หรือ IASA และ Software Process Improvement Network หรือThailand SPIN (Software Process Improvement Network ) และยังเป็นนักเขียนให้นิตยสาร E-Leader ในประเทศไทยด้วย ติดตามPatpong Buparat ได้ที่ http://patpongb.blogspot.com/
ขยายทั้งหมด | ยุบทั้งหมด

บทนำ

IE 9 ได้ให้เครื่องมือที่ทรงพลังสำหรับใช้ตรวจสอบการสื่อสารระหว่างเว็บเซิร์ฟเวอร์กับ IE ซึ่งโดยปรกติก็จะติดต่อกันด้วย HTTP หรือ HTTPS ในแต่ละเว็บเพจที่แสดงใน IE นั้นจะประกอบไปด้วยส่วนต่างๆ มากมาย ที่ทาง IE ร้องขอไปยังเซิร์ฟเวอร์ และเซิร์ฟเวอร์ตอบสนองกลับมา เราสามารถตรวจสอบส่วนต่างๆ ของเว็บเพจนั้นได้ ไม่ว่าจะเป็น HTML โค้ด, JavaScript หรือ พวกรูปภาพต่างๆ เพื่อตรวจสอบปัญหาต่างๆ ที่เกิดขึ้น ใน [เครือข่าย] สามารถช่วยเราตรวจสอบปัญหาที่เกิดขึ้นในส่วนที่เกี่ยวข้องกับระบบเครือข่าย เช่นการติดตั้งเซิร์ฟเวอร์อย่างไม่ถูกต้อง หรือการเรียกใช้ AJAX แบบผิดวิธีเป็นต้น

[เครือข่าย] ในIE 9 จะช่วยในการตรวจจับและตรวจสอบ HTTP Traffic ทำให้เราสามารถวิเคราะห์ได้ว่าการเชื่อมต่อในส่วนใดหรือส่วนประกอบของหน้าเว็บตัวไหนที่มีผลในการโหลดเว็บเพจของเรา เราสามารถเข้าไปดูในรายละเอียดของแต่ละการเชื่อมต่อได้ว่าแต่ละส่วนนั้นมีการร้องขออะไรไป เซิร์ฟเวอร์ส่งอะไรมาให้ ใช้เวลาในการโหลดเท่าไร ใช้เวลาในการรอเท่าไร คุ๊กกี้ที่ส่งมามีอะไรบ้าง เป็นต้น  

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

วิธีการ

ใน Internet Explorer 9 กดปุ่ม [เครื่องมือ]  
ยุบรูปภาพนี้ขยายรูปภาพนี้
2675242
เลือก [เครื่องมือสำหรับนักพัฒนา F12] หรือ กด [F12]
ยุบรูปภาพนี้ขยายรูปภาพนี้
2675243



จากนั้น IE จะแสดงแถบเครื่องมมือสำหรับนักพัฒนาออกมาทางด้านล่างตามรูป

ยุบรูปภาพนี้ขยายรูปภาพนี้
2680494




คลิ๊กที่ [เครือข่าย] เพื่อเข้าสู่เมนูของเครือข่าย จากนั้นคลิ๊กที่ [เริ่มต้นการจับ] เพื่อเริ่มจับข้อมูลการส่งข้อมูลระหว่าง IE และเซิร์ฟเวอร์ จากนั้นจึงเริ่มเข้าหน้าเว็บเพจที่ต้องการได้

ยุบรูปภาพนี้ขยายรูปภาพนี้
2680495


ข้อมูลเพิ่มเติม

ในการตรวจจับข้อมูลในระบเครือข่ายเพื่อวิเคราะห์นั้น ในเมนูเครือข่ายของเครืองมือสำหรับนักพัฒนานั้นมีหลายมุมมอง

มุมมองแบบสรุป

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

ยุบรูปภาพนี้ขยายรูปภาพนี้
2680496




ข้อมูลที่แสดงในเครือข่ายคือข้อมูลการเชื่อมต่อทั้งหมดของเว็บเพจนั้นที่ IE ทำการร้องขอไปยังเซิร์ฟเวอร์ ไม่ว่าจะเป็น HTML, Javascript หรือ รูปภาพ การร้องขอของทุกๆ ส่วนของเว็บเพจจะอยู่ที่นี่ เราสามารถดูข้อมูลเบื้องต้นของแต่ละส่วนได้
ยุบรูปภาพนี้ขยายรูปภาพนี้
2680497




ยุบตารางนี้ขยายตารางนี้
คอลัมม์คำอธิบาย
URLURL ที่ร้องขอ
วิธีวิธีการเชื่อมต่อของ HTTP เช่น POST หรือ GET เป็นต้น
ผลลัพธ์รหัส HTTP ที่ตอบสนอง
ชนิดชนิดของข้อมูลที่ได้รับ
ได้รับจำนวนข้อมูลทั้งหมดที่ได้รับ หน่วยเป็นไบต์
ใช้ไประยะเวลาทั้งหมดที่ใช้ในการรับข้อมูล หน่วยเป็นวินาที
ตัวเริ่มต้นระบบย่อยภายใน IE ที่เป็นตัวร้องขอข้อมูล (ถ้ามี)
การจับเวลาเส้นเวลาของเหตุการณ์ต่างๆ สีเหลืองแสดงระยะเวลาในการร้องขอ สีฟ้าแสดงระยะเวลาในการตอบสนอง
โดยปรกติแล้วข้อมูลที่แสดงจะแสดงผลเรียงตามระยะเวลาในการจับเวลา เราสามารถเปลี่ยนการเรียงข้อมูลให้เรียงตาม คอลัมม์ต่างๆ ที่เราต้องการได้โดยการคลิ๊กที่ชื่อคอลัมม์

มุมมองโดยละเอียด
และเมื่อเราต้องการที่จะดูรายละเอียดในส่วนไหน หรือต้องการที่จะเข้าไปตรวจสอบรายละเอียดในส่วนใดก็สามารถ ดับเบิ้ลคลิ๊ก ที่บรรทัดที่เราต้องการ หรือ คลิ๊ก ที่บรรทัดที่ต้องการ และคลิ๊ก [ไปที่มุมมองโดยละเอียด]  

ยุบรูปภาพนี้ขยายรูปภาพนี้
2680498




ใน มุมมองโดยละเอียด เราสามารถเลือกดูรายละเอียดของการเชื่อมต่อในส่วนที่เราสนใจได้

ยุบรูปภาพนี้ขยายรูปภาพนี้
2680499




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

ทิศทาง คุ๊กกี้นี้ถูกส่งออก หรือรับเข้ามา

คีย์ Identifier ของ Key-Value

ค่า ค่าของ Key-Value

หมดอายุ วันหมดอายุของคุ๊กกี้

โดเมน โดเมนของคุ๊กกี้

เส้นทาง เส้นทางของคุ๊กกี้

ปลอดภัย แสดงเมื่อคุ๊กกี้นั้นถูกเข้าถึงได้ผ่านทางการเชื่อมต่อแบบ  HTTPS เท่านั้น

เฉพาะ HTTP แสดงเมื่อคุ๊กกี้นั้นถูกเข้าถึงได้ผ่านทางการเชื่อมต่อแบบ HTTP เท่านั้น (ไม่ใช่ JavaScript)
ตัวเริ่มต้นสรุปรายละเอียดในการดาวน์โหลดของ IE
การจับเวลาสรุปเหตุการณ์และระยะเวลาที่เกี่ยวข้องกับการร้องขอ ข้อมูลของระยะเวลาในแต่ละส่วนถูกแสดงออกมาในรูปของภาพและตาราง ซึ่งภาพที่แสดงก็จะเปลี่ยนไปสัมพันธ์กับข้อมูลในตาราง เมื่อเราคลิ๊กข้อมูลในตาราง ในภาพก็จะแสดงข้อมูลในส่วนนั้นออกมา


รอ เวลาตั้งแต่เริ่มการนำทางของเพจจนถึงเมื่อการร้องขอนี้เริ่มขึ้น

เริ่ม เวลาตั้งแต่เมื่อการร้องขอถูกสร้างครั้งแรกจนถึงเมื่อการร้องขอถูกส่ง

ร้องขอ เวลาจนถึงไบต์แรก เวลาที่ใช้เพื่อส่งการร้องขอและการรับการตอบสนองครั้งแรกจากเซิร์ฟเวอร์

การตอบสนอง เวลาที่ใช้เพื่อรับข้อมูลการตอบสนองจากเซิร์ฟเวอร์

ช่วงห่าง เวลาระหว่างที่การร้องขอนี้เสร็จสมบูรณ์จนถึงเพจถูกโหลด

DomContentLoaded(event) เวลาที่เกิดเหตุการณ์ DomContentLoaded ของเพจ

Load(event) เวลาที่เกิดเหตุการณ์การโหลดเพจขึ้น
ยุบรูปภาพนี้ขยายรูปภาพนี้
2680500



เครื่องมืออื่นๆ

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

ยุบรูปภาพนี้ขยายรูปภาพนี้
2680501




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

บันทึก หากเราต้องการบันทึกข้อมูลสามารถกดปุ่ม บันทึก ระบบจะเก็บเซ็สชั่นของ HTTP ขณะปัจจุบันลงไปในรูปแบบของไฟล์ XML โดยใช้ HTTP Archive Schema หรือในรูปแบบไฟล์ .CSV

ค้นหา ในช่อง ค้นหาปริมาณการใช้งานที่จับได้ จะช่วยให้เราสามารถค้นหาข้อมูลที่เราจับมาได้

ล้าง เราสามารถล้างข้อมูลที่โชว์อยู่ตารางได้โดยการกดปุ่ม [ล้าง] โดยไม่จำเป็นต้องหยุดการจับ

สรุป

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


การปฏิเสธความรับผิดเนื้อหาแนวทางแก้ปัญหาจากประชาคม

MICROSOFT CORPORATION และ/หรือ ซัพพลายเออร์ของบริษัท ไม่ได้เป็นตัวแทนรับรองถึงความเหมาะสม ความเชื่อถือได้ หรือความเที่ยงตรงของข้อมูลและภาพกราฟิคที่เกี่ยวข้อง ซึ่งอยู่ในที่นี้ ข้อมูลดังกล่าวทั้งหมดและภาพกราฟิคที่เกี่ยวข้อง ได้รับการนำเสนอ “ตามที่เป็น” โดยไม่มีการให้การรับประกันใดๆ MICROSOFT และซัพพลายเออร์ของบริษัท ขอปฏิเสธการรับประกันและเงื่อนไขทั้งหมดในที่นี้ ที่เกี่ยวข้องกับข้อมูลและภาพกราฟิคนี้ รวมถึงการรับประกันและเงื่อนไขโดยนัยทั้งหมดของความสามารถในการจัดจำหน่าย ความเหมาะสมสำหรับวัตถุประสงค์เฉพาะ การทำงานที่คล้ายคลึงกับผลงานบุคคล กรรมสิทธิ์ และการไม่ล่วงละเมิด คุณตกลงเป็นการเฉพาะด้วยว่า ไม่ว่าในกรณีใด MICROSOFT และ/หรือ ซัพพลายเออร์ของบริษัท ไม่รับผิดชอบภาระใดๆ เกี่ยวกับความเสียหายทั้งทางตรง ทางอ้อม จากการใช้งานอย่างหนัก อุบัติเหตุ ความเสียหายเฉพาะกรณี หรือที่เกิดขึ้นตามมา ไม่ว่าแบบใด รวมทั้งแต่ไม่จำกัดเฉพาะ ความเสียหายจากการสูญเสียการใช้ การสูญหายของข้อมูลหรือกำไร ที่เกิดขึ้นจากหรือเกี่ยวข้องกับการใช้หรือการไม่สามารถใช้ข้อมูลและภาพกราฟิคที่เกี่ยวข้องที่อยู่ในที่นี้ ไม่ว่าจะมีพื้นฐานจากการติดต่อ การล่วงละเมิด ความประมาท ภาระหนี้สิน หรือในทางอื่นใด แม้ว่า MICROSOFT หรือซัพพลายเออร์รายใดของบริษัท จะได้รับการแจ้งถึงความเสียดายที่อาจเป็นไปได้นั้นแล้วก็ตาม

คุณสมบัติ

หมายเลขบทความ (Article ID): 2675244 - รีวิวครั้งสุดท้าย: 23 กุมภาพันธ์ 2555 - Revision: 1.0
ใช้กับ
  • Windows Internet Explorer 9
Keywords: 
KB2675244

ให้ข้อเสนอแนะ

 

Contact us for more help

Contact us for more help
Connect with Answer Desk for expert help.
Get more support from smallbusiness.support.microsoft.com