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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium #935267

พร็อพเพอร์ตี้ส่วนตัวเมื่อดูวัตถุ

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

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

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

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

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

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

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

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

ปัญหา Chromium #927726

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

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

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

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

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

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