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

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

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

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

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

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

ปัญหา Chromium: 1442536

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

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

ปัญหา Chromium: 1204932

ค่าของคุณสมบัติ CSS ที่กำหนดเองในเคล็ดลับเครื่องมือ

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

ทีม DevTools ขอแสดงความขอบคุณต่อ Give丝 และ Suyan ที่ก้าวข้ามการปรับปรุงนี้

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

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

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

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

• การไฮไลต์ไวยากรณ์
• การสนับสนุนสำหรับเครื่องมือแก้ไขในบรรทัด เครื่องมือแก้ไขเหล่านี้คล้ายกับในองค์ประกอบ > รูปแบบ เช่น ตัวเลือกสีและเครื่องมือแก้ไขการค่อยๆ เปลี่ยน

ปัญหาเกี่ยวกับ Chromium: 1302261, 1392085

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

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

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

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

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

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

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

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

ปัญหาของ Chromium: 1432303

Lighthouse 10.2.0

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

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

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

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

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

สิ่งที่จะเกิดขึ้นเมื่อเปิดใช้การตั้งค่านี้มีดังนี้

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

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

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

เครือข่าย > คำตอบมีการพิมพ์อยู่แล้วโดยค่าเริ่มต้น

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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