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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

ปัญหา Chromium: 1442536

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

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

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

ปัญหา Chromium: 1204932

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

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

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

ทีม DevTools ขอแสดงความขอบคุณต่อ Give丝 และ 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 ให้ตั้งค่าการทดสอบการลดการติดตามการเข้าออก เป็น Enabled With Deletion
  3. ตรวจสอบหน้าสาธิตนี้ เปิดแอปพลิเคชัน > บริการที่ทำงานอยู่เบื้องหลัง > การลดการติดตามการเข้าออก คลิกลิงก์ตีกลับในหน้าเว็บ รอ (10 วินาที) เพื่อให้ Chrome บันทึกการตีกลับ แล้วคลิกบังคับเรียกใช้เพื่อลบสถานะดังกล่าวทันที

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

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

ปัญหาของ Chromium: 1432303

Lighthouse 10.2.0

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

ตารางเฟส LCP

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

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

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

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

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

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

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

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

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

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

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

เปิดใช้งาน Pret-print ในหน้าต่างการตอบสนองของแท็บเครือข่าย

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

การไฮไลต์ไวยากรณ์ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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