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

Jecelyn Yeen

ปรับแต่งแป้นพิมพ์ลัดในเครื่องมือสำหรับนักพัฒนาเว็บ

ตอนนี้คุณสามารถปรับแต่งแป้นพิมพ์ลัดสำหรับคำสั่งโปรดในเครื่องมือสำหรับนักพัฒนาเว็บได้แล้ว

ไปที่การตั้งค่า > แป้นพิมพ์ลัด วางเมาส์เหนือคำสั่ง แล้วคลิกปุ่มแก้ไข (ไอคอนปากกา) เพื่อปรับแต่งแป้นพิมพ์ลัด คุณยังสร้างคอร์ด (หรือแป้นพิมพ์ลัดแบบกดหลายปุ่ม) ได้ด้วย

ปรับแต่งแป้นพิมพ์ลัดใน DevTools

ปัญหาเกี่ยวกับ Chromium: 1335274, 174309

เปิด/ปิดธีมสว่างและธีมมืดด้วยแป้นพิมพ์ลัด

กำหนดค่าแป้นพิมพ์ลัดเพื่อสลับธีมสว่างและธีมมืดได้อย่างสะดวก โดยค่าเริ่มต้น การดำเนินการจะไม่แมปกับแป้นพิมพ์ลัดใดๆ

เปิด/ปิดธีมสว่างและธีมมืดด้วยแป้นพิมพ์ลัด

ปัญหาใน Chromium: 1280398, 1226363

ไฮไลต์ออบเจ็กต์ C/C++ ในเครื่องมือตรวจสอบหน่วยความจำ

เครื่องมือตรวจสอบหน่วยความจำจะไฮไลต์ไบต์ทั้งหมดของออบเจ็กต์หน่วยความจำ C/C++

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

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

ไฮไลต์ออบเจ็กต์ C/C++ ในเครื่องมือตรวจสอบหน่วยความจำ

ปัญหาใน Chromium: 1336568

รองรับข้อมูลผู้เริ่มต้นทั้งหมดสำหรับการนำเข้า HAR

ตอนนี้คุณดูข้อมูลผู้เริ่มต้นแบบเต็มได้แล้วสําหรับการนําเข้า HAR ก่อนหน้านี้ แผงเครือข่ายจะแสดงข้อมูลผู้เริ่มเพียงบางส่วนในระหว่างการนำเข้า

ข้อมูลผู้เริ่มต้นช่วยให้นักพัฒนาแอปติดตามที่มาของคำขอเครือข่ายและระบุปัญหาที่เกี่ยวข้องกับเครือข่ายได้

รองรับข้อมูลผู้เริ่มต้นทั้งหมดสำหรับการนำเข้า HAR

ปัญหาใน Chromium: 1343185

เริ่มการค้นหา DOM หลังจากกด Enter

ตอนนี้คุณปิดใช้การตั้งค่าค้นหาขณะพิมพ์เพื่อเริ่มการค้นหา DOM ทุกครั้งหลังจากกด Enter ได้แล้ว

ในแผงองค์ประกอบ ให้สลับแถบค้นหาด้วย Control หรือ Command + F ขณะที่คุณพิมพ์คำค้นหาในกล่องข้อความค้นหา ต้นไม้ DOM จะไปยังองค์ประกอบแรกที่ตรงกันและไฮไลต์โดยค่าเริ่มต้น

สำหรับผู้ใช้ โดยเฉพาะผู้ทดสอบที่มักจะใช้คำค้นหายาวๆ ลักษณะการทำงานนี้จึงไม่เหมาะ DOM Tree อาจเปลี่ยนหลายครั้งขณะที่คุณพิมพ์คำค้นหาที่ยาว (เช่น //div[@id="example"]) ลักษณะการทำงานนี้ทำให้เกิดการเคลื่อนไหวที่ไม่จำเป็น

การค้นหา DOM

ไปที่การตั้งค่า > ค่ากำหนด แล้วปิดใช้ค้นหาขณะพิมพ์ การเปลี่ยนแปลงนี้จะทำให้การค้นหาเริ่มต้นหลังจากที่คุณกด Enter เท่านั้น

การตั้งค่าการค้นหาขณะพิมพ์

ปัญหาใน Chromium: 1344526

แสดงไอคอน start และ end สำหรับพร็อพเพอร์ตี้ align-content CSS flexbox

ในแผงรูปแบบ ให้แก้ไขพร็อพเพอร์ตี้ align-content ในคลาส CSS ด้วย display: flex หรือ display: inline-flex start และ end จะปรากฏในเมนูแบบเลื่อนลงของการเติมข้อความอัตโนมัติพร้อมไอคอน

คุณสมบัติ Flexbox ของ align-content

ปัญหาใน Chromium: 1139945

ไฮไลต์อื่นๆ

  • แสดงจำนวนข้อความที่ถูกต้องในแถบด้านข้างของคอนโซล ก่อนหน้านี้ ระบบจะไม่รีเฟรชจำนวนเมื่อล้างข้อความคอนโซล (1343311)

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

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

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

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

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

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