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

Sofia Emelianova
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

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

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

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

การจำลองการแสดงภาพใหม่: 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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