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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

แท็บคุกกี้

แท็บ Cookies

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

ปัญหาใน Chromium #856777, #993843

ดูค่าคุกกี้

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

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

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

ปัญหาใน Chromium #462370

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

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

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

prefers-color-scheme: dark

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

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

ปัญหาใน Chromium #1004246

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

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

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

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

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

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

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

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

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

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

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

ปัญหาใน Chromium #1003671, #1004185

แก้ไขข้อบกพร่องว่าเหตุใดจึงมีการขอทรัพยากรเครือข่าย

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

แท็บตัวเริ่มต้น

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

ปัญหา 963183 และ 842488 ใน Chromium

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

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

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

ปัญหาใน Chromium #977394

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

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

ปัญหาใน Chromium #983874

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

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

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

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

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

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