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

Sofia Emelianova
Sofia Emelianova
GitHub

แผงป้อนข้อความอัตโนมัติใหม่

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

ลองใช้แผงใหม่ในหน้าเดโมนี้ด้วยข้อมูลทดสอบ

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

แผงป้อนข้อความอัตโนมัติจะเปิดขึ้นโดยอัตโนมัติและแสดงช่องแบบฟอร์มที่ตรวจพบ ช่องที่การป้อนข้อความอัตโนมัติอนุมาน และค่าที่บันทึกไว้

แผงป้อนข้อความอัตโนมัติ

ดูข้อมูลเพิ่มเติมได้ที่เรียนรู้เกี่ยวกับฟอร์มและป้อนข้อความอัตโนมัติ

การควบคุมเครือข่ายที่เพิ่มประสิทธิภาพสำหรับ WebRTC

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

พารามิเตอร์ใหม่ ได้แก่ การสูญเสียแพ็กเก็ต (เปอร์เซ็นต์), ความยาวคิวแพ็กเก็ต (จำนวนแพ็กเก็ต) และค่าสถานะ การเรียงลำดับแพ็กเก็ตใหม่

ก่อนและหลังเพิ่มตัวเลือกใหม่ที่เกี่ยวข้องกับแพ็กเก็ตลงในโปรไฟล์การควบคุมอัตราที่กำหนดเอง

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

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

ปัญหาใน Chromium: 41175925

การรองรับภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนในแผงภาพเคลื่อนไหว

ตอนนี้แผงภาพเคลื่อนไหวช่วยให้คุณตรวจสอบภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนได้แล้ว

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

กลุ่มภาพเคลื่อนไหวที่ขับเคลื่อนด้วยการเลื่อนซึ่งมีไอคอนเมาส์กำกับอยู่

กลุ่มภาพเคลื่อนไหวที่มีไอคอนเมาส์จะปรากฏในภาพรวม ตอนนี้คุณตรวจสอบได้แล้ว กลุ่มจะแสดงค่าพิกเซลแทนมิลลิวินาทีในไทม์ไลน์

ปรับปรุงการรองรับการซ้อน CSS ในองค์ประกอบ > รูปแบบ

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

ก่อนและหลังการเพิ่มการเยื้องและการใส่สไตล์ที่ซ้อนกันในวงเล็บปีกกา

ปัญหาใน Chromium: 40166888

แผงประสิทธิภาพที่ได้รับการปรับปรุง

เวอร์ชันนี้มีการปรับปรุงแผงประสิทธิภาพหลายอย่าง

ซ่อนฟังก์ชันและฟังก์ชันย่อยในแผนภูมิ Flame Chart

ตอนนี้คุณสามารถซ่อนฟังก์ชันที่ไม่เกี่ยวข้องและฟังก์ชันย่อยเพื่อกรองสัญญาณรบกวนออกจากแผนภูมิเปลวไฟในประสิทธิภาพ > หลักได้แล้ว ในแผนภูมิเปลวไฟ ให้คลิกขวาที่ฟังก์ชัน แล้วเลือกตัวเลือกจากเมนูตามบริบท

ก่อนและหลังการเพิ่มเมนูตามบริบทที่ช่วยให้คุณซ่อนฟังก์ชันและฟังก์ชันย่อยได้

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

ลูกศรจากผู้เริ่มที่เลือกไปยังเหตุการณ์ที่ผู้เริ่มนั้นเริ่ม

ก่อนหน้านี้ เมื่อคุณเลือกเหตุการณ์ในเส้นทางหลัก เส้นทางจะแสดงลูกศรจากผู้เริ่มต้นไปยังเหตุการณ์ที่เลือก ตอนนี้แทร็กจะแสดงลูกศรจากเหตุการณ์ที่เลือกไปยังเหตุการณ์ที่เริ่มต้นด้วย หากมี

ลูกศรแสดงก่อนและหลังจากการเลือกไปยังเหตุการณ์ที่เริ่มต้นและลิงก์ที่มีชื่อแทนการเปิดเผย

นอกจากนี้ ตอนนี้ผู้เริ่มทั้งหมดมีช่องผู้เริ่มสำหรับในแท็บสรุป และทั้งช่องผู้เริ่มสำหรับและเริ่มโดยมีลิงก์ที่มีชื่อแทนเปิดเผย

ปัญหาเกี่ยวกับ Chromium: 325604258, 325024819, 326055289

Lighthouse 11.6.0

ตอนนี้แผง Lighthouse จะเรียกใช้ Lighthouse 11.6.0 ดูรายการการเปลี่ยนแปลงทั้งหมด

การเปลี่ยนแปลงที่สำคัญอย่างหนึ่งคือการตั้งค่าการเลือกใช้ใหม่ เปิดใช้การสุ่มตัวอย่าง JS การตั้งค่านี้ถูกปิดใช้งานโดยค่าเริ่มต้น

ก่อนและหลังเพิ่มการตั้งค่าการสุ่มตัวอย่าง JS แบบเลือกใช้

การเปิดใช้การสุ่มตัวอย่าง JS จะเพิ่มสแต็กการเรียก JavaScript โดยละเอียดลงในการติดตามประสิทธิภาพ แต่อาจทำให้การสร้างรายงานช้าลง

การติดตามประสิทธิภาพที่ไม่มี (ซ้าย) และมี (ขวา) การสุ่มตัวอย่าง JS

โดยร่องรอยจะอยู่ใน เมนูเครื่องมือ > ดูร่องรอยที่ไม่จำกัด หลังจากสร้างรายงาน Lighthouse แล้ว

ดูข้อมูลพื้นฐานเกี่ยวกับการใช้แผง Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บได้ที่ Lighthouse: เพิ่มประสิทธิภาพความเร็วของเว็บไซต์

ปัญหาใน Chromium: 772558

เคล็ดลับเครื่องมือสำหรับหมวดหมู่พิเศษในหน่วยความจำ > สแนปชอตฮีป

สแนปชอตฮีปในแผงหน่วยความจำมีกลุ่มออบเจ็กต์พิเศษที่ไม่ได้อิงตามตัวสร้าง เมื่อวางเมาส์เหนือออบเจ็กต์ดังกล่าว ตอนนี้แผงหน่วยความจำจะแสดงเคล็ดลับเครื่องมือพร้อมคำอธิบายสั้นๆ และลิงก์ไปยังคำอธิบายที่ยาวขึ้นในเอกสารประกอบ

ภาพก่อนและหลังแสดงเคล็ดลับเครื่องมือแบบอธิบายสำหรับกลุ่มออบเจ็กต์พิเศษ

ปัญหาใน Chromium: 41490331

แอปพลิเคชัน > การอัปเดตพื้นที่เก็บข้อมูล

เวอร์ชันนี้มีการอัปเดต Application > Storage 2 รายการ

ไบต์ที่ใช้สำหรับพื้นที่เก็บข้อมูลที่แชร์

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

ก่อนและหลังแสดงจำนวนไบต์ที่ใช้สำหรับพื้นที่เก็บข้อมูลที่ใช้ร่วมกัน

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

ปัญหาใน Chromium: 324464353

เลิกใช้งาน SQL ในเว็บแล้วโดยสิ้นเชิง

Chrome เลิกใช้งาน Web SQL ในเวอร์ชัน 119 และนำโทเค็นช่วงทดลองใช้การเลิกใช้งานออกในเวอร์ชันนี้ คุณจึงใช้ Web SQL ไม่ได้อีกต่อไป

ด้วยเหตุนี้ เครื่องมือสำหรับนักพัฒนาเว็บจึงนำส่วน Web SQL ออกจากแผงแอปพลิเคชัน

ปัญหาใน Chromium: 327254049

การปรับปรุงแผงความครอบคลุม

เวอร์ชันนี้มีการอัปเดตแผงความครอบคลุม 2 รายการ ดังนี้

  • ตอนนี้แถบสถานะจะคำนวณสถิติการใช้งานสำหรับ URL ที่กรองได้อย่างถูกต้อง ก่อนหน้านี้ แถบสถานะจะรวมข้อมูลการใช้งานของผู้ปกครองแทนที่จะรวมข้อมูลการใช้งานของบุตรหลานที่ตรงกับตัวกรอง

การคำนวณสถิติเด็กที่ตรงกันอย่างถูกต้องทั้งก่อนและหลัง

  • ตอนนี้สีของโค้ดที่ใช้จะเป็นสีเทาแทนสีเขียวเพื่อเพิ่มระดับการมองเห็น โดยเฉพาะอย่างยิ่งสำหรับ ผู้ที่มีภาวะตาบอดสีเขียว

ก่อนและหลังเปลี่ยนสีของโค้ดที่ใช้แล้วเป็นสีเทา

ปัญหาใน Chromium: 41494198, 329253687

อาจมีการเลิกใช้งานแผงเลเยอร์

อาจมีการเลิกใช้งานแผงเลเยอร์เร็วๆ นี้เนื่องจากมีการใช้งานน้อย ตอนนี้แผงจะแสดงแบนเนอร์คำเตือนที่ด้านบน

แบนเนอร์คำเตือนที่ประกาศการเลิกใช้งานที่อาจเกิดขึ้นที่ด้านบนของแผงเลเยอร์

โปรดแสดงความคิดเห็นและแจ้งข้อกังวลของคุณก่อนที่ทีมจะตัดสินใจขั้นสุดท้ายในการเลิกใช้งานแผง

การเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JavaScript: ระยะที่ 4 ซึ่งเป็นระยะสุดท้าย

ในเวอร์ชันนี้ เราได้เลิกใช้งานแผง JS Profiler อย่างสมบูรณ์แล้ว และไม่สามารถเปิดใช้แผงนี้อีกต่อไป

หากต้องการสร้างโปรไฟล์ประสิทธิภาพ CPU ให้ใช้แผงประสิทธิภาพ

ปัญหาใน Chromium: 40262073

ไฮไลต์อื่นๆ

การแก้ไขและการปรับปรุงที่น่าสนใจในรุ่นนี้มีดังนี้

  • เครือข่าย
    • แก้ไขข้อบกพร่องเกี่ยวกับการแยกวิเคราะห์คุกกี้แบบหลายบรรทัดไม่ถูกต้อง (325410304)
    • แก้ไขการแสดงตัวอย่างสแต็กการเรียกในคอลัมน์ผู้เริ่มต้น (327665602)
  • เครื่องมือตรวจสอบประสิทธิภาพ: ตอนนี้ช่องทำเครื่องหมายติดตามจะเหมือนกับในส่วนอื่นๆ ของ UI (1467464)
  • แหล่งข้อมูล: เพิ่มการไฮไลต์ไวยากรณ์สำหรับเอกสาร XHTML (327940244)
  • การตั้งค่า > อุปกรณ์: เปลี่ยน Galaxy Fold รุ่นเก่าเป็น Galaxy Z Fold 5 รุ่นใหม่กว่า (40113439)
  • ประสิทธิภาพ: ตอนนี้ระบบจะไฮไลต์ผลการค้นหาที่ตรงกันทั้งหมดเมื่อค้นหาด้วย Ctrl/Cmd+F (1523279)
  • แหล่งข้อมูลสำหรับนักพัฒนาซอฟต์แวร์: ตอนนี้ยังแสดงทรัพยากรที่โหลดผ่านส่วนขยายภาษา เช่น ส่วนขยาย Chrome สำหรับการรองรับเครื่องมือสำหรับนักพัฒนาเว็บ C/C++ (DWARF) (40746829)
  • ประสิทธิภาพ: แก้ไข Call Stack ที่ครอบตัดแล้วและเลย์เอาต์ที่ไม่ดีในแท็บสรุป (325314708)
  • ลิ้นชัก: ตอนนี้ปุ่ม ปิดสามารถโฟกัสได้แล้ว จึงปิดแผงโดยใช้แป้นพิมพ์ได้

ดาวน์โหลดช่องตัวอย่าง

ลองใช้ Chrome Canary, Dev หรือ Beta เป็นเบราว์เซอร์เริ่มต้นสำหรับการพัฒนา ช่องตัวอย่างเหล่านี้ช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ก่อนที่ผู้ใช้จะพบ

ติดต่อทีมเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

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

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

รายการทุกอย่างที่ครอบคลุมในซีรีส์มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ