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

การปรับปรุงแผงเครือข่าย

ลบล้างเนื้อหาเว็บในเครื่องได้เร็วยิ่งขึ้น

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

หากต้องการลบล้างเนื้อหาเว็บ ให้เปิดแผงเครือข่าย คลิกขวาที่คำขอ แล้วเลือกลบล้างเนื้อหา

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

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

โปรดทราบว่าทรัพยากรที่ถูกลบล้างจะระบุด้วย ในแผงเครือข่าย วางเมาส์เหนือไอคอนเพื่อดูว่ามีการลบล้างอะไรบ้าง

ปัญหาเกี่ยวกับ Chromium: 1465785, 1470532, 1469359

ลบล้างเนื้อหาของคำขอ XHR และคำขอเรียกข้อมูล

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

ขณะนี้ DevTools รองรับการลบล้างเนื้อหาสำหรับคำขอประเภทต่อไปนี้ ได้แก่ รูปภาพ (เช่น avif, png), แบบอักษร, การดึงข้อมูลและ XHR, สคริปต์ (css และ js) และเอกสาร (html) ตอนนี้ DevTools จะทำให้ตัวเลือกลบล้างเนื้อหาเป็นสีเทาสำหรับประเภทที่ไม่รองรับ

ปัญหาใน Chromium: 792101, 1469776

ซ่อนคำขอส่วนขยาย Chrome

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

หากต้องการกรองคำขอทั้งหมดที่ส่งไปยัง URL chrome-extension:// ให้ออก ให้เลือก ซ่อน URL ส่วนขยาย

ปัญหาเกี่ยวกับ Chromium: 1257885, 1458803

รหัสสถานะ HTTP ที่มนุษย์อ่านได้

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

นอกจากนี้ คุณยังวางเมาส์เหนือรหัสสถานะในตารางคำขอเพื่อดูข้อความเดียวกันได้ด้วย

ปัญหาใน Chromium: 1153956

การตอบกลับแบบ Pretty-print สำหรับประเภทย่อยของ JSON

ตอนนี้แท็บการตอบกลับของคำขอที่มีapplication/[subtype]+json ประเภทย่อย MIME (เช่น ld+json, hal+json และอื่นๆ) จะแยกวิเคราะห์การตอบกลับอย่างถูกต้องและช่วยให้คุณจัดรูปแบบการตอบกลับให้สวยงามได้

ปัญหาใน Chromium: 406900

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

ตอนนี้แผงประสิทธิภาพจะแสดงฟิลด์ลำดับความสำคัญ 2 รายการในสรุปของเหตุการณ์ในแทร็กเครือข่าย ได้แก่ ลำดับความสำคัญเริ่มต้นและลำดับความสำคัญ (สุดท้าย) แทนที่จะแสดงเพียงลำดับความสำคัญรายการเดียว ฟิลด์เพิ่มเติมนี้ช่วยให้คุณเห็นว่าลำดับความสำคัญในการดึงข้อมูลของเหตุการณ์มีการเปลี่ยนแปลงหรือไม่ และปรับลำดับการดาวน์โหลดได้ ดูข้อมูลเพิ่มเติมได้ที่การเพิ่มประสิทธิภาพการโหลดทรัพยากรด้วย Fetch Priority API

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

ปัญหาเกี่ยวกับ Chromium: 1463901, 1380964

การตั้งค่าแหล่งที่มาที่เปิดใช้โดยค่าเริ่มต้น: การพับโค้ดและการแสดงไฟล์อัตโนมัติ

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

หากต้องการพับโค้ดบล็อก ให้วางเมาส์เหนือหมายเลขบรรทัดข้างจุดเริ่มต้นของบล็อก แล้วคลิกไอคอนยุบ คลิก {...} เพื่อขยายบล็อกอีกครั้ง

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

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

ปัญหาใน Chromium: 1459193, 1336599

ปรับปรุงการแก้ไขข้อบกพร่องของปัญหาคุกกี้ของบุคคลที่สาม

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

คุณทดสอบลักษณะการทำงานของ Chrome หลังจากการยกเลิกการใช้งานคุกกี้ของบุคคลที่สามได้แล้ว โดยเรียกใช้ Chrome จากบรรทัดคำสั่งด้วยแฟล็ก --test-third-party-cookies-phaseout ดูว่า Flag นี้ทำอะไรได้บ้างได้ที่การแก้ไขข้อบกพร่องของคุกกี้

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

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

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

หากต้องการทดสอบ ให้ตรวจสอบคุกกี้ที่หน้าสาธิตนี้

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

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

แก้ไขข้อบกพร่องการโหลดล่วงหน้าในแผงแอปพลิเคชัน

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

ในหน้าการสาธิตการแสดงผลล่วงหน้านี้ ในส่วนแอปพลิเคชัน > การโหลดล่วงหน้า คุณจะตรวจสอบสิ่งต่อไปนี้ได้

• กฎการคาดเดาที่แสดงชุดกฎทั้งหมดที่พบในหน้าปัจจุบัน
• การโหลดล่วงหน้าที่แสดง URL ทั้งหมดที่ดึงข้อมูลล่วงหน้าและแสดงผลล่วงหน้าจากชุดกฎ
• หน้านี้แสดงสถานะการแสดงผลล่วงหน้าของหน้าปัจจุบัน

ดูข้อมูลเพิ่มเติมได้ที่โพสต์เฉพาะเกี่ยวกับการแก้ไขข้อบกพร่องของกฎการคาดคะเน

ปัญหาใน Chromium: 1410709

สีใหม่

คุณอาจสังเกตเห็นแล้วว่าตอนนี้ DevTools มีรูปลักษณ์ใหม่ที่สอดคล้องกับ Chrome มากขึ้น ปัจจัยหนึ่งที่ทำให้เกิดการเปลี่ยนแปลงนี้คือรูปแบบสีใหม่

เวอร์ชันนี้ (117) มีการปรับปรุง UX ของ DevTools เพิ่มเติม ทั้งที่กล่าวถึงไปแล้วและที่ระบุไว้ด้านล่าง รวมถึงข้อความ UI ที่ปรับปรุงแล้วหลายรายการ

ปัญหาใน Chromium: 1456677

Lighthouse 10.4.0

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 10.4.0 ที่สำคัญที่สุดคือเวอร์ชันนี้ได้เพิ่มการตรวจสอบการช่วยเหลือพิเศษใหม่สำหรับรายการต่อไปนี้

• aria-dialog-name
• aria-text
• link-in-text-block
• select-name

เช่น

ดูรายการการเปลี่ยนแปลงทั้งหมดด้วย ดูข้อมูลพื้นฐานเกี่ยวกับการใช้แผง Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บได้ที่ Lighthouse: เพิ่มประสิทธิภาพความเร็วของเว็บไซต์

ปัญหาใน Chromium: 772558

ตอนนี้ส่วนขยายการแก้ไขข้อบกพร่อง WebAssembly ของ C/C++ สำหรับเครื่องมือสำหรับนักพัฒนาเว็บเป็นโอเพนซอร์สแล้ว

ตอนนี้ส่วนขยายการแก้ไขข้อบกพร่อง WebAssembly ของ C/C++ สำหรับเครื่องมือสำหรับนักพัฒนาเว็บเป็นโอเพนซอร์สและอยู่ในที่เก็บส่วนหน้าของเครื่องมือสำหรับนักพัฒนาเว็บ ส่วนขยายนี้เปิดใช้ความสามารถในการแก้ไขข้อบกพร่องในเครื่องมือสำหรับนักพัฒนาเว็บสำหรับโปรแกรม C++ ที่คอมไพล์เป็น WebAssembly ดูข้อมูลเพิ่มเติมได้ที่แก้ไขข้อบกพร่องของ WebAssembly ใน C/C++

ดูวิธีสร้าง เรียกใช้ และทดสอบส่วนขยาย และร่วมสนับสนุนได้เลย

ปัญหาใน Chromium: 1410709

ไฮไลต์อื่นๆ

การแก้ไขและการปรับปรุงที่น่าสนใจในรุ่นนี้มีดังนี้

• การซ้อน CSS: ตอนนี้แผงองค์ประกอบจะแสดงเชนตัวเลือกทั้งหมดสำหรับองค์ประกอบย่อยที่ซ้อนกัน (1172985)
• แอปพลิเคชัน > Manifest มีส่วนการซ้อนทับการควบคุมหน้าต่างที่ตรวจสอบว่ามีค่า display_override ใน Manifest หรือไม่ และแสดงลิงก์ไปยังเอกสารประกอบที่เกี่ยวข้อง
• ตอนนี้ต้นไม้แหล่งที่มา > หน้าเว็บจะทำสิ่งต่อไปนี้ ซึ่งรวมถึงแต่ไม่จำกัดเพียง (1442863)
  • ทำให้โฟลเดอร์เป็นสีเทาหากเนื้อหาทั้งหมดอยู่ในรายการละเว้น
  • ทำเครื่องหมายโฟลเดอร์สีส้มหากเนื้อหาทั้งหมดมาจากแผนที่แหล่งข้อมูล
• ประสิทธิภาพ: ตอนนี้การตั้งค่าการจับภาพจะซ่อนโดยอัตโนมัติเมื่อคุณเริ่มการบันทึก (1455498)
• แหล่งข้อมูล > เอดิเตอร์ได้คืนค่าลักษณะการทำงานของ Ctrl + ลูกศร (Win) และ Opt + ลูกศร (MacOs) (1468208)
• ตอนนี้ตัวเลือกเปิด/ปิดภาพเคลื่อนไหว > หยุดทั้งหมดชั่วคราวจะคงสถานะไว้เมื่อโหลดหน้าเว็บ (1446046)
• แอปพลิเคชัน > พื้นที่เก็บข้อมูล > ที่เก็บแคช ย้ายไปที่แอปพลิเคชัน > พื้นที่เก็บข้อมูล > ส่วนแคช (1462622)
• เราได้ปรับปรุงข้อความ UI และเคล็ดลับเครื่องมือบางส่วน ได้แก่ เคล็ดลับเครื่องมือการทำงานพร้อมกันของฮาร์ดแวร์ ข้อความตัวกรองเครือข่ายและตัวเลือกเมนูหลัก การใช้อักษรตัวพิมพ์ใหญ่ในมุมมองแผนผังของแอปพลิเคชัน ข้อความเครือข่าย > ส่วนหัว ข้อความแหล่งที่มา > การลบล้างและระบบไฟล์

ฟีเจอร์ทดลองใหม่

การจำลองการแสดงผลใหม่: prefers-reduced-transparency

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

หากต้องการทดสอบฟีเจอร์นี้ใน Chrome ให้เปิดใช้ฟีเจอร์แพลตฟอร์มเว็บเวอร์ชันทดลองใน chrome://flags

ปัญหาใน Chromium: 1424879

เครื่องมือตรวจสอบโปรโตคอลที่ได้รับการปรับปรุง

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

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

ที่มุมขวาล่างของแท็บลิ้นชักเครื่องมือตรวจสอบโปรโตคอล ให้คลิก แสดงเอดิเตอร์คำสั่ง CDP เลือกเป้าหมาย เริ่มพิมพ์คำสั่ง เลือกคำสั่งที่แนะนำ (หากจำเป็น) ระบุค่าพารามิเตอร์ แล้วคลิก ส่งคำสั่ง (Ctrl/Cmd + Enter)

ปัญหาใน Chromium: 1469345

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

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

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

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

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

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

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