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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1486431

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1501781

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

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

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

ปัญหาของ Chromium: 1499265

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

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

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

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

ปัญหา Chromium: 1444349

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1495751

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1496355

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

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

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

ปัญหาของ Chromium: 1479986

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

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

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

ปัญหา Chromium: 1469776

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

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

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

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

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

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

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

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

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

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

Lighthouse 11.3.0

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

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

ปัญหาเกี่ยวกับ Chromium: 772558

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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