มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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 แล้วเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์จะนําคุณไปยังส่วน @font-palette-values โดยเฉพาะ ซึ่งคุณสามารถแก้ไขค่าที่กําหนดเองได้

ส่วน @font-palette-values ในสไตล์

ปัญหา Chromium: 1501781

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

ตอนนี้ส่วนองค์ประกอบ > สไตล์จะแก้ไขพร็อพเพอร์ตี้ที่กำหนดเองซึ่งเป็นพร็อพเพอร์ตี้ที่กำหนดเองสำรอง

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

ปัญหา Chromium: 1499265

การรองรับแผนที่ที่มาที่ปรับปรุงแล้ว

Settings > Experiments > Resolve variable names in expressions using source maps เปิดอยู่โดยค่าเริ่มต้น

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

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

ปัญหา Chromium: 1444349

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

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

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

ลักษณะก่อนและหลังการเพิ่มเส้นประไปยังแทร็กการโต้ตอบ

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

ปัญหา Chromium: 1495751

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

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

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

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

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

ปัญหา Chromium: 1496355

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

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

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

ปัญหา Chromium: 1479986

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

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

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

ปัญหา Chromium: 1469776

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

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

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

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

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

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

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

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

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

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

Lighthouse 11.3.0

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

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

ปัญหา Chromium: 772558

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

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

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

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

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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