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

Sofia Emelianova
Sofia Emelianova
GitHub

แถบตัวกรองที่ปรับปรุงแล้วในแผงเครือข่าย

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

การทดสอบที่เกี่ยวข้องจะเปิดอยู่โดยค่าเริ่มต้นในเวอร์ชันนี้ แต่จะเปลี่ยนกลับ คุณติดตามความคืบหน้าได้ที่ crbug.com/1523150

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

หากต้องการนำแถบตัวกรองแบบเก่ากลับมาทันที ให้ปิด การตั้งค่า > ฟีเจอร์ทดลอง > ออกแบบแถบตัวกรองใหม่ในแผงเครือข่าย

ก่อนและหลังการเพิ่มประสิทธิภาพแถบตัวกรองในแผงเครือข่าย

โปรดแสดงความคิดเห็นเกี่ยวกับฟีเจอร์นี้ใน crbug.com/1500573

ปัญหาใน Chromium: 1486431

การปรับปรุงองค์ประกอบ

ทีมสนับสนุนของ @font-palette-values

ตอนนี้แผงองค์ประกอบรองรับกฎ@font-palette-values CSS แล้ว ซึ่งช่วยให้คุณปรับแต่งค่าเริ่มต้นของพร็อพเพอร์ตี้ font-palette ได้

ในรูปแบบ ให้คลิกค่าของพร็อพเพอร์ตี้ font-palette แล้ว DevTools จะนำคุณไปยังส่วนเฉพาะ @font-palette-values ซึ่งคุณสามารถแก้ไขค่าที่กำหนดเองได้

ส่วน @font-palette-values ใน Styles

ปัญหาใน Chromium: 1501781

กรณีที่รองรับ: พร็อพเพอร์ตี้ที่กําหนดเองเป็นข้อมูลสำรองของพร็อพเพอร์ตี้ที่กําหนดเองอื่น

ตอนนี้ Elements > Styles จะแก้ไขพร็อพเพอร์ตี้ที่กำหนดเองซึ่งเป็นพร็อพเพอร์ตี้สำรองของพร็อพเพอร์ตี้ที่กำหนดเองอื่น

ก่อนและหลังการแก้ไขพร็อพเพอร์ตี้ที่กำหนดเองเป็นพร็อพเพอร์ตี้สำรองของพร็อพเพอร์ตี้ที่กำหนดเองอีกรายการ

ปัญหาใน Chromium: 1499265

ปรับปรุงการรองรับการแมปแหล่งที่มา

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

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

ดูรายละเอียดเพิ่มเติมได้ที่ RFC ที่เกี่ยวข้อง

ปัญหาใน Chromium: 1444349

การปรับปรุงแผงประสิทธิภาพ

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

แทร็กประสิทธิภาพ > การโต้ตอบจะมีหนวดที่ระบุความล่าช้าในการป้อนข้อมูลและการนำเสนอที่ขอบเขตเวลาในการประมวลผล

ก่อนและหลังเพิ่มหนวดแมวลงในแทร็กการโต้ตอบ

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

ปัญหาใน Chromium: 1495751

การกรองขั้นสูงในแท็บ Bottom-Up, แผนผังการเรียกใช้ และบันทึกเหตุการณ์

แท็บจากล่างขึ้นบน แผนภูมิการเรียก และบันทึกเหตุการณ์ในแผงประสิทธิภาพมีปุ่มใหม่ 3 ปุ่มสำหรับการกรองขั้นสูง ดังนี้

  • ให้ตัวพิมพ์เล็ก/พิมพ์ใหญ่ตรงกัน
  • นิพจน์ทั่วไป
  • ตรงกันทั้งคำ

ปุ่มใหม่ 3 ปุ่มสำหรับการกรองขั้นสูง

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

ปัญหาใน Chromium: 1496355

เครื่องหมายเยื้องในแผงแหล่งที่มา

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

การทำเครื่องหมายก่อนและหลังโค้ดบล็อกที่เยื้องด้วยเส้นแนวตั้ง

ปัญหาใน Chromium: 1479986

เคล็ดลับเครื่องมือที่เป็นประโยชน์สำหรับส่วนหัวและเนื้อหาที่ลบล้างในแผงเครือข่าย

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

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

ปัญหาใน Chromium: 1469776

ตัวเลือกเมนูคำสั่งใหม่สำหรับการเพิ่มและนำรูปแบบการบล็อกคำขอออก

ตอนนี้คุณสามารถพิมพ์คำสั่งเพื่อเพิ่มหรือนำรูปแบบการบล็อกคำขอเครือข่ายไปยังเมนูคำสั่งได้แล้ว

ก่อนและหลังเพิ่มคำสั่งใหม่เพื่อเพิ่มหรือนำรูปแบบการบล็อกเครือข่ายออก

คำสั่ง Add จะนำคุณไปยังกล่องโต้ตอบเพื่อระบุรูปแบบ และคำสั่ง Remove จะนำรูปแบบทั้งหมดออกโดยไม่ต้องเปิดแผงการบล็อกคำขอเครือข่าย

ระบบจะนำการทดสอบการละเมิด CSP ออก

เราได้นำแท็บการละเมิด CSP เวอร์ชันทดลองที่เปิดตัวในเวอร์ชัน 89 ออกแล้วเนื่องจากซ้ำซ้อน

หากต้องการดูรายละเอียด CSP โดยย่อ ให้ไปที่แอปพลิเคชัน > เฟรม > นโยบายความปลอดภัยของเนื้อหา (CSP)

นโยบายรักษาความปลอดภัยเนื้อหาในแผงแอปพลิเคชัน

นอกจากนี้ แผงปัญหายังรายงานการละเมิด CSP ด้วย

นโยบายรักษาความปลอดภัยเนื้อหาในแผงแอปพลิเคชัน

Lighthouse 11.3.0

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 11.3.0 ดูรายการการเปลี่ยนแปลงทั้งหมด การเปลี่ยนแปลงที่สำคัญอย่างหนึ่งคือความสามารถในการเรียกใช้รายงานในหน้า 404

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

ปัญหาใน Chromium: 772558

การช่วยเหลือพิเศษ

เวอร์ชันนี้มีการปรับปรุงการช่วยเหลือพิเศษดังต่อไปนี้

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

ปัญหาเกี่ยวกับ Chromium: 1338391, 1500662, 1420362

ไฮไลต์อื่นๆ

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

  • ประสิทธิภาพ หากการบันทึกไม่สำเร็จ ตอนนี้คุณมีตัวเลือกในการดาวน์โหลดเหตุการณ์การติดตามดิบและพยายามหาสาเหตุของปัญหา (คอมมิต)
  • ตอนนี้แป้นพิมพ์ลัดแสดงคอนโซล (Ctrl+` สำหรับ Mac, Ctrl++ สำหรับ Windows และ Linux) ไม่เพียงเปิดคอนโซลเท่านั้น แต่ยังปิดเมื่อกดครั้งที่ 2 ด้วย
  • แหล่งข้อมูลสำหรับนักพัฒนาแอป แก้ไขข้อบกพร่องที่ทำให้รายงานทรัพยากร CSS และปัญหาของทรัพยากรเหล่านั้นไม่ได้ (1420362)
  • องค์ประกอบ:
    • แก้ไขข้อบกพร่องเกี่ยวกับการตรวจสอบองค์ประกอบใน iframe (1453375)
    • คำนวณแล้ว แก้ไขข้อบกพร่องที่ทำให้ค่าเริ่มต้นแสดงผลไม่ได้ (1499882)
    • ค้นหา แก้ไขข้อบกพร่องที่ทําให้คํานวณจํานวนรายการที่ตรงกันสําหรับคําค้นหาสั้นๆ ที่มีอักขระ 1 หรือ 2 ตัวไม่ได้ (1416457)
  • Console ตอนนี้จะแยกวิเคราะห์นิพจน์ทั่วไปที่ลงท้ายด้วยอักขระที่หลีกหนีในช่องตัวกรองได้อย่างถูกต้อง (1346936)
  • การตั้งค่า > Workspace แก้ไขข้อบกพร่องที่ทำให้เพิ่มโฟลเดอร์ที่ยกเว้นไม่ได้ (1503580)
  • เครือข่าย > แสดงตัวอย่าง ตอนนี้แสดงรูปภาพด้วย URI ของ data: (1381791)
  • หน่วยความจำ เพิ่มปุ่มโหลดและปุ่มบันทึกที่เหมาะสมลงในแถบการทำงาน (1275407)

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

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

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

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

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

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