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

Sofia Emelianova
Sofia Emelianova
GitHub

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

ป้ายกริดย่อย CSS ใหม่

แผงองค์ประกอบจะได้รับป้ายsubgridใหม่สำหรับ subgrid ปัจจุบันฟีเจอร์นี้อยู่ในขั้นทดลองใน Chrome Canary

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

ป้ายย่อยและภาพซ้อนทับในวิวพอร์ต

ดูรายการป้ายทั้งหมดในแผงองค์ประกอบได้ที่ข้อมูลอ้างอิงเกี่ยวกับป้าย

ปัญหาใน Chromium: 1442536

ความเฉพาะเจาะจงของตัวเลือกในเคล็ดลับเครื่องมือ

ในองค์ประกอบ > รูปแบบ ให้วางเมาส์เหนือชื่อตัวเลือกเพื่อดูน้ำหนักความเฉพาะเจาะจงในเคล็ดลับเครื่องมือ

เคล็ดลับเครื่องมือที่มีน้ำหนักความเฉพาะเจาะจงของตัวเลือก

ปัญหาใน Chromium: 1204932

ค่าของพร็อพเพอร์ตี้ CSS ที่กำหนดเองในเคล็ดลับเครื่องมือ

ในองค์ประกอบ > รูปแบบ ให้วางเมาส์เหนือชื่อพร็อพเพอร์ตี้ CSS ที่กำหนดเองเพื่อดูค่าในเคล็ดลับเครื่องมือ

เคล็ดลับเครื่องมือที่มีค่าของพร็อพเพอร์ตี้ CSS ที่กำหนดเอง

ทีม DevTools ขอขอบคุณ一丝 และ Suyan ที่ช่วยปรับปรุงในครั้งนี้

ปัญหาใน Chromium: 1380779

การปรับปรุงแหล่งข้อมูล

การไฮไลต์ไวยากรณ์ CSS

แผงแหล่งที่มาจะได้รับข้อมูลต่อไปนี้สำหรับไฟล์ CSS ที่ประมวลผลล่วงหน้า เช่น SASS, SCSS และ LESS

ปรับปรุงการไฮไลต์ไวยากรณ์ CSS และการรองรับตัวแก้ไขในบรรทัดในแหล่งที่มา

ปัญหาใน Chromium: 1302261, 1392085

แป้นพิมพ์ลัดเพื่อตั้งค่าเบรกพอยท์แบบมีเงื่อนไข

ตอนนี้คุณตั้งค่าจุดพักตามเงื่อนไขได้เร็วขึ้นด้วยทางลัด หากต้องการเปิดกล่องโต้ตอบเบรกพอยต์ ให้กด Command (MacOS) หรือ Control (Windows / Linux) ค้างไว้ แล้วคลิกหมายเลขบรรทัดในคอลัมน์ด้านซ้ายของแหล่งที่มา > เอดิเตอร์

หมายเลขบรรทัดในคอลัมน์ด้านซ้ายและกล่องโต้ตอบจุดพัก

ปัญหาใน Chromium: 1405767

แอปพลิเคชัน > การลดการติดตามการเข้าออก

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

ลองดูฟีเจอร์ความปลอดภัยนี้

  1. บล็อกคุกกี้ของบุคคลที่สามใน Chrome ไปที่ เมนู 3 จุด > การตั้งค่า > ความปลอดภัย ความเป็นส่วนตัวและความปลอดภัย > คุกกี้และข้อมูลเว็บไซต์อื่นๆ > เลือกปุ่มตัวเลือก บล็อกคุกกี้ของบุคคลที่สาม แล้วเปิดใช้
  2. ใน chrome://flags ให้ตั้งค่าการทดสอบการลดการติดตามการเข้าออกเป็นเปิดใช้พร้อมการลบ
  3. ตรวจสอบหน้าเดโมนี้ เปิดแอปพลิเคชัน > บริการในเบื้องหลัง > การลดการติดตามการตีกลับ คลิกลิงก์การตีกลับในหน้าเว็บ รอ (10 วินาที) ให้ Chrome บันทึกการตีกลับ แล้วคลิกบังคับเรียกใช้เพื่อลบสถานะทันที

การลดการติดตามการเข้าออกจะแสดงการลบสถานะ

นอกจากนี้ แท็บปัญหาจะเตือนคุณเกี่ยวกับการลบสถานะที่กำลังจะมีขึ้น

ปัญหาใน Chromium: 1432303

Lighthouse 10.2.0

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 10.2.0 สิ่งที่เห็นได้ชัดที่สุดคือการตรวจสอบ Largest Contentful Paint จะแสดงตารางที่มีการคำนวณระยะต่างๆ สำหรับการจำลองและการควบคุมอัตราใน DevTools ดูรายการการเปลี่ยนแปลงทั้งหมดด้วย

ตารางระยะ LCP

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

ปัญหาใน Chromium: 772558

ละเว้นสคริปต์เนื้อหาโดยค่าเริ่มต้น

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

เมื่อเปิดใช้การตั้งค่านี้

  • Debuggerจะละเว้นสคริปต์ดังกล่าวและจะไม่หยุดเมื่อพบข้อยกเว้นของสคริปต์
  • แผงแหล่งที่มา > Call Stack จะข้ามเฟรมที่ถูกละเว้น หากต้องการปิดการข้ามที่นี่ ให้เลือกช่องทำเครื่องหมาย แสดงเฟรมที่อยู่ในรายการละเว้น
  • คอนโซล ยุบเฟรมที่ละเว้นใน Stack Trace คลิกแสดงอีก N เฟรมเพื่อขยาย และแสดงน้อยลงเพื่อยุบอีกครั้ง

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

นอกจากนี้ ช่องทําเครื่องหมายในรายการที่ละเว้นยังมีข้อความที่ชัดเจนขึ้นด้วย

ปัญหาเกี่ยวกับ Chromium: 1440958, 1364501

เครือข่าย > การจัดรูปแบบการตอบกลับโดยค่าเริ่มต้น

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

เปิดใช้การจัดรูปแบบโค้ดในหน้าต่างการตอบกลับของแท็บเครือข่าย

นอกจากนี้ ไฟล์ SVG ยังได้รับการไฮไลต์ไวยากรณ์ด้วย

การไฮไลต์ไวยากรณ์ SVG

ปัญหาเกี่ยวกับ Chromium: 1382752, 1385374

ไฮไลต์อื่นๆ

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

  • การตั้งค่า การตั้งค่า > อุปกรณ์: เพิ่ม Facebook สำหรับ Android v407 ใน Pixel 6 ลงในรายการสตริงตัวแทน
  • เครือข่าย: เพิ่มทางลัดล้างบันทึกเครือข่าย (1444991):
    • MacOS: Command + K
    • Windows/Linux: Control + L
  • นำตัวเลือกเมนูแบบเลื่อนลงเครื่องบันทึก > การบันทึก N > แผงข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพออก (1414773)
  • ตอนนี้ระบบจะซ่อนสไตล์ชีตที่โหลดไม่สำเร็จจากแผนผังการนำทาง (1386059)
  • ประสิทธิภาพ: แก้ไขการแสดงแท็บการโต้ตอบที่ขยายได้ไม่ถูกต้อง (1432510)
  • องค์ประกอบ: ตอนนี้สไตล์ชีตที่โหลดไม่สำเร็จจะมีเส้นหยักขีดเส้นใต้ (1440626)
  • Debuggerจะไม่เข้าสู่ WebAssembly โดยอัตโนมัติเมื่อไม่มีปลั๊กอินสำหรับภาษาที่เกี่ยวข้อง (1443342)
  • เราได้คืนค่าแป้นพิมพ์ลัดที่เลื่อนเคอร์เซอร์ทีละคำสำหรับไฟล์ CSS ในแหล่งที่มา > เอดิเตอร์ (1241848) ดังนี้
    • MacOS: Alt + ลูกศร
    • Windows/Linux: Ctrl + ลูกศร

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

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

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

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

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

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