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

Sofia Emelianova
Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ในแผงประสิทธิภาพของ DevTools ของ Node.js คุณสามารถเลือกอินสแตนซ์ JavaScript VM จากเมนูแบบเลื่อนลงที่เกี่ยวข้องในแถบการทำงาน ฟีเจอร์ที่คล้ายกันเคยมีให้ใช้งานในเครื่องมือสร้างโปรไฟล์ 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) / Cmd (Win) + Cmd + คลิกหมายเลขบรรทัดในแหล่งที่มาเพื่อสร้างจุดตรวจสอบ แป้นพิมพ์ลัดนี้เป็นส่วนเสริมของ Cmd (Mac) / Ctrl (Win) + คลิกจุดพักแบบมีเงื่อนไขที่มีอยู่แล้ว

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

คำสั่งใหม่เพื่อแสดงไฟล์ที่ใช้งานอยู่ในแถบด้านข้างของตัวนำทาง

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

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

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

เมนูแบบเลื่อนลงพร้อมตัวเลือกท่า

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

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

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

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

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

เครื่องมือสำหรับนักพัฒนาเว็บจะตรงกับธีมสีที่เลือกไว้ใน "ลักษณะที่ปรากฏ"

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

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

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

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

ภาพก่อนและหลังการบันทึกคุกกี้ของบุคคลที่สามในแผงเครือข่าย

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

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

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

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

ปัญหาเกี่ยวกับ 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)
  • ประสิทธิภาพ:
    • ตอนนี้ปุ่มเก็บขยะมีไอคอนที่เหมาะสม คือ "ถูพื้น" แทน "ถัง" (1507530)
    • ตอนนี้การติดตามประสิทธิภาพจะเก็บรักษาข้อมูลไว้เมื่อไปยัง about:blank (1509947)

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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