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

Kayce Basques

ฟีเจอร์ใหม่สำหรับคุกกี้

แก้ไขข้อบกพร่องสาเหตุที่คุกกี้ถูกบล็อก

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

แท็บคุกกี้

แท็บคุกกี้

  • ไม่ได้ส่งคุกกี้คำขอสีเหลืองผ่านเครือข่าย ซึ่งจะซ่อนอยู่โดยค่าเริ่มต้น คลิกแสดงคุกกี้คำขอที่กรองออกเพื่อแสดง
  • ระบบส่ง Response Cookie สีเหลืองผ่านเครือข่าย แต่จะไม่มีการบันทึก
  • วางเมาส์เหนือข้อมูลเพิ่มเติม ข้อมูล เพื่อดูสาเหตุที่คุกกี้ถูกบล็อก
  • ข้อมูลส่วนใหญ่ในตารางคุกกี้คําขอและคุกกี้คําตอบมาจากส่วนหัว HTTP ของทรัพยากร ข้อมูลโดเมน เส้นทาง และวันหมดอายุ/Max-Age มาจากโปรโตคอลเครื่องมือสําหรับนักพัฒนาเว็บใน Chrome

ปัญหา Chromium #856777, #993843

ดูค่าคุกกี้

คลิกแถวในแผงคุกกี้เพื่อดูค่าของคุกกี้นั้น

การดูค่าของคุกกี้

การดูค่าของคุกกี้

ปัญหา Chromium #462370

จำลองค่ากำหนด prefers-color-scheme และ prefers-reduced-motion แบบต่างๆ

คิวรีสื่อ prefers-color-scheme ช่วยให้คุณปรับสไตล์ของเว็บไซต์ให้ตรงกับความต้องการของผู้ใช้ได้ ตัวอย่างเช่น หากข้อความค้นหาสื่อ prefers-color-scheme: dark เป็น "จริง" หมายความว่าผู้ใช้ได้ตั้งค่าระบบปฏิบัติการเป็นโหมดมืดและต้องการ UI โหมดมืด

เปิดเมนูคำสั่ง เรียกใช้คำสั่ง Show Rendering จากนั้นตั้งค่าเมนูแบบเลื่อนลงจำลองฟีเจอร์สื่อ CSS prefers-color-scheme เพื่อแก้ไขข้อบกพร่องของรูปแบบ prefers-color-scheme: dark และ prefers-color-scheme: light

prefers-color-scheme: dark

เมื่อตั้งค่า prefers-color-scheme: dark (ช่องกลาง) แผงสไตล์ (ช่องขวา) จะแสดง CSS ที่ใช้เมื่อ Media Query นั้นเป็นจริง และวิดเจ็ตแสดงผลจะแสดงสไตล์โหมดมืด (ช่องซ้าย)

นอกจากนี้ คุณยังจำลอง prefers-reduced-motion: reduce โดยใช้เมนูแบบเลื่อนลงจำลองฟีเจอร์สื่อ CSS prefers-reduced-motion ข้างเมนูแบบเลื่อนลงจำลองฟีเจอร์สื่อ CSS prefers-color-scheme ได้อีกด้วย

ปัญหา Chromium #1004246

การจําลองเขตเวลา

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

การอัปเดตการครอบคลุมโค้ด

แท็บการครอบคลุมจะช่วยคุณค้นหา JavaScript และ CSS ที่ไม่ได้ใช้

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

กล่องข้อความตัวกรองประเภทการครอบคลุมใหม่ช่วยให้คุณกรองข้อมูลการครอบคลุมตามประเภทได้ ดังนี้ แสดงเฉพาะการครอบคลุม JavaScript, CSS เท่านั้น หรือแสดงการครอบคลุมทุกประเภท

แท็บความครอบคลุม

แท็บความครอบคลุม

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

ข้อมูลความครอบคลุมในแผงแหล่งที่มา

ข้อมูลความครอบคลุมในแผงแหล่งที่มา บรรทัดที่ 8 เป็นตัวอย่างโค้ดที่ไม่ได้ใช้งาน บรรทัดที่ 11 เป็นตัวอย่างโค้ดที่ใช้

ปัญหา Chromium #1003671, #1004185

แก้ไขข้อบกพร่องเกี่ยวกับสาเหตุที่ขอทรัพยากรเครือข่าย

หลังจากบันทึกกิจกรรมเครือข่ายแล้ว ให้เลือกทรัพยากรเครือข่าย แล้วไปที่แท็บผู้เริ่มเพื่อทําความเข้าใจสาเหตุที่ขอทรัพยากร ส่วนสแต็กการเรียกใช้คําขอจะอธิบายสแต็กการเรียกใช้ JavaScript ที่นําไปสู่คําขอเครือข่าย

แท็บผู้เริ่ม

แท็บผู้เริ่ม

ปัญหา Chromium 963183, 842488

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

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

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

ปัญหา Chromium #977394

แป้นพิมพ์ลัดใหม่สำหรับการไปยังส่วนต่างๆ ด้วยเคอร์เซอร์

กด Control+P ในแผงคอนโซลหรือแหล่งที่มาเพื่อเลื่อนเคอร์เซอร์ไปยังบรรทัดด้านบน กด Control+N เพื่อย้ายเคอร์เซอร์ไปยังบรรทัดด้านล่าง

ปัญหา Chromium #983874

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

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

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

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

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

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