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

Sofia Emelianova
Sofia Emelianova
GitHub

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

ป้ายตารางย่อย CSS ใหม่

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

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

ป้ายกริดย่อยและการวางซ้อนในวิวพอร์ต

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

ปัญหา Chromium: 1442536

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

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

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

ปัญหา Chromium: 1204932

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

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

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

ทีม DevTools ขอแสดงความขอบคุณ 一丝 and 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

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

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

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

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

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

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

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

เครือข่าย > การพิมพ์คำตอบอย่างสวยงามโดยค่าเริ่มต้น

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

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

นอกจากนี้ ไฟล์ SVG จะมีการไฮไลต์ไวยากรณ์ด้วย

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

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

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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