มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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) ได้ที่หัวข้อต่อไปนี้

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

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

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

รูปแบบการยกเว้นเริ่มต้นสําหรับ 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 รองรับชื่อใหม่นี้พร้อมด้วยชื่อเดิมสำรอง ตอนนี้เฟรมเวิร์กและเครื่องมือรวมสามารถใช้ชื่อช่องใหม่ได้แล้ว

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

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

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

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

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

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

ปัญหา Chromium: 345205

เบรกพอยต์ของ Listener เหตุการณ์ในเวิร์กเกอร์เว็บและเวิร์กเลต

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

ปัญหา Chromium: 1445175

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

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

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

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

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

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

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

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

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

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