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

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

Kayce Basques

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

เวอร์ชันวิดีโอของหน้านี้

ค่าที่กำหนดล่วงหน้าที่มีความหมายเมื่อเติมฟังก์ชัน CSS อัตโนมัติ

พร็อพเพอร์ตี้ CSS บางรายการ เช่น filter จะใช้ฟังก์ชันสําหรับค่า ตัวอย่างเช่น filter: blur(1px) จะเพิ่มการเบลอ 1 พิกเซลในโหนด เมื่อเติมข้อมูลพร็อพเพอร์ตี้อัตโนมัติ เช่น filter เครื่องมือสำหรับนักพัฒนาเว็บจะป้อนข้อมูลพร็อพเพอร์ตี้ด้วยค่าที่มีความหมายเพื่อให้คุณดูตัวอย่างประเภทการเปลี่ยนแปลงของค่าที่จะมีในโหนดได้

การทำงานแบบเก่าของการเติมข้อความอัตโนมัติ

รูปที่ 1 การทำงานแบบเก่าของการเติมข้อความอัตโนมัติ เครื่องมือสำหรับนักพัฒนาเว็บจะเติมข้อมูลอัตโนมัติลงใน filter: blur และจะไม่เห็นการเปลี่ยนแปลงในวิวพอร์ต

ลักษณะการทำงานใหม่ของการเติมข้อความอัตโนมัติ

รูปที่ 2 ลักษณะการทำงานใหม่ของการเติมข้อความอัตโนมัติ เครื่องมือสำหรับนักพัฒนาเว็บกำลังเติมข้อความอัตโนมัติลงใน filter: blur(1px) และการเปลี่ยนแปลงจะปรากฏในวิวพอร์ต

ปัญหา Chromium ที่เกี่ยวข้อง: #931145

ล้างข้อมูลเว็บไซต์จากเมนูคำสั่ง

กด Control+Shift+P หรือ Command+Shift+P (Mac) เพื่อเปิดเมนูคำสั่ง แล้วเรียกใช้คำสั่ง ล้างข้อมูลเว็บไซต์เพื่อล้างข้อมูลทั้งหมดที่เกี่ยวข้องกับหน้า ซึ่งได้แก่ โปรแกรมทำงานของบริการ, localStorage, sessionStorage, IndexedDB,Web SQL Cache, Web Cache และแคชในเว็บ

คำสั่งล้างข้อมูลเว็บไซต์

รูปที่ 3 คำสั่งล้างข้อมูลเว็บไซต์

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

หากไม่ต้องการลบข้อมูลเว็บไซต์ทั้งหมด คุณควบคุมข้อมูลที่จะถูกลบออกจากแอปพลิเคชัน > ล้างพื้นที่เก็บข้อมูลได้

แท็บ "แอปพลิเคชัน" ที่เลือก "ล้างพื้นที่เก็บข้อมูล" ไว้

รูปที่ 4 แอปพลิเคชัน > ล้างพื้นที่เก็บข้อมูล

ปัญหา Chromium ที่เกี่ยวข้อง: #942503

ดูฐานข้อมูล IndexedDB ทั้งหมด

ก่อนหน้านี้ Application > IndexedDB อนุญาตให้คุณตรวจสอบฐานข้อมูล IndexedDB จากต้นทางหลักเท่านั้น ตัวอย่างเช่น หากคุณมี <iframe> ในหน้าเว็บและ <iframe> กำลังใช้ IndexedDB คุณจะไม่เห็นฐานข้อมูลของหน้าดังกล่าว เมื่อใช้ Chrome 75 เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงฐานข้อมูล IndexedDB สำหรับต้นทางทั้งหมด

ลักษณะการทำงานเดิม หน้านี้ฝังเดโมที่ใช้ IndexedDB แต่ไม่แสดงฐานข้อมูล

รูปที่ 5 ลักษณะการทำงานเดิม หน้านี้ฝังเดโมที่ใช้ IndexedDB แต่ไม่แสดงฐานข้อมูล

ลักษณะการทำงานใหม่ ฐานข้อมูลสาธิตจะปรากฏขึ้น

รูปที่ 6 ลักษณะการทำงานใหม่ ฐานข้อมูลสาธิตจะปรากฏขึ้น

ปัญหา Chromium ที่เกี่ยวข้อง: #943770

ดูขนาดที่ไม่มีการบีบอัดของทรัพยากรเมื่อวางเมาส์เหนือรายการ

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

วางเมาส์เหนือคอลัมน์ขนาดเพื่อดูขนาดที่ไม่ได้บีบอัดของทรัพยากร

รูปที่ 7 วางเมาส์เหนือคอลัมน์ขนาดเพื่อดูขนาดที่ไม่ได้บีบอัดของทรัพยากร

ปัญหา Chromium ที่เกี่ยวข้อง: #805429

เบรกพอยท์ในบรรทัดในแผงเบรกพอยท์

สมมติว่าคุณเพิ่มเบรกพอยท์บรรทัดของโค้ดลงในบรรทัดของโค้ดต่อไปนี้

document.querySelector('#dante').addEventListener('click', logWarning);

มาระยะหนึ่งแล้วสำหรับ DevTools ให้คุณระบุได้ว่าควรหยุดชั่วคราวในเบรกพอยท์ตอนไหน ดังนี้ ที่ต้นบรรทัด ก่อนที่ document.querySelector('#dante') จะถูกเรียกใช้ หรือก่อนเรียกใช้ addEventListener('click', logWarning) ถ้าคุณเปิดใช้ทั้ง 3 อย่าง จะเป็นการสร้างเบรกพอยท์ 3 จุด ก่อนหน้านี้แผงเบรกพอยท์ไม่ได้ทำให้คุณจัดการเบรกพอยท์ทั้ง 3 รายการนี้แยกกันได้ เนื่องจาก Chrome 75 แต่ละเบรกพอยท์ในบรรทัดแต่ละเบรกพอยท์จะมีรายการของตัวเองในแผงเบรกพอยท์

ลักษณะการทำงานเดิม มีเพียงรายการเดียวในแผงเบรกพอยท์

รูปที่ 8 ลักษณะการทำงานเดิม มีเพียง 1 รายการในแผงเบรกพอยท์

ลักษณะการทำงานใหม่ มี 3 รายการในแผงเบรกพอยท์

รูปที่ 9 ลักษณะการทำงานใหม่ มี 3 รายการในแผงเบรกพอยท์

ปัญหา Chromium ที่เกี่ยวข้อง: #927961

จำนวนทรัพยากร IndexedDB และ Cache

ตอนนี้แผง IndexedDB และ Cache จะระบุจำนวนทรัพยากรทั้งหมดในฐานข้อมูลหรือแคชแล้ว

รายการทั้งหมดในฐานข้อมูล IndexedDB

รูปที่ 10 รายการทั้งหมดในฐานข้อมูล IndexedDB

ปัญหา Chromium ที่เกี่ยวข้อง: #941197, #930773, #930865

การตั้งค่าสำหรับปิดใช้เคล็ดลับเครื่องมือตรวจสอบโดยละเอียด

Chrome 73 ได้แนะนำเคล็ดลับเครื่องมือโดยละเอียดเมื่ออยู่ในโหมดตรวจสอบ

เคล็ดลับเครื่องมือโดยละเอียด

รูปที่ 11 เคล็ดลับเครื่องมือแบบละเอียดที่แสดงสี แบบอักษร ระยะขอบ และคอนทราสต์

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

เคล็ดลับเครื่องมือแบบย่อส่วน

รูปที่ 12 เคล็ดลับเครื่องมือขั้นต่ำที่แสดงเฉพาะความกว้างและความสูง

ปัญหา Chromium ที่เกี่ยวข้อง: #948417

การตั้งค่าสำหรับการสลับการเยื้องแท็บในเครื่องมือแก้ไขแผงแหล่งที่มา

การทดสอบการช่วยเหลือพิเศษพบว่ามีแท็บกับดักในเครื่องมือแก้ไข เมื่อผู้ใช้แป้นพิมพ์กด Tab ลงในเครื่องมือแก้ไข ผู้ใช้จะไม่สามารถแท็บออกจากแป้นดังกล่าวได้เนื่องจากมีการใช้แป้น Tab ในการเยื้อง หากต้องการลบล้างลักษณะการทำงานเริ่มต้นและใช้ Tab เพื่อย้ายโฟกัส ให้เปิดใช้การตั้งค่า > ค่ากำหนด > แหล่งที่มา > เปิดใช้การย้ายโฟกัสของแท็บ

เมื่อเร็วๆ นี้เราได้ทำงานมากมายเพื่อปรับปรุง UI เครื่องมือสำหรับนักพัฒนาเว็บให้ใช้งานง่ายยิ่งขึ้น ดูข้อมูลเพิ่มเติมได้ที่การไปยังส่วนต่างๆ ของเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ด้วยเทคโนโลยีความช่วยเหลือพิเศษของ Rob

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

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

ติดต่อทีม Chrome DevTools

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

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