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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

ไอคอนลบล้างข้างคำขอในแผงเครือข่าย

ปัญหาเกี่ยวกับ 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 โปรดดูการแก้ไขข้อบกพร่องเกี่ยวกับคุกกี้เพื่อดูการทำงานของแฟล็กนี้

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1410709

สีใหม่

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

รูปภาพก่อนและหลังการใช้สีใหม่

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

ไฮไลต์อื่นๆ

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

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

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

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

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

ปัญหา Chromium: 1424879

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

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

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

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

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

ปัญหา Chromium: 1469345

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

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

ติดต่อทีม Chrome DevTools

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

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

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