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

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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

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

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

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

ปัจจุบัน DevTools รองรับการลบล้างเนื้อหาสำหรับประเภทคำขอต่อไปนี้: รูปภาพ (เช่น 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 จากบรรทัดคำสั่งที่มีแฟล็ก --test-third-party-cookies-phaseout โปรดดูการแก้ไขข้อบกพร่องของคุกกี้เพื่อดูการทำงานของแฟล็กนี้

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

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

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

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

ปัญหาคุกกี้ของบุคคลที่สามที่รายงานในแท็บปัญหา

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

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

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

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

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

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

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

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

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

สีใหม่

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

สีก่อนและหลังที่ใช้สีใหม่

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

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

Lighthouse 10.4.0

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

เช่น

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

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

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

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

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

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

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

ไฮไลต์เบ็ดเตล็ด

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

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

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

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

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

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

ปัญหา Chromium: 1424879

การตรวจสอบโปรโตคอลที่ปรับปรุงแล้ว

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

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

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

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

ปัญหา Chromium: 1469345

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

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

ติดต่อทีม Chrome DevTools

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

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