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

Kayce Basques

สวัสดี ต่อไปนี้คือฟีเจอร์ใหม่ใน Chrome DevTools ใน 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, Web SQL Cache และแคชในเว็บ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ลักษณะการทำงานแบบเก่า แผงจุดหยุดพักมีเพียงรายการเดียว

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

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

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

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

จํานวนทรัพยากร IndexedDB และแคช

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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