Meggin Kearney
Flavio Copes
โหมดเหตุการณ์ไทม์ไลน์จะแสดงเหตุการณ์ทั้งหมดที่ทริกเกอร์ขณะบันทึก ใช้ข้อมูลอ้างอิงเหตุการณ์ในไทม์ไลน์เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับเหตุการณ์แต่ละประเภทในไทม์ไลน์
พร็อพเพอร์ตี้กิจกรรมในไทม์ไลน์ทั่วไป
รายละเอียดบางอย่างจะปรากฏในเหตุการณ์ทุกประเภท ขณะที่รายละเอียดบางอย่างจะใช้กับเหตุการณ์บางประเภทเท่านั้น ส่วนนี้จะแสดงพร็อพเพอร์ตี้ที่พบได้ทั่วไปในเหตุการณ์ประเภทต่างๆ พร็อพเพอร์ตี้ที่เจาะจงสำหรับเหตุการณ์บางประเภทจะแสดงอยู่ในข้อมูลอ้างอิงสำหรับเหตุการณ์ประเภทนั้นๆ ต่อไปนี้
| พร็อพเพอร์ตี้ | กรณีที่แสดง |
|---|---|
| เวลารวม | สําหรับเหตุการณ์ที่มีเหตุการณ์ที่ซ้อนกัน ระยะเวลาที่แต่ละหมวดหมู่ของเหตุการณ์ใช้ |
| สแต็กการเรียกใช้ | สําหรับเหตุการณ์ที่มีเหตุการณ์ย่อย ระยะเวลาที่แต่ละหมวดหมู่ของเหตุการณ์ใช้ |
| เวลา CPU | ระยะเวลา CPU ที่เหตุการณ์ที่บันทึกไว้ใช้ |
| รายละเอียด | รายละเอียดอื่นๆ เกี่ยวกับเหตุการณ์ |
| ระยะเวลา (ตามการประทับเวลา) | ระยะเวลาที่เหตุการณ์และเหตุการณ์ย่อยทั้งหมดใช้เวลาในการดำเนินการให้เสร็จสมบูรณ์ การประทับเวลาคือเวลาที่เกิดเหตุการณ์ โดยสัมพันธ์กับเวลาที่เริ่มบันทึก |
| เวลาของกิจกรรมเดียว | ระยะเวลาที่เหตุการณ์เกิดขึ้นโดยไม่มีเหตุการณ์ย่อย |
| ขนาดฮีปที่ใช้ | จํานวนหน่วยความจําที่แอปพลิเคชันใช้เมื่อบันทึกเหตุการณ์ และการเปลี่ยนแปลง (+/-) ของขนาดกองที่ใช้ตั้งแต่การสุ่มตัวอย่างครั้งล่าสุด |
กําลังโหลดเหตุการณ์
ส่วนนี้จะแสดงเหตุการณ์ที่อยู่ในหมวดหมู่การโหลดและพร็อพเพอร์ตี้ของเหตุการณ์
| กิจกรรม | คำอธิบาย |
|---|---|
| แยกวิเคราะห์ HTML | Chrome เรียกใช้อัลกอริทึมการแยกวิเคราะห์ HTML |
| เสร็จสิ้นการโหลด | คำขอเครือข่ายเสร็จสมบูรณ์ |
| รับข้อมูล | ได้รับข้อมูลสำหรับคำขอแล้ว จะมีเหตุการณ์ "รับข้อมูล" อย่างน้อย 1 รายการ |
| รับคำตอบ | การตอบกลับ HTTP เริ่มต้นจากคําขอ |
| ส่งคำขอ | ส่งคำขอเครือข่ายแล้ว |
กำลังโหลดพร็อพเพอร์ตี้เหตุการณ์
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
| ทรัพยากร | URL ของทรัพยากรที่ขอ |
| Preview | ตัวอย่างของทรัพยากรที่ขอ (รูปภาพเท่านั้น) |
| วิธีส่งคำขอ | เมธอด HTTP ที่ใช้ในการส่งคำขอ (เช่น GET หรือ POST) |
| รหัสสถานะ | รหัสการตอบกลับ HTTP |
| ประเภท MIME | ประเภท MIME ของทรัพยากรที่ขอ |
| ความยาวของข้อมูลที่เข้ารหัส | ความยาวของทรัพยากรที่ขอในหน่วยไบต์ |
กิจกรรมสคริปต์
ส่วนนี้จะแสดงเหตุการณ์ที่อยู่ในหมวดหมู่การเขียนสคริปต์และพร็อพเพอร์ตี้ของเหตุการณ์
| กิจกรรม | คำอธิบาย |
|---|---|
| เฟรมของภาพเคลื่อนไหวทำงาน | เฟรมภาพเคลื่อนไหวที่ตั้งเวลาไว้เริ่มทำงาน และเรียกใช้ตัวแฮนเดิลการเรียกกลับ |
| ยกเลิกเฟรมภาพเคลื่อนไหว | ยกเลิกเฟรมภาพเคลื่อนไหวที่ตั้งเวลาไว้แล้ว |
| เหตุการณ์ GC | ระบบจัดการหน่วยความจําที่ไม่ใช้แล้ว |
| DOMContentLoaded | เบราว์เซอร์เรียกใช้ DOMContentLoaded เหตุการณ์นี้จะทริกเกอร์เมื่อโหลดและแยกวิเคราะห์เนื้อหา DOM ทั้งหมดของหน้าแล้ว |
| ประเมินสคริปต์ | สคริปต์ได้รับการประเมินแล้ว |
| กิจกรรม | เหตุการณ์ JavaScript ("mousedown" หรือ "key" เป็นต้น) |
| Function Call | มีการเรียกฟังก์ชัน JavaScript ระดับบนสุด (จะปรากฏขึ้นเมื่อเบราว์เซอร์เข้าสู่เครื่องมือรันไทม์ JavaScript เท่านั้น) |
| ติดตั้งตัวจับเวลา | มีการสร้างตัวจับเวลาด้วย setInterval() หรือ setTimeout() |
| ส่งคำขอเฟรมภาพเคลื่อนไหว | การเรียกใช้ requestAnimationFrame() กําหนดเวลาเฟรมใหม่ |
| นำตัวจับเวลาออก | ล้างตัวจับเวลาที่สร้างไว้ก่อนหน้านี้แล้ว |
| เวลา | สคริปต์ชื่อ console.time() |
| เวลาสิ้นสุด | สคริปต์ชื่อ console.timeEnd() |
| ตัวจับเวลาเริ่มทำงาน | ตัวจับเวลาที่เริ่มทํางานซึ่งกําหนดเวลาไว้ด้วย setInterval() หรือ setTimeout() |
| การเปลี่ยนแปลงสถานะ "พร้อม" ของ XHR | สถานะ "พร้อม" ของ XMLHTTPRequest มีการเปลี่ยนแปลง |
| การโหลด XHR | XMLHTTPRequest โหลดเสร็จแล้ว |
พร็อพเพอร์ตี้เหตุการณ์สคริปต์
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
| รหัสตัวจับเวลา | รหัสตัวจับเวลา |
| หมดเวลา | ระยะหมดเวลาที่ตัวจับเวลาระบุ |
| ทำซ้ำ | บูลีนที่ระบุว่าตัวจับเวลาจะทํางานซ้ำหรือไม่ |
| Function Call | ฟังก์ชันที่เรียกใช้ |
การแสดงผลเหตุการณ์
ส่วนนี้จะแสดงเหตุการณ์ที่อยู่ในหมวดหมู่การแสดงผลและพร็อพเพอร์ตี้ของเหตุการณ์
| กิจกรรม | คำอธิบาย |
|---|---|
| ทำให้เลย์เอาต์ไม่ถูกต้อง | เลย์เอาต์หน้าเว็บไม่ถูกต้องเนื่องจากการเปลี่ยนแปลง DOM |
| เลย์เอาต์ | มีการเรียกใช้เลย์เอาต์หน้าเว็บ |
| คำนวณรูปแบบอีกครั้ง | Chrome คำนวณรูปแบบองค์ประกอบใหม่ |
| เลื่อน | เลื่อนเนื้อหาของมุมมองที่ฝังอยู่ |
การแสดงผลพร็อพเพอร์ตี้เหตุการณ์
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
| เลย์เอาต์ไม่ถูกต้อง | สำหรับระเบียนเลย์เอาต์ ให้ระบุสแต็กเทรซของโค้ดที่ทำให้เลย์เอาต์ใช้งานไม่ได้ |
| โหนดที่ต้องมีเลย์เอาต์ | สําหรับระเบียนเลย์เอาต์ จำนวนโหนดที่มีการทำเครื่องหมายว่าต้องจัดวางก่อนเริ่มการจัดวางใหม่ โดยปกติแล้ว โหนดเหล่านี้คือโหนดที่โค้ดของนักพัฒนาแอปทำให้ใช้งานไม่ได้ รวมถึงเส้นทางที่ขึ้นไปยังรูทเพื่อจัดเรียงใหม่ |
| ขนาดต้นไม้เลย์เอาต์ | สําหรับระเบียนเลย์เอาต์ จํานวนโหนดทั้งหมดที่อยู่ภายใต้รูทการจัดเรียงใหม่ (โหนดที่ Chrome เริ่มการจัดเรียงใหม่) |
| ขอบเขตเลย์เอาต์ | ค่าที่เป็นไปได้คือ "บางส่วน" (ขอบเขตการจัดเรียงใหม่คือส่วนหนึ่งของ DOM) หรือ "ทั้งเอกสาร" |
| องค์ประกอบที่ได้รับผลกระทบ | สําหรับระเบียน "คํานวณรูปแบบอีกครั้ง" จํานวนองค์ประกอบที่ได้รับผลกระทบจากการคํานวณรูปแบบอีกครั้ง |
| รูปแบบที่ใช้ไม่ได้ | สําหรับ "คํานวณระเบียนรูปแบบอีกครั้ง" ให้ระบุสแต็กเทรซของโค้ดที่ทําให้รูปแบบใช้งานไม่ได้ |
งานกิจกรรมการวาดภาพ
ส่วนนี้จะแสดงเหตุการณ์ที่อยู่ในหมวดหมู่ภาพวาดและพร็อพเพอร์ตี้ของเหตุการณ์
| กิจกรรม | คำอธิบาย |
|---|---|
| เลเยอร์ผสม | เลเยอร์รูปภาพที่รวมกันโดยเครื่องมือแสดงผลของ Chrome |
| ถอดรหัสรูปภาพ | ถอดรหัสแหล่งข้อมูลรูปภาพแล้ว |
| การปรับขนาดรูปภาพ | ปรับขนาดรูปภาพจากขนาดเดิม |
| สี | เลเยอร์แบบคอมโพสิตได้รับการวาดไปยังพื้นที่ของจอแสดงผล การวางเมาส์เหนือระเบียนการวาดภาพจะไฮไลต์พื้นที่ของจอแสดงผลที่อัปเดต |
พร็อพเพอร์ตี้ของกิจกรรมการวาดภาพ
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
| ตำแหน่ง | สําหรับเหตุการณ์การวาด พิกัด x และ y ของสี่เหลี่ยมผืนผ้าการวาด |
| ขนาด | สําหรับเหตุการณ์การวาด ความสูงและความกว้างของพื้นที่ที่วาด |