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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

ปรับปรุงเมนูย่อย "คัดลอก"

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1467739

เงื่อนไขเริ่มต้นเหตุการณ์ในแทร็กหลัก

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

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

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

รูปลูกศรจากคําขอและการเรียกใช้ Callback ที่ไม่มีการใช้งาน

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

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

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

ลักษณะก่อนและหลังเพิ่มเมนูใหม่ที่ให้คุณเลือกอินสแตนซ์ 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 + คลิกหมายเลขบรรทัดในแหล่งที่มาเพื่อสร้างจุดบันทึกได้แล้ว ทางลัดนี้มาช่วยเสริม 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 หรือ เบต้า เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ได้ก่อนที่ผู้ใช้จะพบ

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

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

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

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