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

Sofia Emelianova
Sofia Emelianova
GitHub

ปรับปรุงการแก้ไขข้อบกพร่องของสไตล์ชีตที่ขาดหายไป

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

  • ตอนนี้ทรี Sources > Page จะแสดงเฉพาะชีตสไตล์ที่ติดตั้งใช้งานและโหลดสำเร็จแล้วเพื่อลดความสับสน
  • ตอนนี้ Sources > Editor จะขีดเส้นใต้และแสดงเคล็ดลับเครื่องมือข้อผิดพลาดในบรรทัดข้างๆ คำสั่ง @import, url() และ href ที่ล้มเหลว

ข้อความที่ขีดเส้นใต้พร้อมเคล็ดลับเครื่องมือในแผงแหล่งที่มา

  • ตอนนี้ Console จะมีลิงก์ไปยังบรรทัดที่อ้างอิงสไตล์ชีตที่โหลดไม่สำเร็จ นอกเหนือจากลิงก์ไปยังคำขอที่ไม่สำเร็จ

คอนโซลมีลิงก์ไปยังบรรทัดที่มีข้อความที่เป็นปัญหา

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

  • แผงปัญหาจะแสดงปัญหาการโหลดชีตสไตล์ทั้งหมด รวมถึง URL ที่เสีย คำขอที่ไม่สำเร็จ และคำสั่ง @import ที่วางผิดที่

แผงปัญหาที่มีลิงก์ไปยังแหล่งที่มาและคำขอ

ปัญหาใน Chromium: 1440626, 1442198, 1453611

การรองรับการกำหนดเวลาเชิงเส้นใน Elements > Styles > Easing Editor

เครื่องมือแก้ไขการค่อยๆ เปลี่ยน เครื่องมือแก้ไขการเปลี่ยนในองค์ประกอบ > สไตล์ช่วยให้คุณปรับค่า transition-timing-function และ animation-timing-function ได้ด้วยการคลิก ในเวอร์ชันนี้ เครื่องมือแก้ไขการค่อยๆ เปลี่ยน Easing Editor จะรองรับฟังก์ชันการกำหนดเวลาเชิงเส้น

หากต้องการกำหนดค่าการกำหนดเวลาเชิงเส้น ให้คลิกปุ่มเครื่องมือเลือกเชิงเส้น หากต้องการเพิ่มจุดควบคุม ให้คลิกที่ใดก็ได้บนเส้น หากต้องการนำจุดควบคุมออก ให้ดับเบิลคลิกจุดดังกล่าว นอกจากนี้ คุณยังเลือกค่าที่กำหนดล่วงหน้าค่าใดค่าหนึ่งต่อไปนี้ได้ด้วย linear, elastic, bounce หรือ emphasized ดูวิดีโอเพื่อดูการปรับเชิงเส้นในการทำงาน

ปัญหาใน Chromium: 1421241

การรองรับที่เก็บข้อมูลและมุมมองข้อมูลเมตา

ส่วนแอปพลิเคชัน > พื้นที่เก็บข้อมูล จะรองรับที่เก็บข้อมูล ที่เก็บข้อมูลจะแยกจากกัน คุณจึงระบุการจัดลําดับความสําคัญของการนำออกสำหรับชิ้นข้อมูลและตรวจสอบว่าระบบจะไม่ลบข้อมูลที่มีค่าที่สุด ที่เก็บข้อมูลแต่ละรายการจะจัดเก็บข้อมูลที่เชื่อมโยงกับ API ของพื้นที่เก็บข้อมูลที่สร้างขึ้น เช่น IndexedDB และ CacheStorage

ดูFiddle นี้เพื่อทดสอบฟีเจอร์ เปิด DevTools ไปที่แอปพลิเคชัน > พื้นที่เก็บข้อมูล > Indexed DB แล้วเรียกใช้โค้ด ตอนนี้ DevTools จะแสดงที่เก็บข้อมูลและเนื้อหาของที่เก็บข้อมูล เลือกที่เก็บข้อมูลเพื่อดูข้อมูลเมตา

ดูข้อมูลเมตาของที่เก็บข้อมูล

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

มุมมองข้อมูลเมตาแบบรวมใหม่

ปัญหาใน Chromium: 1448011, 1406017

Lighthouse 10.3.0

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 10.3.0 ที่สำคัญที่สุดคือเวอร์ชันนี้ได้เพิ่มการตรวจสอบใหม่ 4 รายการที่ตรวจพบปัญหาด้านการช่วยเหลือพิเศษต่างๆ เกี่ยวกับส่วนหัวของตารางและคำบรรยายแทนเสียง ชื่อปุ่มอินพุต และภาษาไม่ตรงกัน เช่น

การตรวจสอบส่วนหัวของตารางผ่าน

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

ปัญหาใน Chromium: 772558

การช่วยเหลือพิเศษ: คำสั่งแป้นพิมพ์และการอ่านหน้าจอที่ดียิ่งขึ้น

ตอนนี้ DevTools รองรับแป้นพิมพ์ลัดมากขึ้นและแก้ไขปัญหาเกี่ยวกับโปรแกรมอ่านหน้าจอแล้ว ดังนี้

  • ตอนนี้คุณสามารถเปิดเมนูตามบริบทด้วยแป้นพิมพ์ลัดได้แล้ว เช่น Shift+F10 ใน Windows และ Linux หลายรุ่น ดูแป้นพิมพ์ลัดสำหรับ MacOS ได้ที่การดำเนินการของเคอร์เซอร์อื่นๆ
  • แอปพลิเคชันโปรแกรมอ่านหน้าจอ
    • จะไม่ประกาศป้ายกำกับช่องทำเครื่องหมาย 2 ครั้งโดยไม่จำเป็น
    • จะประกาศชื่อส่วนหัวของคอลัมน์สำหรับคอลัมน์ที่จัดเรียงได้เมื่อคุณกดทางลัด "อ่านส่วนหัวของคอลัมน์"

ทีม DevTools ขอขอบคุณ Yanling Wang และ Elorm Coch ที่ช่วยปรับปรุงฟีเจอร์เหล่านี้

ปัญหาเกี่ยวกับ Chromium: 1446482, 1414952

ไฮไลต์อื่นๆ

การแก้ไขและการปรับปรุงที่น่าสนใจในรุ่นนี้มีดังนี้

  • แผงเครือข่ายจะบันทึกกิจกรรมเครือข่ายต่อไปแม้หลังจากที่คุณโต้ตอบกับไทม์ไลน์แล้ว (1422552)
  • ตอนนี้แผงความครอบคลุมจะรับรู้ว่ามีการเปิดใช้งานการแสดงผลล่วงหน้าหรือการไปยังส่วนต่างๆ ของ Back-Forward Cache หรือไม่ และจะแจ้งให้คุณโหลดซ้ำ (1393057)
  • ตอนนี้คุณสามารถไปยังแผงแหล่งที่มา > จุดพักรหัสด้วยแป้นพิมพ์ได้แล้ว โดยใช้ลูกศรขึ้นและลูกศรลงเพื่อเลื่อน และSpace เพื่อเลือก (1446150)
  • แก้ไขการอัปโหลดและการกรองไฟล์ HAR ในแผงเครือข่าย (1450622)
  • ตอนนี้ Flamechart ในแผงประสิทธิภาพจะเว้นช่องว่างเล็กๆ ระหว่างการติดตามเพื่อให้แสดงผลได้ดีขึ้น (1452150)
  • แก้ไขการแมปอัตโนมัติสำหรับไฟล์ที่ฝังในการแมปแหล่งที่มา (1446383)

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

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

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

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

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

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