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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

    กล่องโต้ตอบที่นําคุณไปยังโค้ดต้นฉบับแทนที่จะเป็นไฟล์ที่แมปที่มา

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

    การกรองค่า "has-overrides:yes" ในคอลัมน์ "มีรายการที่ลบล้าง"

  • ในแหล่งที่มา > การลบล้าง ตัวเลือกเมนูลบการลบล้างทั้งหมดได้รับการแทนที่ด้วยตัวเลือกลบซึ่งทำงานอย่างแม่นยำ

    ก่อนและหลังการแทนที่ "ลบการลบล้างทั้งหมด" ด้วย "ลบ"

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

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

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

ปัญหาเกี่ยวกับ 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

จำลองฟีเจอร์สื่อที่ต้องการลดความโปร่งแสง

ตอนนี้ 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)
  • ตอนนี้แหล่งที่มาจะไม่ถือว่าขีดกลางเป็นอักขระของคำใน CSS (1471354)
  • ตอนนี้การเติมข้อความอัตโนมัติจะจัดเรียงคีย์เวิร์ดตาม CSS ที่ท้ายรายการเสมอ
  • ตอนนี้ตัวกรองนิพจน์ทั่วไปรองรับการเว้นวรรคแล้ว (1346936)
  • การตรวจหาฟีเจอร์คิวรี่สื่อแบบคงที่ของ Elements (1472693)

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

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

ติดต่อทีม Chrome DevTools

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

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

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