มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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

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

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

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

โปรดดูรายละเอียดเพิ่มเติมที่ 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 เพื่อทริกเกอร์การดำเนินการที่เกี่ยวข้อง
  • ในคอนโซล ลิงก์ที่นำไปสู่สคริปต์ที่ไม่มีอยู่ในโปรแกรมแก้ไขข้อบกพร่องจะเป็นสีเทาและคลิกไม่ได้ เพื่อลดความสับสน
  • ในแผนผังการนําทาง เช่น โครงสร้างในแหล่งที่มา > หน้า ตอนนี้คีย์ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59