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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1506760

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1467739

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

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

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

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

ลูกศรจากคำขอและการเริ่มทำงานของโค้ดเรียกกลับที่ไม่มีการใช้งาน

ปัญหา Chromium: 1434596

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

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

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

ปัญหา Chromium: 1511813

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

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

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

ตอนนี้แก้ไของค์ประกอบจำลอง ::view-transition ในสไตล์ได้แล้ว

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

ก่อนและหลังการแก้ไขการรองรับองค์ประกอบเทียมของ View-transition

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

ปัญหา Chromium: 1511233

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

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

การรองรับก่อนและหลังการปรับเนื้อหาให้สอดคล้องกันในคอนเทนเนอร์แบบบล็อก

ปัญหา Chromium: 1500511

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

ขณะนี้คุณสามารถ Cmd (Mac) / Ctrl (Win) + Shift + คลิกหมายเลขบรรทัดใน Sources เพื่อสร้างจุดตรวจสอบ แป้นพิมพ์ลัดนี้เป็นส่วนเพิ่มเติมจาก 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)
    • ตัวอย่าง: แก้ไขข้อบกพร่องกับการถอดรหัส 2 ชั้นที่ไม่จำเป็น (1509336)
    • แก้ไขข้อบกพร่องเนื่องจากคำขอสั้นๆ ไม่แสดง (1509862)
  • แอปพลิเคชัน > IndexedDB: ปุ่มที่จัดเรียงใหม่ในแถบการทำงานเพื่อให้สอดคล้องกับแผงอื่นๆ (1393800)
  • เซ็นเซอร์: แก้ไขข้อบกพร่องกับโค้ดเรียกกลับสำเร็จสำหรับตำแหน่งที่ไม่พร้อมใช้งาน (1486859)
  • ประสิทธิภาพ:
    • ตอนนี้ปุ่มเก็บขยะจะมีไอคอนที่เหมาะสม คำว่า "ถูพื้น" แทนที่จะเป็น "ถังขยะ" (1507530)
    • ขณะนี้การติดตามประสิทธิภาพจะเก็บข้อมูลไว้เมื่อไปยัง about:blank (1509947)

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

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

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

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

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

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

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59