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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ข้อกำหนดแผนที่ซอร์สโค้ดได้นำช่อง ignoreList มาใช้แทน x_google_ignoreList และตอนนี้ DevTools รองรับชื่อใหม่นี้พร้อมด้วยชื่อเดิมสำรอง เฟรมเวิร์กและ 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 (Cross-Site Scripting ที่เกิดขึ้นกับตนเอง) คือการโจมตีที่หลอกลวงให้คุณวางโค้ดที่เป็นอันตรายลงในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ และช่วยให้ผู้โจมตีควบคุมบัญชีเว็บและข้อมูลส่วนบุคคลของคุณได้

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

กล่องโต้ตอบ &quot;คุณเชื่อถือโค้ดนี้ไหม&quot; เมื่อวางโค้ดในแหล่งที่มา

ปัญหา Chromium: 345205

เบรกพอยท์ของ Listener เหตุการณ์ในผู้ปฏิบัติงานเว็บและ Worklet

เมื่อคุณตั้งจุดหยุดพักของเหตุการณ์ในแหล่งที่มา > จุดหยุดพักของ Listener เหตุการณ์ นอกเหนือจากการหยุดชั่วคราวที่เหตุการณ์นี้ในเว็บไซต์แล้ว ตอนนี้โปรแกรมแก้ไขข้อบกพร่องจะหยุดชั่วคราวเมื่อเหตุการณ์ที่เกี่ยวข้องเกิดขึ้นใน Web Worker หรือ 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 หรือ เบต้า เป็นเบราว์เซอร์สำหรับนักพัฒนาซอฟต์แวร์เริ่มต้น ช่องทางเวอร์ชันตัวอย่างเหล่านี้จะช่วยให้คุณเข้าถึงฟีเจอร์ล่าสุดของ DevTools, ทดสอบ API ของแพลตฟอร์มเว็บที่ล้ำสมัย และช่วยคุณค้นหาปัญหาในเว็บไซต์ได้ก่อนที่ผู้ใช้จะพบ

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools