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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

ก่อนและหลังการปรับปรุงเมนูย่อยคัดลอก

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

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

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

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

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

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

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

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

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

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

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

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

ลูกศรจากคำขอและการเรียกใช้ Idle Callback

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

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

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

ก่อนและหลังการเพิ่มเมนูใหม่ที่ให้คุณเลือกอินสแตนซ์ VM ของ JavaScript

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

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

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

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

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

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

การรองรับการแก้ไขก่อนและหลังขององค์ประกอบเสมือนของการเปลี่ยนมุมมอง

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

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

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

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

การรองรับ align-content ก่อนและหลังในคอนเทนเนอร์บล็อก

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

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

ตอนนี้คุณสามารถกด Cmd (Mac) / Ctrl (Win) + Shift + คลิกหมายเลขบรรทัดในแหล่งที่มาเพื่อสร้าง Logpoint ได้แล้ว แป้นพิมพ์ลัดนี้เป็นส่วนเสริมของ 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 ในเครื่องมือสำหรับนักพัฒนาเว็บได้ที่ 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

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

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

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