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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

คอนโซลจะแสดงลิงก์ไปยังบรรทัดที่มีปัญหา

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1440626, 1442198, 1453611

การรองรับเวลาแบบเชิงเส้นในส่วนองค์ประกอบ > สไตล์ > เครื่องมือแก้ไขเอฟเฟกต์การเปลี่ยน

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

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

ปัญหา Chromium: 1421241

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

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

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

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

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

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

ปัญหา Chromium: 1448011, 1406017

Lighthouse 10.3.0

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

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

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

ปัญหา Chromium: 772558

การช่วยเหลือพิเศษ: คําสั่งแป้นพิมพ์และการอ่านหน้าจอที่ปรับปรุงใหม่

ตอนนี้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์รองรับแป้นพิมพ์ลัดเพิ่มเติมและแก้ไขปัญหาเกี่ยวกับโปรแกรมอ่านหน้าจอแล้ว

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

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

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

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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