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

Jecelyn Yeen

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

เครื่องมือสำหรับนักพัฒนาเว็บได้เพิ่มวิธีที่ง่ายแต่ยืดหยุ่นกว่าในการอัปเดตความยาวใน CSS

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

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

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

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

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

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

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

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

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

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

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

ปัญหาใน Chromium: 1175722

ปรับปรุงการแสดงที่พัก

DevTools ปรับปรุงการแสดงพร็อพเพอร์ตี้โดยทำดังนี้

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

ตัวอย่างเช่น ข้อมูลโค้ดด้านล่างสร้างออบเจ็กต์ 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 Contentful Paint (LCP) เป็นรูปภาพที่โหลดแบบ Lazy Loading หรือไม่ และแนะนําให้ลบแอตทริบิวต์ loading ออกจากองค์ประกอบดังกล่าว

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

การตรวจสอบ LCP ที่โหลดอย่างช้าในรายงาน Lighthouse

ปัญหาใน Chromium: 772558

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

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

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

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

ปัญหาใน Chromium: 1243976

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

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

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

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

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

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

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

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

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

เมนูคำสั่ง

ปัญหาใน Chromium: 1201997

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

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

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

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

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

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