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

ส่วนขยายสำหรับโปรแกรมบันทึกอย่างเป็นทางการพร้อมใช้งานแล้ว

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

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

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

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

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

ตอนนี้คอลัมน์สถานะจะแสดงสาเหตุที่ยืนยันไม่สำเร็จเสมอ ก่อนหน้านี้คุณต้องเปิด check_box Big request rows หรือเลือกคำขอในตาราง

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

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

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

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

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

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

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

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

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

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

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

ผู้เริ่มกิจกรรมในแทร็กหลัก

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

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

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

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

เมนูตัวเลือกอินสแตนซ์ VM ของ JavaScript สำหรับเครื่องมือสำหรับนักพัฒนาเว็บของ Node.js

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

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

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

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

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

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

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

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

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

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

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

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

ทางลัดและคำสั่งใหม่ในแหล่งข้อมูล

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

เมนูคำสั่งมีคำสั่งใหม่ Reveal active file in navigator sidebar ซึ่งทำงานเหมือนกับตัวเลือกที่เกี่ยวข้องในเมนูแบบเลื่อนลงของเอดิเตอร์

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

ปัญหาใน Chromium: 772558

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

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

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

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

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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

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