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

Kayce Basques
Kayce Basques
X GitHub

สวัสดี ต่อไปนี้คือสิ่งใหม่ใน 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 Worker 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

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

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

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

รูปที่ 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 และแคช

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

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

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

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

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

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

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

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

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

เคล็ดลับเครื่องมือแบบเรียบง่าย

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

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

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

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

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

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

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

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

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

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

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