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

Kayce Basques

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

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

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

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

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

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

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

ปัญหา Chromium #924693

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

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

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

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

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

ปัญหา Chromium #1030258

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

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

ปัญหา Chromium #1026879

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

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

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

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

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

คัดลอกเป็นการดึงข้อมูล Node.js

ปัญหา Chromium #1029826

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

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

ไอคอนในแผงไฟล์ Manifest

ปัญหา Chromium #985402

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

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

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

สตริงที่หลบอยู่

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

ค่าที่ไม่มีการหนีค่าบ่าย

ข้อผิดพลาดเกี่ยวกับสําเนาแผนที่แหล่งที่มาที่ละเอียดยิ่งขึ้นในคอนโซล

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

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

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

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

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools