มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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. เปิดส่วนคุกกี้ แล้วคลิกวิเคราะห์แท็บนี้ หากเครื่องมือไม่พบคุกกี้ ให้ลองโหลดหน้านี้ซ้ำ

เครื่องมือวิเคราะห์ของ 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 และตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับชื่อใหม่พร้อมชื่อสำรองสำหรับชื่อเดิมแล้ว เฟรมเวิร์กและ 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 เมื่อได้รับข้อความแจ้ง เมื่ออนุญาตให้วางแล้ว คำเตือนจะไม่แสดงอีก

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

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

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

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

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

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