หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Sofia Emelianova

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

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

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

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

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

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

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

ปัญหา Chromium: 1486431

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

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

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

ในรูปแบบ ให้คลิกค่าของพร็อพเพอร์ตี้ 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 ในเครื่องมือสำหรับนักพัฒนาเว็บที่หัวข้อ 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)
เครือข่าย > แสดงตัวอย่าง ตอนนี้แสดงผลรูปภาพด้วย data: URI (1381791)
หน่วยความจำ เพิ่มอัปโหลดการโหลดและดาวน์โหลดปุ่มบันทึกที่เหมาะสมในแถบการทำงาน (1275407)

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

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

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

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

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