หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Sofia Emelianova

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

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

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

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

ตัวเลือกการลบล้างในเมนูแบบเลื่อนลงของคำขอ

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

เลือกโฟลเดอร์และอนุญาตให้เข้าถึงโฟลเดอร์นั้นในแถบการดำเนินการที่ด้านบน

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 792101, 1469776

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

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

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

URL ของส่วนขยายที่ซ่อนจากตารางคําขอ

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

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

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

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

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

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

ปัญหา Chromium: 1153956

แสดงผลลัพธ์เป็นรูปแบบที่อ่านง่ายสำหรับ JSON ย่อย

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

ตัวอย่างก่อนและหลังการแยกวิเคราะห์ประเภทย่อย application/json ในตัวอย่างการตอบกลับของเครือข่าย

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

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

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

ก่อนและหลังแสดงการเปลี่ยนแปลงลําดับความสําคัญในการดึงข้อมูล

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

คอลัมน์ลําดับความสําคัญในแผงเครือข่าย

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1459193, 1336599

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

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

คุณสามารถทดสอบลักษณะการทำงานของ Chrome หลังจากการเลิกใช้งานคุกกี้ของบุคคลที่สามได้แล้ว โดยให้เรียกใช้ Chrome จากบรรทัดคำสั่งพร้อม Flag --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 สิ่งที่โดดเด่นที่สุดคือเวอร์ชันนี้เพิ่มการตรวจสอบการช่วยเหลือพิเศษใหม่สำหรับสิ่งต่อไปนี้

เช่น

ตรวจสอบสีของลิงก์ที่ทําให้แยกความแตกต่างไม่ได้ไม่สําเร็จ

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

ปัญหา Chromium: 772558

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

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

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

ปัญหา Chromium: 1410709

ไฮไลต์อื่นๆ

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

การฝัง CSS: ตอนนี้แผงองค์ประกอบจะแสดงทั้งเชนตัวเลือกสำหรับองค์ประกอบย่อยที่ฝัง (1172985)
ตอนนี้ส่วนแอปพลิเคชัน > ไฟล์ Manifest มีส่วนการควบคุมหน้าต่างที่วางซ้อน ซึ่งจะตรวจสอบว่าไฟล์ Manifest มีค่า display_override หรือไม่ และมีลิงก์ไปยังเอกสารประกอบที่เกี่ยวข้อง
ตอนนี้แผนภูมิแหล่งที่มา > หน้าเว็บจะทําสิ่งต่อไปนี้ ซึ่งรวมถึงแต่ไม่จํากัดเพียง (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 DevTools Protocol (CDP) เพื่อวัดผล ตรวจสอบ แก้ไขข้อบกพร่อง และสร้างโปรไฟล์ของเบราว์เซอร์ Chrome หากคุณเป็นนักพัฒนาซอฟต์แวร์ Chromium หรือ DevTools เครื่องมือตรวจสอบโปรโตคอลจะช่วยให้คุณดูคำขอและคำตอบ CDP ทั้งหมดที่ DevTools สร้างขึ้น รวมถึงส่งคําสั่ง CDP ได้

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

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

การระบุและส่งคําสั่ง CDP

ปัญหา Chromium: 1469345

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

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

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

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

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