หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Sofia Emelianova

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

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

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

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

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

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

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

การควบคุมเครือข่ายที่มีประสิทธิภาพมากขึ้นสำหรับ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ