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

Sofia Emelianova
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

ลองใช้ฟิดเดิลนี้เพื่อทดสอบฟีเจอร์ เปิดเครื่องมือสำหรับนักพัฒนาเว็บ แล้วไปที่ แอปพลิเคชัน > พื้นที่เก็บข้อมูล > 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59