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

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

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

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

การปรับปรุงเครือข่าย

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

เหตุผลที่ไม่สำเร็จในคอลัมน์สถานะ

ตอนนี้คอลัมน์สถานะจะแสดงเหตุผลที่ล้มเหลวเสมอ ก่อนหน้านี้คุณต้องเปิดcheck_box แถวคำขอขนาดใหญ่ หรือเลือกคำขอในตาราง

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

เมนูย่อยการคัดลอกที่ได้รับการปรับปรุง

ตอนนี้เมนูย่อยคัดลอกของคำขอได้รับการจัดระเบียบให้ดีขึ้นแล้ว

นอกจากนี้ ตอนนี้ตัวเลือกคัดลอกเป็น cURL จะคัดลอกคำสั่งที่ถูกต้องไปยังคลิปบอร์ดใน Windows

ปัญหาเกี่ยวกับ Chromium: 1267033, 1276452, 798498

ปรับปรุงประสิทธิภาพ

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

เบรดครัมบ์ในไทม์ไลน์

ไทม์ไลน์ที่ด้านบนของแผงประสิทธิภาพให้คุณตั้งค่าเบรดครัมบ์และข้ามไปมาระหว่างหน้าได้แล้ว

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

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

ผู้เริ่มเหตุการณ์ในแทร็กหลัก

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

• การทำให้รูปแบบหรือเลย์เอาต์ไม่ถูกต้อง -> คำนวณสไตล์ใหม่หรือเลย์เอาต์
• ขอเฟรมภาพเคลื่อนไหว -> เฟรมภาพเคลื่อนไหวเริ่มทำงาน
• ขอ Callback ที่ไม่มีการใช้งาน -> เริ่มการทำงานของ Callback ที่ไม่มีการใช้งาน
• ติดตั้งตัวจับเวลา -> ตัวจับเวลาเริ่มทำงาน
• สร้าง WebSocket -> ส่ง... และ รับแฮนด์เชค WebSocket หรือ ทำลาย WebSocket

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

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

เมนูตัวเลือกอินสแตนซ์ VM ของ JavaScript สำหรับ DevTools ของ Node.js

ในแผงประสิทธิภาพของ DevTools ของ Node.js คุณสามารถเลือกอินสแตนซ์ JavaScript VM จากเมนูแบบเลื่อนลงที่เกี่ยวข้องในแถบการทำงาน ฟีเจอร์ที่คล้ายกันเคยมีให้ใช้งานในเครื่องมือสร้างโปรไฟล์ JavaScript ซึ่งกำลังจะถูกเลิกใช้งาน

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

การปรับปรุงองค์ประกอบ

เวอร์ชันนี้ได้รับการปรับปรุงหลายอย่างกับแผงองค์ประกอบ

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

แก้ไของค์ประกอบเทียม ::view-transition ในรูปแบบต่างๆ ได้แล้ว

คุณแก้ไของค์ประกอบเทียมของ CSS ::view-transition ในรูปแบบโดยใช้สไตล์ชีตของเครื่องมือตรวจสอบได้แล้ว

โปรดดูข้อมูลเพิ่มเติมที่การเปลี่ยนที่ราบรื่นและง่ายดายด้วย View Transitions API

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

การสนับสนุนพร็อพเพอร์ตี้ align-content สำหรับคอนเทนเนอร์การบล็อก

ตอนนี้พร็อพเพอร์ตี้ align-content ใช้งานได้กับคอนเทนเนอร์การบล็อกทุกประเภทแล้ว ซึ่งรวมถึง table-caption และ table-cell ก่อนหน้านี้ฟีเจอร์นี้ใช้ได้กับตารางกริดและ Flex เท่านั้น

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

ทางลัดและคําสั่งใหม่ในแหล่งที่มา

ตอนนี้คุณสามารถ Cmd (Mac) / Ctrl (Win) + Shift + คลิกหมายเลขบรรทัดในแหล่งที่มาเพื่อสร้างจุดตรวจสอบ แป้นพิมพ์ลัดนี้เป็นส่วนเสริมของ Cmd (Mac) / Ctrl (Win) + คลิกจุดพักแบบมีเงื่อนไขที่มีอยู่แล้ว

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

ปัญหาเกี่ยวกับ Chromium: 1486933, 1467464

การรองรับท่าทางสำหรับอุปกรณ์พับได้จำลอง

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

นอกจากนี้ รายการอุปกรณ์ยังมีอุปกรณ์แบบพับได้ใหม่ชื่อ Asus Zenbook Fold

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

ธีมแบบไดนามิก

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะจับคู่กับธีมสีของ Chrome โดยอัตโนมัติ วิธีตั้งค่าธีม

1. เปิดแท็บใหม่แล้วคลิกแก้ไข ปรับแต่ง Chrome ที่มุมล่างขวา
2. ใน "ธีมของแอป" ให้เลือกธีมจากวอลเปเปอร์ เปลี่ยนธีม หรือเลือกชุดสี

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

คุกกี้ของบุคคลที่สามยกเลิกคำเตือนในแผงเครือข่ายและแอปพลิเคชัน

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

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

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

วางเมาส์เหนือไอคอนคำเตือนเพื่อดูเคล็ดลับเครื่องมือซึ่งอธิบายปัญหา และคลิกไอคอนดังกล่าวเพื่อเปิดแท็บปัญหาที่มีข้อมูลเพิ่มเติม

นอกจากนี้ คุกกี้ในตารางจะมีการจัดเรียงตามชื่อโดยค่าเริ่มต้น

ปัญหาเกี่ยวกับ Chromium: 1506225, 1503961

Lighthouse 11.4.0

ตอนนี้แผง Lighthouse จะเรียกใช้ Lighthouse 11.4.0 แล้ว ดูรายการการเปลี่ยนแปลงทั้งหมด การเปลี่ยนแปลงที่สําคัญคือการตรวจสอบแบบใหม่ที่ช่วยให้คุณทราบว่าเว็บไซต์ยังคงใช้คุกกี้ของบุคคลที่สามอยู่หรือไม่

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

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

การช่วยเหลือพิเศษ

เวอร์ชันนี้มีการปรับปรุงการช่วยเหลือพิเศษดังต่อไปนี้

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

ปัญหาเกี่ยวกับ Chromium: 1504938, 1499868, 1512161, 1515224, 1515418, 1516998, 1517015

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

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

• ภาพเคลื่อนไหว:
  • แก้ไขข้อบกพร่องในการแสดงภาพป๊อปโอเวอร์เกินขอบเขต (1506991)
  • แก้ไขข้อบกพร่องที่ลบโหนดภาพเคลื่อนไหวที่ไม่ได้ทำเครื่องหมายเป็นนำออกแล้ว (1506561)
• เครือข่าย:
  • การลบล้างส่วนหัว: แก้ไขข้อบกพร่องที่มีไอคอนจุดสีม่วงปลอมในแท็บส่วนหัว (1507856)
  • แสดงตัวอย่าง: แก้ไขข้อบกพร่องที่มีการถอดรหัสซ้ำโดยไม่จำเป็น (1509336)
  • แก้ไขข้อบกพร่องเนื่องจากคำขอแบบสั้นไม่แสดง (1509862)
• แอปพลิเคชัน > IndexedDB: ปุ่มที่เรียงลำดับใหม่ในแถบการทำงานเพื่อให้สอดคล้องกับแผงอื่นๆ (1393800)
• เซ็นเซอร์: แก้ไขข้อบกพร่องเกี่ยวกับการติดต่อกลับที่สำเร็จของตำแหน่งที่ไม่พร้อมใช้งานไม่ถูกต้อง (1486859)
• ประสิทธิภาพ:
  • ตอนนี้ปุ่มเก็บขยะมีไอคอนที่เหมาะสม คือ "ไม้ถูพื้น" แทนที่จะเป็น "bin" (1507530)
  • ตอนนี้การติดตามประสิทธิภาพจะเก็บรักษาข้อมูลไว้เมื่อไปยัง about:blank (1509947)

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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