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

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

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

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

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

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

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

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

  

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

  

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

  

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

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

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

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

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

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

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

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

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

แผงแหล่งที่มาที่ได้รับการปรับปรุง

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

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

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

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

ดูการตั้งค่าใหม่และขั้นตอนการทำงานจริง

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

ประภาคาร 11

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

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

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

ปรับปรุงการเข้าถึง

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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