มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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 ที่มีข้อมูลคุกกี้

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

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

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

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

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

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

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

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

ตัวอย่างเช่น ในdemoนี้เมื่อตรวจสอบองค์ประกอบเทียมของ p::after คุณเห็นค่า Escape ในบานหน้าต่างรูปแบบ

สตริงที่กำหนดเป็นอักขระหลีก

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

ค่าที่ไม่ใช้ Escape

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

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

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

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

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

โปรดดู GIF ของฟีเจอร์นี้

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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