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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

ลองใช้แผงใหม่ในหน้าสาธิตที่มีข้อมูลการทดสอบ ดังนี้

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

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

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

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

การควบคุมเครือข่ายที่ปรับปรุงแล้วสำหรับ WebRTC

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

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

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

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

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

ปัญหา Chromium: 41175925

การรองรับภาพเคลื่อนไหวแบบเลื่อนในแผงภาพเคลื่อนไหว

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

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

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

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

ปรับปรุงการรองรับการซ้อน CSS ในองค์ประกอบ > สไตล์

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

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

ปัญหา Chromium: 40166888

แผงประสิทธิภาพที่ปรับปรุงแล้ว

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

ซ่อนฟังก์ชันและองค์ประกอบย่อยในแผนภูมิเปลวไฟ

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

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

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

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

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

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

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

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

Lighthouse 11.6.0

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

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

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

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

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

การติดตามจะอยู่ใน เมนูเครื่องมือ more_vert > ดูการติดตามที่ไม่มีการควบคุมหลังจากที่สร้างรายงาน Lighthouse

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

ปัญหาของ Chromium: 772558

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

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

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

ปัญหา Chromium: 41490331

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

โดยเวอร์ชันนี้มีการอัปเดต 2-3 รายการในส่วนแอปพลิเคชัน > พื้นที่เก็บข้อมูล

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

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

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

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

ปัญหาของ Chromium: 324464353

เลิกใช้งาน SQL ในเว็บโดยสมบูรณ์แล้ว

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

หลังจากนั้นเครื่องมือสำหรับนักพัฒนาเว็บก็ได้นำส่วน SQL ของเว็บออกจากแผงแอปพลิเคชัน

ปัญหาของ Chromium: 327254049

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

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

  • ตอนนี้แถบสถานะจะคำนวณสถิติการใช้งานสำหรับ 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 DevTools Support (DWARF) (40746829)
  • ประสิทธิภาพ: แก้ไขสแต็กการเรียกใช้ที่ครอบตัดและเลย์เอาต์ที่ไม่ดีในแท็บสรุป (325314708)
  • ลิ้นชัก: ปุ่มปิด ปิดสามารถโฟกัสได้แล้ว จึงสามารถปิดแผงได้โดยใช้แป้นพิมพ์

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

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

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

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

  • ส่งคำแนะนำหรือความคิดเห็นถึงเราผ่าน crbug.com
  • รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม   เพิ่มเติม   > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
  • ทวีตที่ @ChromeDevTools
  • แสดงความคิดเห็นเกี่ยวกับ "มีอะไรใหม่ในวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ" หรือเคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บวิดีโอ YouTube

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

รายการของทุกอย่างที่อยู่ในชุดมีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59