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

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

Sofia Emelianova

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

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

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

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

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

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

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

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

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

ปัญหา 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 และอื่นๆ) จะแยกวิเคราะห์การตอบกลับได้อย่างถูกต้องและช่วยให้คุณสามารถจัดประเภทได้

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

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

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

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

ปัญหา Chromium: 1469345

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

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

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

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

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