มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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) เพื่อเปิดเมนูคำสั่งแล้วเรียกใช้ คำสั่ง Clear Site Data เพื่อล้างข้อมูลทั้งหมดที่เกี่ยวข้องกับหน้า ซึ่งรวมถึง Service Worker, localStorage, sessionStorage, IndexedDB, Web SQL, คุกกี้, แคช, และแคชของแอปพลิเคชัน

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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