หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Jecelyn Yeen

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

เครื่องมือสำหรับนักพัฒนาเว็บเพิ่มวิธีที่ง่ายแต่ยืดหยุ่นในการอัปเดตความยาวใน 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

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

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

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

ปัญหา Chromium: 1201997

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

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

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

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

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