หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Sofia Emelianova

การยกเลิกการใช้งานคุกกี้ของบุคคลที่สาม

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

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

คำเตือนเกี่ยวกับการเลิกใช้งานคุกกี้ของบุคคลที่สามที่กำลังจะมีขึ้นในแท็บ "ปัญหา"

ปัญหา Chromium: 1466310

วิเคราะห์คุกกี้ของเว็บไซต์ด้วยเครื่องมือวิเคราะห์ Privacy Sandbox

ส่วนขยายเครื่องมือวิเคราะห์ Privacy Sandbox สำหรับเครื่องมือสำหรับนักพัฒนาเว็บอยู่ระหว่างการพัฒนาด้วยเวอร์ชัน 0.3.2 รุ่นทดลองล่าสุด เครื่องมือนี้จะช่วยให้คุณเข้าใจวิธีที่เว็บไซต์ของคุณใช้คุกกี้และให้คำแนะนำเกี่ยวกับ API ใหม่ของ Chrome ที่รักษาความเป็นส่วนตัว

วิธีวิเคราะห์คุกกี้

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

เครื่องมือวิเคราะห์ Privacy Sandbox

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้เครื่องมือวิเคราะห์ Privacy Sandbox (PSAT) ได้ที่เนื้อหาต่อไปนี้

PSAT ของฮาวทู
ตั้งค่าสภาพแวดล้อมการประเมินเพื่อคาดการณ์แนวโน้มที่อาจเกิดขึ้นเมื่อการเลิกใช้งานมีผลแล้ว
หากต้องการระบุแง่มุมที่จะได้รับผลกระทบ โปรดดูการดำเนินการวิเคราะห์ทั่วไป
หากต้องการดูวิธีวิเคราะห์สถานการณ์ที่พบบ่อย ซึ่งรวมถึงข้อมูลวิเคราะห์, อีคอมเมิร์ซ, บริการ SSO, เนื้อหาที่ฝังไว้ และอื่นๆ ให้ดูตัวอย่างสาธิตในสถานการณ์การวิเคราะห์

นอกจากนี้ โปรดดูคำแนะนำเกี่ยวกับการรายงานปัญหา

รายการละเว้นที่ปรับปรุงประสิทธิภาพ

รูปแบบการยกเว้นเริ่มต้นสำหรับ `node_modules`

เวอร์ชันนี้จะเปิดใช้นิพจน์ทั่วไปเริ่มต้นเป็นกฎการยกเว้นที่กำหนดเองใน การตั้งค่า > รายการที่ละเว้น เพื่อช่วยให้คุณมุ่งเน้นที่โค้ดอย่างเดียว โปรแกรมแก้ไขข้อบกพร่องจะข้ามสคริปต์จาก /node_modules/ และ /bower_components/ โดยค่าเริ่มต้น คุณปิดใช้กฎนี้ในการตั้งค่าได้ทุกเมื่อ

ก่อนและหลังการเพิ่มนิพจน์ทั่วไป

ปัญหา Chromium: 1496301

ตอนนี้ข้อยกเว้นจะหยุดการดำเนินการหากระบบตรวจพบหรือส่งผ่านโค้ดที่ไม่ละเว้น

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

ข้อยกเว้นที่ตรวจจับในเฟรมที่ไม่ละเว้นในสแต็กการเรียกใช้
ข้อยกเว้นที่เจอซึ่งส่งผ่านเฟรมที่ไม่ละเว้นในการเรียกใช้สแต็ก เช่น ดูภาพหน้าจอ

หยุดชั่วคราวสำหรับข้อยกเว้นที่พบซึ่งส่งผ่านโค้ดที่ไม่ละเว้น

หากต้องการทดสอบลักษณะการทำงานนี้ ให้เปิดหน้าสาธิตนี้แล้วทำดังนี้

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

หากต้องการหยุดการดำเนินการชั่วคราวกับข้อยกเว้นที่ตรวจจับและ/หรือไม่พบ (เมื่อเลือกไว้) ในการเรียกใช้แบบไม่พร้อมกัน โปรแกรมแก้ไขข้อบกพร่องจะมองหาตัวแฮนเดิลการปฏิเสธในคำสัญญาต่างๆ ตั้งแต่เวอร์ชันนี้เป็นต้นไป Debugger จะไม่คาดการณ์ว่า Promise.finally() จะตรวจพบข้อยกเว้นอีกต่อไป เช่นเดียวกับที่บล็อก try...finally ตรวจไม่พบ

ปัญหา Chromium: 1489312, 1291064

`x_google_ignoreList` เปลี่ยนชื่อเป็น `ignoreList` ในการแมปแหล่งที่มา

ข้อกำหนดของแผนที่แหล่งที่มาได้ใช้ช่อง ignoreList แทน x_google_ignoreList และเครื่องมือสำหรับนักพัฒนาเว็บรองรับชื่อใหม่พร้อมชื่อสำรองสำหรับชื่อเก่า ตอนนี้เฟรมเวิร์กและ Bundler ใช้ชื่อฟิลด์ใหม่ได้แล้ว

การแมปแหล่งที่มาช่วยให้คุณแก้ไขข้อบกพร่องของโค้ดที่คุณเขียนแทนโค้ดที่ลดขนาดซึ่งแสดงโดยเว็บไซต์

ดูข้อมูลเพิ่มเติมเกี่ยวกับแผนที่แหล่งที่มาได้ที่

สลับโหมดป้อนข้อมูลใหม่ระหว่างการแก้ไขข้อบกพร่องจากระยะไกล

ตอนนี้คุณสามารถสลับระหว่างการป้อนข้อมูลด้วยการสัมผัสและเมาส์เมื่อแก้ไขข้อบกพร่องของแท็บ Chrome จากระยะไกลได้แล้ว ตัวอย่างเช่น เมื่อคุณเรียกใช้อินสแตนซ์ Chrome ด้วย --remote-debugging-port=<port> และเชื่อมต่อกับเป้าหมายเครือข่ายนี้ผ่าน chrome://inspect/#devices

ดูวิดีโอเพื่อดูการสลับโหมดป้อนข้อมูล

ปัญหา Chromium: 1410433

ตอนนี้แผงองค์ประกอบแสดง URL สำหรับโหนด `#document` รายการ

ตอนนี้แผงองค์ประกอบจะแสดง documentURL ถัดจากโหนด #document รายการเพื่อช่วยให้คุณแก้ไขข้อบกพร่องของ iframe ได้ง่ายขึ้น

ก่อนและหลังจะแสดง documentURL ถัดจากโหนด #document

ปัญหาของ Chromium: 1376976

นโยบายรักษาความปลอดภัยเนื้อหาที่มีผลในแผงการสมัคร

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

ส่วนนโยบายรักษาความปลอดภัยเนื้อหาในแท็บแอปพลิเคชัน

ปัญหา Chromium: 1424714

การแก้ไขข้อบกพร่องของภาพเคลื่อนไหวที่ได้รับการปรับปรุง

คุณทำสิ่งต่อไปนี้ได้ในแท็บภาพเคลื่อนไหว

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

ปัญหา Chromium: 1492460, 1489721

กล่องโต้ตอบ "คุณเชื่อถือโค้ดนี้ไหม" ในคำเตือนแหล่งที่มาและ XSS ด้วยตนเองในคอนโซล

แสดงคำเตือนเกี่ยวกับ Self-XSS เมื่อวางโค้ด การทดสอบเปิดใช้อยู่โดยค่าเริ่มต้น Self-XSS (self-cross-site Scripting) เป็นการโจมตีที่หลอกล่อให้คุณวางโค้ดที่เป็นอันตรายลงในเครื่องมือสำหรับนักพัฒนาเว็บและช่วยให้ผู้โจมตีควบคุมบัญชีเว็บและข้อมูลส่วนบุคคลของคุณได้

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

กล่องโต้ตอบ "คุณเชื่อถือโค้ดนี้หรือไม่" เมื่อวางโค้ดในซอร์ส

ปัญหา Chromium: 345205

เบรกพอยท์ของ Listener เหตุการณ์ใน Web Worker และ Worklet

เมื่อคุณตั้งค่าเบรกพอยท์เหตุการณ์ในแหล่งที่มา > เบรกพอยท์ของ Listener เหตุการณ์ นอกเหนือจากการหยุดเหตุการณ์นี้ในเว็บไซต์ไว้ชั่วคราวแล้ว โปรแกรมแก้ไขข้อบกพร่องยังหยุดชั่วคราวด้วยเมื่อเหตุการณ์ที่เกี่ยวข้องเกิดขึ้นในWeb Worker หรือเวิร์กเล็ตประเภทใดก็ตาม ซึ่งรวมถึงWorklet พื้นที่เก็บข้อมูลที่ใช้ร่วมกัน

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

ปัญหา Chromium: 1445175

ป้ายสื่อใหม่สำหรับ `<audio>` และ `<video>`

ตอนนี้คุณเปิดใช้ป้ายสื่อใหม่สำหรับองค์ประกอบ <audio> และ <video> ในแผงองค์ประกอบได้แล้ว เมื่อคลิกป้าย ระบบจะนำคุณไปยังแผงสื่อเพื่อให้แก้ไขข้อบกพร่องขององค์ประกอบเหล่านี้ได้

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

ปัญหา Chromium: 1448214

การโหลดล่วงหน้าเปลี่ยนชื่อเป็นการโหลดแบบคาดเดาแล้ว

เราได้เปลี่ยนชื่อแอปพลิเคชัน > การโหลดล่วงหน้าเป็นการโหลดแบบคาดเดาเพื่อหลีกเลี่ยงการใช้คำก่อนหน้านี้มากเกินไปและเพื่อให้สะท้อนลักษณะการทำงานได้ดียิ่งขึ้น การโหลดแบบคาดเดาช่วยให้โหลดหน้าเว็บได้เกือบจะทันทีตามกฎการคาดเดาที่คุณกำหนดเพื่อให้เว็บไซต์แสดงผลล่วงหน้าและดึงหน้าเว็บที่ไปยังส่วนต่างๆ ส่วนใหญ่ล่วงหน้าได้

ก่อนและหลังการเปลี่ยนชื่อ การโหลดล่วงหน้าจะเป็นการโหลดแบบคาดเดา

ปัญหา Chromium: 1478888

Lighthouse 11.2.0

ตอนนี้แผง Lighthouse จะเรียกใช้ Lighthouse 11.2.0 ดูรายการการเปลี่ยนแปลงทั้งหมด

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

ทั้งก่อนและหลังการปรับปรุงประสิทธิภาพ

โปรดดูข้อมูลพื้นฐานเกี่ยวกับการใช้งานแผง Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บที่หัวข้อ Lighthouse: เพิ่มความเร็วเว็บไซต์

ปัญหา Chromium: 772558

ปรับปรุงการช่วยเหลือพิเศษ

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

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

ปัญหาเกี่ยวกับ Chromium: 1488645, 1484918

ไฮไลต์เบ็ดเตล็ด

การแก้ไขและการปรับปรุงที่สำคัญในรุ่นนี้

ประสิทธิภาพ: แก้ไขสัญญาณบอกสถานะ LCP ที่บางครั้งหายไปในการบันทึก (1487136)
การโหลดแบบคาดเดา: แก้ไข URL แบบเต็มของเป้าหมายในเมนูแบบเลื่อนลงในแผงเครือข่าย (1471020)
ความครอบคลุม:
- การครอบคลุมแบบบรรทัดต่อบรรทัดสำหรับโค้ดที่พิมพ์ตามปกติ (1464974)
- ข้อมูลการครอบคลุมจะได้รับการอัปเดตแล้วเมื่อโหลดหน้าเว็บซ้ำ (1494457)
คอนโซล:
- แก้ไขการเลือกข้อความบางส่วนในข้อความ (1487449)
- แก้ไขการกะพริบของเมนูแบบเลื่อนลงของการเติมข้อความอัตโนมัติ (1487453)
- วงเล็บที่รองรับในสแต็กเส้นทางและ URL ในสแต็กเทรซ (1473926)
แหล่งที่มา: รองรับการไฮไลต์ไวยากรณ์ของคีย์เวิร์ด TypeScript using (1490515)
ขณะนี้เมนูการเปิดด่วนแสดงวิธีส่วนตัวแล้ว (1492957)
แอปพลิเคชัน > บริการในเบื้องหลัง: ตอนนี้แถบการทำงานด้านบนจะตัดข้อความขึ้นบรรทัดใหม่เมื่อปรับขนาด (1487276)
องค์ประกอบ > รูปแบบ:
- แก้ไขความละเอียดของตัวแปร CSS ที่รับช่วงมาสำหรับองค์ประกอบที่ช่องโฆษณา (1492162)
- เมื่อปิดใช้พร็อพเพอร์ตี้ CSS ระบบจะตัดความคิดเห็นของพร็อพเพอร์ตี้ดังกล่าวออกเพื่อแก้ไขการแบ่งไวยากรณ์ (1101224)
เครือข่าย: ขณะนี้คอลัมน์ลำดับความสำคัญจะแสดงเคล็ดลับเครื่องมือที่มีข้อมูลลำดับความสำคัญเริ่มต้น (ระดับเดียวกันนี้จะปรากฏเมื่อเลือกแถวคําขอขนาดใหญ่) (1495735)
การเลิกใช้งาน
- การตั้งค่ารูปแบบสีถูกปิดใช้ในเวอร์ชันก่อนหน้าและตอนนี้ถูกนำออก
- ตอนนี้ตัวเลือกลบการลบล้างทั้งหมดในแหล่งที่มาจะถูกนำออกเนื่องจากมีการใช้งานน้อยหลังจากมีประสิทธิภาพในการลบล้างการลบล้าง (1473681)

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

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

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

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

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