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

Kayce Basques
Kayce Basques
X GitHub

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

คลิกขวาที่โหนดในแผนผัง 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 สูงสุดที่อาจเกิดขึ้นจะไม่นำมาพิจารณา ในคะแนนหมวดหมู่ประสิทธิภาพ

UI ของแผงการตรวจสอบใหม่

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

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

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

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

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

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

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

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

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

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

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

คอลัมน์ขนาดแสดงว่าทรัพยากรมาจากแคชที่ดึงข้อมูลล่วงหน้า

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

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

ปัญหา #935267 ใน Chromium

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

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

เมื่อตรวจสอบออบเจ็กต์ ตอนนี้คอนโซลจะแสดงฟิลด์ส่วนตัว เช่น "#color"

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

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

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

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

แผงการแจ้งเตือนและข้อความ Push ใหม่

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

ปัญหา Chromium #927726

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

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

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

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

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

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