มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (Chrome 58)

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

ไฮไลต์

  • แผงไทม์ไลน์เปลี่ยนชื่อเป็นแผงประสิทธิภาพแล้ว
  • แผงโปรไฟล์ได้เปลี่ยนชื่อเป็นแผงหน่วยความจำแล้ว
  • คุณแก้ไขค่าคุกกี้ได้แล้ว
  • ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวโดยอัตโนมัติก่อนเกิดข้อผิดพลาดเกี่ยวกับหน่วยความจำไม่เพียงพอ

ฟีเจอร์ใหม่

คุกกี้ที่แก้ไขได้

ดับเบิลคลิกเซลล์ในแท็บคุกกี้เพื่อแก้ไขค่านั้น

การแก้ไขคุกกี้
รูปที่ 1 การแก้ไขคุกกี้

ขอขอบคุณ kdzwinel ที่ร่วมให้ข้อมูล

ตัวแปร CSS ที่ตรวจสอบและแก้ไขได้ในแผงรูปแบบ

ตอนนี้คุณตรวจสอบและแก้ไขตัวแปร CSS ในแผงรูปแบบได้แล้ว ดูการสาธิตตัวแปร CSS เพื่อลองใช้งาน

เบรกพอยท์แบบหน่วยความจำไม่เพียงพอ

เมื่อแอปจัดสรรหน่วยความจำจำนวนมากในช่วงเวลาสั้นๆ เครื่องมือสำหรับนักพัฒนาเว็บจะหยุดชั่วคราวและเพิ่มขีดจำกัดฮีปโดยอัตโนมัติ ซึ่งช่วยให้คุณตรวจสอบฮีป เรียกใช้คำสั่งบน Console เพื่อเพิ่มหน่วยความจำและแก้ไขข้อบกพร่องต่อไปได้ ดูข้อมูลเพิ่มเติมได้ที่ One Step Step สำหรับ Chrome และ One Giant Heap สำหรับ V8

หยุดชั่วคราวบนเบรกพอยท์ที่ไม่เพียงพอ
รูปที่ 2 หยุดชั่วคราวในเบรกพอยท์ที่ไม่มีหน่วยความจำ

เบรกพอยท์ในการสร้าง Canvas

ตอนนี้คุณสามารถสร้างเบรกพอยท์ของ Listener เหตุการณ์ซึ่งจะทริกเกอร์ทุกครั้งที่มีการสร้างบริบท Canvas ใหม่

เบรกพอยท์ของการสร้าง Canvas ผ่านช่องทำเครื่องหมายบริบท "สร้าง Canvas" ในแผงเบรกพอยท์ของ Listener เหตุการณ์
รูปที่ 3 เบรกพอยท์ของการสร้าง Canvas ผ่านช่องทำเครื่องหมายสร้างบริบท Canvas ในแผงเบรกพอยท์ของ Listener เหตุการณ์

สถิติเวลาเริ่มต้นในแท็บเวลา

ตอนนี้คุณจะเห็นว่าคำขออยู่ในคิวและเริ่มต้นเมื่อใดที่ด้านบนของแท็บ "ระยะเวลา"

สถิติเวลาเริ่มต้นในแท็บ "ระยะเวลา"
รูปที่ 4 สถิติเวลาเริ่มต้นในแท็บเวลา

สถิติของเซิร์ฟเวอร์ในแท็บเวลา

ตอนนี้คุณสามารถแทรกสถิติเซิร์ฟเวอร์ที่กำหนดเองลงในแท็บ "ระยะเวลา" ได้แล้ว ดูตัวอย่างได้ที่การสาธิตค่าเวลาของเซิร์ฟเวอร์

สถิติของเซิร์ฟเวอร์ในแท็บเวลา
รูปที่ 5 สถิติของเซิร์ฟเวอร์ในแท็บระยะเวลา

ขอขอบคุณ sroussey ที่ร่วมให้ข้อมูล

การเปลี่ยนแปลง

ตอนนี้แผงไทม์ไลน์เปลี่ยนเป็นแผงประสิทธิภาพแล้ว

เราได้เปลี่ยนชื่อแผงไทม์ไลน์เป็นแผงประสิทธิภาพเพื่อให้สะท้อนถึงวัตถุประสงค์ของแผงได้ดียิ่งขึ้น

ตอนนี้แผง "โปรไฟล์" เปลี่ยนเป็นแผงความทรงจำแล้ว

แผง "โปรไฟล์" ได้เปลี่ยนชื่อเป็นแผง "ความทรงจำ" เพื่อให้สะท้อนจุดประสงค์การใช้งานได้ดียิ่งขึ้น

CPU Profiler อยู่หลังแผงที่ซ่อนอยู่

ตอนนี้แผง "โปรไฟล์" เปลี่ยนชื่อเป็นแผง Memory แล้ว การมีตัวสร้างโปรไฟล์ CPU ก็คงไม่ใช่สิ่งที่ดีแล้ว นอกจากนี้ เป้าหมายระยะยาวคือการให้ผู้ใช้ทั้งหมดทำโปรไฟล์จากแผงประสิทธิภาพ ในระหว่างนี้ คุณยังคงสามารถเข้าถึงเครื่องมือสร้างโปรไฟล์ CPU ตัวเก่าได้จาก การตั้งค่า > เครื่องมือเพิ่มเติม > เครื่องมือสร้างโปรไฟล์ JavaScript

ดูเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome: การระบุ CPU ของ JavaScript ใน Chrome 58 เพื่อดูวิธีสร้างโปรไฟล์ CPU ในแผงประสิทธิภาพ

UI คอนโซลใหม่

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

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

ย้ายเบรกพอยท์ Listener เหตุการณ์ WebGL แล้ว

เบรกพอยท์ของผู้ฟังเหตุการณ์ของ WebGL ได้ย้ายจากหมวดหมู่ WebGL ไปยังหมวดหมู่ Canvas หมวดหมู่ WebGL ถูกนำออกแล้ว