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

Kayce Basques

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

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

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

แท็บคุกกี้

แท็บคุกกี้

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

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

ดูค่าคุกกี้

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

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

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

ปัญหา Chromium #462370

จำลองค่ากำหนด Preferreds-color-scheme และ Preferreds-reduced-motion

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

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

Preferreds-color-scheme: มืด

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

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

ปัญหา Chromium #1004246

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

แท็บ Initiator

Chromium เกิดปัญหา 963183, 842488

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

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

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

ปัญหา Chromium #977394

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

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

ปัญหา Chromium #983874

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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