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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

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

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

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

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

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

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

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

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

  • ในแหล่งที่มา > การลบล้าง ตัวเลือกเมนูลบการลบล้างทั้งหมดจะแทนที่ด้วยตัวเลือกลบที่มีลักษณะการทำงานที่แม่นยำ

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

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

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

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

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

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

ก่อนและหลังการค้นหาจะแสดงรายการที่ตรงกันทั้งหมดต่อบรรทัด

นอกจากนี้ 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: ใช้ลูกศรขึ้นและลงเพื่อไปยังส่วนต่างๆ ในแถบด้านข้างซ้าย
  • ความทรงจำ: ในแถบด้านข้างซ้าย ให้โฟกัสปุ่มบันทึกข้างสแนปชอตด้วยแท็บ แล้วกด Enter เพื่อเลือกโฟลเดอร์

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

ปัญหาใน Chromium: 1470401, 1471301, 1474108, 1468631

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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