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

ส่วนใหม่สำหรับพร็อพเพอร์ตี้ที่กำหนดเองในส่วนองค์ประกอบ > รูปแบบ

ตอนนี้แผงองค์ประกอบรองรับแอตทริบิวต์@property ของ CSS แล้ว ซึ่งช่วยให้คุณกำหนดพร็อพเพอร์ตี้ที่กำหนดเองของ CSS อย่างชัดเจนและลงทะเบียนไว้ในสไตล์ชีตได้โดยไม่ต้องเรียกใช้ JavaScript

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

ปัญหาเกี่ยวกับ Chromium: 1471102, 1471103, 1471105

การปรับปรุงการลบล้างในร้านเพิ่มเติม

การลบล้างในเครื่องจะทําสิ่งต่อไปนี้ต่อจากชุดการปรับปรุงในเวอร์ชันก่อนหน้า

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

  

• แผงเครือข่ายจะมีคอลัมน์มีการลบล้างใหม่และตัวกรอง has-overrides:[content|headers|yes|no] ที่เกี่ยวข้อง หากต้องการดูคอลัมน์มีการลบล้าง ให้คลิกขวาที่ส่วนหัวของตารางแล้วเลือกคอลัมน์นั้น

  

• ในแหล่งที่มา > การลบล้าง ตัวเลือกเมนูลบการลบล้างทั้งหมดได้เปลี่ยนเป็นตัวเลือกลบที่ทํางานอย่างละเอียด

  

ลบการลบล้างทั้งหมดก่อนหน้านี้ทำให้เกิดความสับสนเนื่องจากจะลบเฉพาะการลบล้างที่ใช้งานอยู่ในเซสชันปัจจุบัน ซึ่งระบุด้วยไอคอนจุดสีม่วง

ตัวเลือกลบใหม่จะแสดงข้อความเตือนและแจ้งให้ยืนยันก่อน จากนั้นจึงลบโฟลเดอร์ที่คุณคลิกพร้อมเนื้อหาทั้งหมด

หากต้องการนำตัวเลือกก่อนหน้ากลับมา ให้เลือก เปิดใช้ "ลบการลบล้างทั้งหมดชั่วคราว" ใน การตั้งค่า > การทดสอบ

ปัญหาเกี่ยวกับ Chromium: 1472952, 1416338, 1472580, 1473681 1475668

การค้นหาที่มีประสิทธิภาพมากขึ้น

ตอนนี้ผลการค้นหา Search จะแสดงรายการตามรายการที่ตรงกันทั้งหมดที่พบในบรรทัดโค้ด ซึ่งก่อนหน้านี้จะแสดงเฉพาะรายการที่ตรงกันรายการแรกต่อบรรทัดโค้ดเท่านั้น ลักษณะการทำงานแบบใหม่นี้มีประโยชน์อย่างยิ่งเมื่อคุณค้นหาในไฟล์ที่ผ่านการย่อขนาด เมื่อคลิกผลการค้นหา ระบบจะเปิดไฟล์ในเครื่องมือแก้ไข และตอนนี้จะเลื่อนรายการที่ตรงกันให้แสดงทั้งแนวตั้งและแนวนอน

นอกจากนี้ Search ยังทำงานได้เร็วขึ้นด้วย ดูการเปรียบเทียบก่อน (ซ้าย) และหลัง (ขวา) ในวิดีโอถัดไป

สุดท้าย Search รองรับการละเว้นข้อมูลแล้ว และจะไม่ให้ผลการค้นหาจากไฟล์ที่ละเว้น

ปัญหาเกี่ยวกับ Chromium: 1468875, 1472019

แผงแหล่งที่มาที่ปรับปรุงใหม่

พื้นที่ทํางานที่มีประสิทธิภาพมากขึ้นในแผงแหล่งที่มา

ฟีเจอร์พื้นที่ทํางานในแผงแหล่งที่มาได้รับการปรับปรุงใหม่ให้มีประสิทธิภาพมากขึ้น ดังนี้

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

แหล่งที่มา > พื้นที่ทํางาน ช่วยให้คุณซิงค์การเปลี่ยนแปลงที่ทำในเครื่องมือสำหรับนักพัฒนาเว็บกับไฟล์ต้นฉบับได้โดยตรง

ดูการตั้งค่าและเวิร์กโฟลว์แบบใหม่ได้ดังนี้

ปัญหาเกี่ยวกับ Chromium: 1473771, 1473880, 1473963, 1474686, 1474687

เรียงลําดับแผงใน "แหล่งที่มา" ใหม่

ตอนนี้คุณจัดเรียงแผงทางด้านซ้ายของแผงแหล่งที่มาใหม่ได้แล้วโดยการลากและวาง ซึ่งคล้ายกับวิธีจัดเรียงแผง แท็บ และแผงอื่นๆ ใหม่

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

การไฮไลต์ไวยากรณ์และการพิมพ์ที่แสดงผลได้ชัดเจนสำหรับสคริปต์ประเภทอื่นๆ

ตอนนี้แผงแหล่งที่มาทําสิ่งต่อไปนี้ได้

• แสดงผล JavaScript ในบรรทัดอย่างเป็นระเบียบภายในสคริปต์ประเภท module, importmap และ speculationrules
• ไฮไลต์ไวยากรณ์ของสคริปต์ประเภท importmap และ speculationrules ซึ่งทั้ง 2 ประเภทใช้ JSON

ดูข้อมูลเพิ่มเติมเกี่ยวกับกฎการคาดคะเนได้ที่แสดงผลหน้าเว็บใน Chrome ล่วงหน้าเพื่อการไปยังส่วนต่างๆ ของหน้าเว็บได้ทันที

ปัญหา Chromium: 1473875

จำลองฟีเจอร์สื่อ prefers-reduced-transparency

ตอนนี้ Chrome 118 รองรับฟีเจอร์สื่อ prefers-reduced-transparency แล้ว ฟีเจอร์นี้ช่วยให้นักพัฒนาซอฟต์แวร์ปรับเนื้อหาเว็บให้เหมาะกับค่ากําหนดของผู้ใช้เพื่อลดระดับความโปร่งใสในระบบปฏิบัติการ เช่น การตั้งค่าลดระดับความโปร่งใสใน macOS

หากต้องการจําลองฟีเจอร์สื่อนี้ ให้เปิดแท็บการแสดงผล แล้วเลื่อนลงไปที่ฟีเจอร์ดังกล่าว

ปัญหา Chromium: 1424879

Lighthouse 11

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 11 สิ่งที่โดดเด่นที่สุดคือเวอร์ชันนี้จะนําการนําทางแบบเดิมออกและเพิ่มการตรวจสอบการช่วยเหลือพิเศษแบบใหม่ รวมถึงเปลี่ยนวิธีให้คะแนนหมวดหมู่การช่วยเหลือพิเศษ

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

ปัญหา Chromium: 772558

การปรับปรุงการช่วยเหลือพิเศษ

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

• ภาพรวม CSS: ใช้ลูกศรขึ้นและลงเพื่อไปยังส่วนต่างๆ ในแถบด้านข้างซ้าย
• ความทรงจำ: ในแถบด้านข้างซ้าย ให้โฟกัสปุ่มบันทึกข้างภาพนิ่งด้วย Tab แล้วกด Enter เพื่อเลือกโฟลเดอร์

นอกจากนี้ เรายังได้แก้ไขปัญหาการประกาศของโปรแกรมอ่านหน้าจอหลายรายการ

ปัญหาเกี่ยวกับ Chromium: 1470401, 1471301, 1474108, 1468631

ไฮไลต์อื่นๆ

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

• เครือข่าย: ไอคอนใหม่สำหรับประเภทแหล่งข้อมูลที่ได้รับความนิยม ได้แก่ media, wasm, websocket, manifest, fetch/xhr, json (1466298)
• อัปเดตสีเป็นวัสดุ 3 สีในองค์ประกอบ UI หลายรายการ โดยเฉพาะอย่างยิ่งในแผงองค์ประกอบและประสิทธิภาพ (1456690, 1472243)
• ตอนนี้ปัญหาจะเก็บปัญหาเกี่ยวกับคุกกี้ไว้ในการนําทาง (1466601)
• การปรับปรุงต่างๆ ในส่วนแอปพลิเคชัน > การโหลดล่วงหน้า โดยเฉพาะอย่างยิ่งตารางที่เรียงลำดับได้และรายละเอียดชุดกฎที่แก้ไขแล้ว (1410709)
• การปรับปรุงต่างๆ ของเครื่องมือแก้ไขคําสั่งในเครื่องมือตรวจสอบโปรโตคอล ซึ่งที่สำคัญที่สุดคือคําเตือนเกี่ยวกับอินพุตที่ไม่ถูกต้อง การแก้ไขคําสั่งที่ส่ง เครื่องมือแก้ไขพารามิเตอร์ออบเจ็กต์ที่ไม่มีคีย์ที่กําหนดไว้ล่วงหน้า การรองรับเอนทิตีที่ไม่มีการกําหนดค่าตามการอ้างอิง ออบเจ็กต์ที่ไม่มีการอ้างอิงประเภท การกรองคําสั่งตามการจับคู่สตริงย่อย และอื่นๆ (1448050)
• แผนภูมิเปลวไฟประสิทธิภาพมีเส้นขอบรอบกล่องทั้งหมดในแผนภูมิวงกลม (1470147)
• ตอนนี้ Sources จะไม่ถือว่าขีดกลางเป็นอักขระคำใน CSS (1471354)
• ตอนนี้ฟีเจอร์เติมข้อความอัตโนมัติจะจัดเรียงคีย์เวิร์ดตาม CSS ที่ท้ายรายการเสมอ
• ตอนนี้ตัวกรองนิพจน์ทั่วไปรองรับการเว้นวรรคแล้ว (1346936)
• Elements แก้ไขปัญหาการตรวจหาฟีเจอร์การค้นหาสื่อ (1472693)

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

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

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

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

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

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

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