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

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

รูปที่ 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);

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

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

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

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

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