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

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

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

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

ปัญหาใน Chromium: 1466310

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

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

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

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

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

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

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

รายการละเว้นที่เพิ่มประสิทธิภาพ

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

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

ปัญหาใน Chromium: 1496301

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1489312, 1291064

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

ข้อกำหนดของ Source Map ได้นำฟิลด์ ignoreList มาใช้แทน x_google_ignoreList และตอนนี้ DevTools รองรับชื่อใหม่พร้อมการสำรองสำหรับชื่อเก่าแล้ว ตอนนี้เฟรมเวิร์กและตัวจัดกลุ่มสามารถใช้ชื่อฟิลด์ใหม่ได้แล้ว

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

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

• การแมปแหล่งที่มาคืออะไร
• แก้ไขข้อบกพร่องของโค้ดต้นฉบับแทนการแก้ไขข้อบกพร่องของโค้ดที่ติดตั้งใช้งานด้วยแผนที่แหล่งที่มา

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

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

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

ปัญหาใน Chromium: 1410433

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

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

ปัญหาใน Chromium: 1376976

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

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

ปัญหาใน Chromium: 1424714

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1492460, 1489721

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

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

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

ปัญหาใน Chromium: 345205

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

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

ปัญหาใน 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 ใน Stack Trace (1473926)
• แหล่งที่มา: รองรับการไฮไลต์ไวยากรณ์ของคีย์เวิร์ด using TypeScript (1490515)
• ตอนนี้เมนูเปิดด่วนจะแสดงเมธอดส่วนตัว (1492957)
• แอปพลิเคชัน > บริการในเบื้องหลัง: ตอนนี้แถบการดำเนินการด้านบนจะตัดข้อความเมื่อปรับขนาด (1487276)
• องค์ประกอบ > รูปแบบ
  • แก้ไขความละเอียดของตัวแปร CSS ที่รับค่ามาสำหรับองค์ประกอบที่เสียบ (1492162)
  • เมื่อปิดใช้พร็อพเพอร์ตี้ CSS ตอนนี้ระบบจะนำความคิดเห็นออกเพื่อแก้ไขการหยุดชะงักของไวยากรณ์ (1101224)
• เครือข่าย: ตอนนี้คอลัมน์ลำดับความสำคัญจะแสดงเคล็ดลับเครื่องมือที่มีข้อมูลเกี่ยวกับลำดับความสำคัญเริ่มต้น (จะแสดงเหมือนกันเมื่อเลือกแถวคำขอขนาดใหญ่) (1495735)
• การเลิกใช้งาน
  • เราได้ปิดใช้การตั้งค่ารูปแบบสีในเวอร์ชันก่อนหน้าและได้นำออกแล้ว
  • ตอนนี้เราได้นำตัวเลือก "ลบลบล้างทั้งหมด" ในแหล่งที่มาออกแล้วเนื่องจากมีการใช้งานน้อยหลังจากการเพิ่มประสิทธิภาพการลบล้าง (1473681)

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

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

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

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

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

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

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