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

Jecelyn Yeen

เครื่องมือเขียนความยาว CSS ใหม่

DevTools เพิ่มวิธีอัปเดตความยาวใน 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

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

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

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

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

ปัญหา Chromium: 1243976

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

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

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

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

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

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

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

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

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

เมนูคำสั่ง

ปัญหา Chromium: 1201997

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

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

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

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

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

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