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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1421241

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

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

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

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

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

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

ปัญหาเกี่ยวกับ Chromium: 1448011, 1406017

Lighthouse 10.3.0

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

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

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

ปัญหาเกี่ยวกับ Chromium: 772558

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

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

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

ทีมเครื่องมือสำหรับนักพัฒนาเว็บขอแสดงความขอบคุณ Yanling Wang และ Elorm Coch ที่ช่วยปรับปรุงประสิทธิภาพเหล่านี้

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

ไฮไลต์เบ็ดเตล็ด

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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