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

Kayce Basques

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

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

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

แท็บคุกกี้

แท็บคุกกี้

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

ปัญหาเกี่ยวกับ Chromium #856777, #993843

ดูค่าคุกกี้

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

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

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

ปัญหา Chromium #462370

จำลองรูปแบบสีที่ต้องการและความต้องการการเคลื่อนไหวที่ลดลง

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

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

รูปแบบสีที่ต้องการ: มืด

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

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

ปัญหา Chromium #1004246

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

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

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

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

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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium #1003671, #1004185

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

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

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

แท็บ Initiator

ปัญหาเกี่ยวกับ Chromium 963183, 842488

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

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

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

ปัญหาเกี่ยวกับ Chromium #977394

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

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

ปัญหาเกี่ยวกับ Chromium #983874

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

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

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

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

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

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

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59