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

Kayce Basques

คัดลอกรูปแบบขององค์ประกอบ

คลิกขวาที่โหนดในแผนผัง DOM เพื่อคัดลอก CSS ของโหนด DOM นั้นไปยังคลิปบอร์ด

รูปที่ 1 คัดลอกรูปแบบองค์ประกอบ

ขอขอบคุณ Adam Argyle และ VisBug สำหรับแรงบันดาลใจ

แสดงภาพการเปลี่ยนเลย์เอาต์

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

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

1. เปิดเมนูคำสั่ง
2. เริ่มพิมพ์ Rendering
3. เรียกใช้คำสั่งแสดงการแสดงผล
4. เปิดใช้ช่องทำเครื่องหมายบริเวณการเปลี่ยนเลย์เอาต์ เมื่อคุณโต้ตอบกับหน้าเว็บ การเปลี่ยนเลย์เอาต์ ไฮไลต์สีน้ำเงิน

รูปที่ 2 การเปลี่ยนเลย์เอาต์

ปัญหาเกี่ยวกับ Chromium #961846

Lighthouse 5.1 ในแผงการตรวจสอบ

แผงการตรวจสอบกำลังทำงานอยู่ Lighthouse 5.1 การตรวจสอบใหม่มีดังนี้

• ระบุ apple-touch-icon ที่ถูกต้อง ตรวจสอบว่าเพิ่ม PWA ไปยังหน้าจอหลักของ iOS ได้
• รักษาจำนวนคำขอและขนาดไฟล์ให้ต่ำ รายงานจำนวนคำขอเครือข่ายทั้งหมดและ สำหรับหมวดหมู่ต่างๆ เช่น เอกสาร สคริปต์ สไตล์ชีต รูปภาพ และอื่นๆ
• First Input Delay สูงสุดที่อาจเกิดขึ้น วัดเวลาสูงสุดที่เป็นไปได้ระหว่าง การโต้ตอบสำหรับหน้าแรก และการตอบสนองของเบราว์เซอร์ต่อการโต้ตอบนั้น โปรดทราบว่าเมตริกนี้ แทนที่เมตริกเวลาในการตอบสนองต่ออินพุตโดยประมาณ First Input Delay สูงสุดที่อาจเกิดขึ้นไม่คำนึงถึง เกี่ยวกับคะแนนหมวดหมู่ประสิทธิภาพ

รูปที่ 3 UI ใหม่ของแผงการตรวจสอบ

เวอร์ชันโหนดและ CLI ของ Lighthouse 5.1 มีฟีเจอร์หลักใหม่ 3 รายการที่ควรลองใช้

• งบประมาณด้านประสิทธิภาพ ป้องกันไม่ให้เว็บไซต์ของคุณเกิดปัญหาซ้ำเมื่อเวลาผ่านไปด้วยการระบุคำขอ จำนวนและขนาดไฟล์ที่หน้าเว็บไม่ควรเกิน
• ปลั๊กอิน ขยาย Lighthouse ด้วยการตรวจสอบที่คุณกำหนดเอง
• สแต็กแพ็ก เพิ่มการตรวจสอบที่ปรับแต่งให้เหมาะกับ Technology Stack ที่เฉพาะเจาะจง WordPress Stack Pack จัดส่งก่อน React และ AMP Stack Pack กำลังพัฒนา

การซิงค์ธีมระบบปฏิบัติการ

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

แป้นพิมพ์ลัดสำหรับเปิดเครื่องมือแก้ไขเบรกพอยท์

กด Control+Alt+B หรือ Command+Option+B (Mac) เมื่อโฟกัสที่เครื่องมือแก้ไขของแผงแหล่งที่มา เพื่อเปิดเครื่องมือแก้ไขเบรกพอยท์ ใช้ตัวแก้ไขเบรกพอยท์เพื่อสร้างจุดตรวจสอบและ เบรกพอยท์แบบมีเงื่อนไข

รูปที่ 4 เครื่องมือแก้ไขเบรกพอยท์

โหลดแคชล่วงหน้าในแผงเครือข่าย

ตอนนี้คอลัมน์ขนาดของแผงเครือข่ายจะระบุว่า (prefetch cache) เมื่อโหลดทรัพยากร ที่ดึงข้อมูลแคชล่วงหน้า การดึงข้อมูลล่วงหน้าคือฟีเจอร์แพลตฟอร์มเว็บแบบใหม่เพื่อเพิ่มความเร็วให้กับหน้าถัดไป โหลดขึ้นมา ฉันใช้... รายงานว่าฟีเจอร์ดังกล่าวได้รับการรองรับในเบราว์เซอร์ทั่วโลก 83.33% ตั้งแต่เดือนกรกฎาคม 2019

รูปที่ 5 คอลัมน์ขนาดแสดงว่ามาจาก prefetch2.html และ prefetch2.css (prefetch cache)

ดูการสาธิตการดึงข้อมูลล่วงหน้าเพื่อลองใช้งาน

ปัญหาเกี่ยวกับ Chromium #935267

พร็อพเพอร์ตี้ส่วนตัวเมื่อดูออบเจ็กต์

ตอนนี้คอนโซลจะแสดงช่องคลาสส่วนตัวในตัวอย่างออบเจ็กต์

รูปที่ 6 Chrome เวอร์ชันเก่าทางด้านซ้ายไม่แสดงช่อง #color เมื่อตรวจสอบ ในขณะที่เวอร์ชันใหม่ทางขวามี

การแจ้งเตือนและข้อความ Push ในแผงแอปพลิเคชัน

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

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

รูปที่ 7 แผงข้อความ Push และการแจ้งเตือนใหม่ในแผงแอปพลิเคชัน

ปัญหาเกี่ยวกับ Chromium #927726

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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