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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 41175925

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

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

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

กลุ่มภาพเคลื่อนไหวแบบเลื่อนที่มีไอคอนเมาส์กำกับ

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 40166888

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

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

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

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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ 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 ใน DevTools ได้ที่ Lighthouse: เพิ่มประสิทธิภาพความเร็วเว็บไซต์

ปัญหาเกี่ยวกับ Chromium: 772558

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

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

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

ปัญหาเกี่ยวกับ Chromium: 41490331

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

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

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

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

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

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

ปัญหา Chromium: 324464353

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

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

หลังจากนั้น DevTools ได้นำส่วน Web SQL ออกจากแผงแอปพลิเคชัน

ปัญหาเกี่ยวกับ Chromium: 327254049

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 41494198, 329253687

แผงเลเยอร์อาจเลิกใช้งานไปแล้ว

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 40262073

ไฮไลต์เบ็ดเตล็ด

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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

Chrome 126

Chrome 125

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