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

Kayce Basques

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

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

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

แท็บคุกกี้

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

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

ดูค่าคุกกี้

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

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

ปัญหา Chromium #462370

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

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

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

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

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

ปัญหา Chromium #1004246

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

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

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

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

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

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

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

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

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

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

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

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

แท็บ Initiator

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

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

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

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

ปัญหา Chromium #977394

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

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

ปัญหา Chromium #983874

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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