หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Sofia Emelianova

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

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

ตอนนี้แหล่งที่มา > โครงสร้างหน้าเว็บจะแสดงเฉพาะสไตล์ชีตที่ใช้งานและโหลดเรียบร้อยแล้วเพื่อลดความสับสน
ตอนนี้แหล่งที่มา > ตัวแก้ไขจะขีดเส้นใต้และแสดงเคล็ดลับเครื่องมือข้อผิดพลาดในบรรทัดข้างคําสั่ง @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

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

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

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

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

ปัญหา Chromium: 1448011, 1406017

Lighthouse 10.3.0

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

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

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

ปัญหาของ Chromium: 772558

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

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

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

ทีมเครื่องมือสำหรับนักพัฒนาเว็บรู้สึกซาบซึ้งต่อ Yanling Wang และ Elorm Coch ที่ได้ดำเนินการปรับปรุงเหล่านี้

ปัญหา Chromium: 1446482, 1414952

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

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

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

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

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

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

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

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