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

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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

หากต้องการหยุดการดำเนินการชั่วคราวสำหรับข้อยกเว้นที่ตรวจจับได้และ/หรือที่ตรวจไม่พบ (เมื่อเลือกไว้) ในการเรียกใช้แบบไม่พร้อมกัน โปรแกรมแก้ไขข้อบกพร่องจะมองหาตัวแฮนเดิลการปฏิเสธจากสัญญาต่างๆ เริ่มตั้งแต่เวอร์ชันนี้ โปรแกรมแก้ไขข้อบกพร่องจะไม่คาดการณ์อีกต่อไปว่า 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 เหตุการณ์ในผู้ปฏิบัติงานเว็บและ Worklet

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

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

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

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

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

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

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

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

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

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

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

Lighthouse 11.2.0

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

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

การยกเครื่องประสิทธิภาพก่อนและหลัง

ดูข้อมูลเบื้องต้นในการใช้แผง Lighthouse ใน DevTools ได้ที่ 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 DevTools

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

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