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

Kayce Basques
Kayce Basques
X GitHub

การรองรับ Moto G4 ในโหมดอุปกรณ์

หลังจากเปิดใช้แถบเครื่องมืออุปกรณ์แล้ว คุณจะจำลองขนาดของ Viewport ของ Moto G4 ได้ จากรายการอุปกรณ์

การจำลองวิวพอร์ตของ Moto G4

คลิกแสดงเฟรมของอุปกรณ์เพื่อแสดงฮาร์ดแวร์ Moto G4 รอบๆ Viewport

แสดงฮาร์ดแวร์ Moto G4

ฟีเจอร์ที่เกี่ยวข้อง

  • เปิดเมนูคำสั่งและเรียกใช้คำสั่ง Capture screenshot เพื่อถ่ายภาพหน้าจอของ วิวพอร์ตที่มีฮาร์ดแวร์ Moto G4 (หลังจากเปิดใช้แสดงกรอบอุปกรณ์)
  • ควบคุมเครือข่ายและ CPU เพื่อจำลองเงื่อนไขการท่องเว็บของผู้ใช้บนอุปกรณ์เคลื่อนที่ได้อย่างแม่นยำยิ่งขึ้น

ปัญหา Chromium #924693

การอัปเดตที่เกี่ยวข้องกับคุกกี้

คุกกี้ที่ถูกบล็อกในแผงคุกกี้

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

คุกกี้ที่ถูกบล็อกในบานหน้าต่างคุกกี้ของแผงแอปพลิเคชัน

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

ปัญหา #1030258 ใน Chromium

ลำดับความสำคัญของคุกกี้ในแผงคุกกี้

ตารางคุกกี้ในแผงเครือข่ายและแอปพลิเคชันจะมีคอลัมน์ลำดับความสำคัญแล้ว

ปัญหา Chromium #1026879

แก้ไขค่าคุกกี้ทั้งหมด

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

การแก้ไขค่าคุกกี้

คัดลอกเป็น Node.js Fetch เพื่อรวมข้อมูลคุกกี้

คลิกขวาที่คำขอเครือข่าย แล้วเลือกคัดลอก > คัดลอกเป็น Node.js fetch เพื่อรับfetch นิพจน์ที่มีข้อมูลคุกกี้

คัดลอกเป็น Node.js Fetch

ปัญหา Chromium #1029826

ไอคอนไฟล์ Manifest ของเว็บแอปที่แม่นยำยิ่งขึ้น

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

ไอคอนในบานหน้าต่าง Manifest

ปัญหา #985402 ใน Chromium

วางเมาส์เหนือพร็อพเพอร์ตี้ CSS content เพื่อดูค่าที่ไม่ได้หลีกเลี่ยง

วางเมาส์เหนือค่าของพร็อพเพอร์ตี้ content เพื่อดูค่าเวอร์ชันที่ไม่ได้หลีก

เช่น ในเดโมนี้ เมื่อตรวจสอบองค์ประกอบเสมือน p::after คุณจะเห็นสตริงที่หลีกเลี่ยงแล้วในแผง Styles ดังนี้

สตริงที่หลีกเลี่ยง

เมื่อวางเมาส์เหนือค่า content คุณจะเห็นค่าที่ไม่ได้หลีก

ค่าที่ไม่ได้หลีกเลี่ยง

ข้อผิดพลาดของ Source Map ที่ละเอียดยิ่งขึ้นในคอนโซล

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

ข้อผิดพลาดในการโหลดการแมปแหล่งที่มาในคอนโซล

การตั้งค่าสำหรับการปิดใช้การเลื่อนผ่านจุดสิ้นสุดของไฟล์

เปิดการตั้งค่า แล้วปิดใช้ค่ากำหนด > แหล่งที่มา > อนุญาตให้เลื่อนผ่านจุดสิ้นสุดของไฟล์เพื่อปิดใช้ลักษณะการทำงานของ UI เริ่มต้นที่อนุญาตให้คุณเลื่อนผ่านจุดสิ้นสุดของไฟล์ในแผงแหล่งที่มา

GIF ของฟีเจอร์มีดังนี้

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

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

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

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

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

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