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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 41175925

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ 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

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

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

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

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

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

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

ปัญหา Chromium: 324464353

เลิกใช้งาน Web SQL อย่างสมบูรณ์แล้ว

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

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

ปัญหา Chromium: 327254049

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

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

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools