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

Jecelyn Yeen

เครื่องมือสร้างความยาว CSS ใหม่

DevTools เพิ่มวิธีที่ง่ายแต่ยืดหยุ่นในการอัปเดตความยาวใน CSS

ในแผงรูปแบบ ให้มองหาพร็อพเพอร์ตี้ CSS ที่มีความยาว (เช่น height, padding)

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

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

คุณยังคงแก้ไขค่าหน่วยเป็นข้อความได้ เพียงแค่คลิกที่ค่าและเริ่มแก้ไข

ปัญหาเกี่ยวกับ Chromium: 1126178, 1172993

ซ่อนปัญหาในแท็บปัญหา

ตอนนี้คุณซ่อนปัญหาที่เฉพาะเจาะจงในแท็บปัญหาเพื่อโฟกัสเฉพาะปัญหาที่สำคัญกับคุณได้แล้ว

ในแท็บปัญหา ให้วางเมาส์เหนือปัญหาที่ต้องการซ่อน คลิกตัวเลือกเพิ่มเติม   เพิ่มเติม > ซ่อนปัญหาที่คล้ายกัน

เมนูซ่อนปัญหา

ปัญหาที่ซ่อนอยู่ทั้งหมดจะเพิ่มไว้ในแผงปัญหาที่ซ่อนอยู่ ขยายแผง คุณจะเลิกซ่อนปัญหาที่ซ่อนอยู่ทั้งหมดหรือปัญหาที่เลือกไว้ก็ได้

แผงปัญหาที่ซ่อนอยู่

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

ปรับปรุงการแสดงผลของที่พัก

เครื่องมือสำหรับนักพัฒนาเว็บช่วยปรับปรุงการแสดงผลพร็อพเพอร์ตี้โดย

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

ตัวอย่างเช่น ข้อมูลโค้ดด้านล่างสร้างออบเจ็กต์ URL link ที่มีพร็อพเพอร์ตี้ 2 รายการคือ user และ access และอัปเดตค่าของพร็อพเพอร์ตี้ search ที่รับช่วงมา

/* example.js */

const link = new URL('https://goo.gle/devtools-blog');

link.user = { id: 1, name: 'Jane Doe' };
link.access = 'admin';
link.search = `?access=${link.access}`;

ลองบันทึก link ในคอนโซล ตอนนี้พร็อพเพอร์ตี้ของตัวเองจะเป็นตัวหนาและจัดเรียงก่อนแล้ว การเปลี่ยนแปลงเหล่านี้ช่วยให้สังเกตเห็นพร็อพเพอร์ตี้ที่กำหนดเองได้ง่ายขึ้น โดยเฉพาะสำหรับ Web API (เช่น URL) ที่มีพร็อพเพอร์ตี้ที่รับช่วงมาหลายรายการ

พร็อพเพอร์ตี้ของตัวเองจะเป็นตัวหนาและจัดเรียงก่อน

นอกเหนือจากการเปลี่ยนแปลงเหล่านี้แล้ว พร็อพเพอร์ตี้ในแผงพร็อพเพอร์ตี้จะได้รับการแยกออกด้วยเพื่อให้แก้ไขข้อบกพร่องของพร็อพเพอร์ตี้ DOM ได้ดีขึ้น โดยเฉพาะคอมโพเนนต์เว็บ

รวมคุณสมบัติ

ปัญหาเกี่ยวกับ Chromium: 1076820, 1119900

Lighthouse 8.4 ในแผง Lighthouse

แผง Lighthouse กำลังเรียกใช้ Lighthouse 8.4 ตอนนี้ Lighthouse จะตรวจจับได้ว่าองค์ประกอบ Largest Containful Paint (LCP) เป็นรูปภาพที่โหลดแบบ Lazy Loading หรือไม่ และแนะนำให้นำแอตทริบิวต์ loading ออก

ดูรายละเอียดเพิ่มเติมเกี่ยวกับการอัปเดตได้ในมีอะไรใหม่ใน Lighthouse 8.4

การตรวจสอบ LCP แบบ Lazy Loading ในรายงาน Lighthouse

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

จัดเรียงตัวอย่างข้อมูลในแผงแหล่งที่มา

ตอนนี้ตัวอย่างข้อมูลในแผงตัวอย่างข้อมูลในแผงแหล่งที่มาจัดเรียงตามลำดับตัวอักษรแล้ว ซึ่งก่อนหน้านี้ไม่ได้มีการจัดเรียง

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

จัดเรียงตัวอย่างข้อมูลในแผงแหล่งที่มา

ปัญหา Chromium: 1243976

ลิงก์ใหม่ไปยังบันทึกประจำรุ่นที่แปลแล้วและรายงานข้อบกพร่องของการแปล

ตอนนี้คุณสามารถคลิกเพื่ออ่านบันทึกประจำรุ่นของเครื่องมือสำหรับนักพัฒนาเว็บในภาษาต่างๆ อีก 6 ภาษา ได้แก่ รัสเซีย จีน สเปน ญี่ปุ่น โปรตุเกส และเกาหลี ผ่านแท็บ "มีอะไรใหม่"

ตั้งแต่ Chrome 94 เป็นต้นไป คุณสามารถตั้งค่าภาษาที่ต้องการในเครื่องมือสำหรับนักพัฒนาเว็บได้ หากพบปัญหาเกี่ยวกับการแปล โปรดช่วยเราปรับปรุงโดยการรายงานปัญหาการแปลผ่านตัวเลือกเพิ่มเติม > ความช่วยเหลือ > รายงานข้อบกพร่องของการแปล

ลิงก์ใหม่ไปยังบันทึกประจำรุ่นที่แปลแล้วและรายงานข้อบกพร่องของการแปล

ปัญหาเกี่ยวกับ Chromium: 1246245, 1245481

UI ที่ปรับปรุงใหม่สำหรับเมนูคำสั่งของเครื่องมือสำหรับนักพัฒนาเว็บ

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

เปิดเมนูคำสั่งเพื่อค้นหาไฟล์ด้วยแป้นพิมพ์ลัด Control+P ใน Windows และ Linux หรือ Command+P ใน MacOS

การปรับปรุง UI ของเมนูคำสั่งยังคงดำเนินการอยู่ โปรดรอติดตามข้อมูลอัปเดตเพิ่มเติม

เมนูคำสั่ง

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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