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

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

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

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

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

แท็บ "Application" ที่เลือก "Clear Storage"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เคล็ดลับเครื่องมือสั้นๆ

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

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

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

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

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

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

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

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

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

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