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

Kayce Basques
Kayce Basques
X GitHub

ยินดีต้อนรับกลับมา สิ่งที่อัปเดตใหม่มีดังนี้

วิดีโอเวอร์ชันของหน้านี้

ไฮไลต์โหนดทั้งหมดที่ได้รับผลกระทบจากพร็อพเพอร์ตี้ CSS

วางเมาส์เหนือพร็อพเพอร์ตี้ CSS ที่ส่งผลต่อรูปแบบกล่องของโหนด เช่น padding หรือ margin เพื่อ ไฮไลต์โหนดทั้งหมดที่ได้รับผลกระทบจากการประกาศนั้น

การวางเมาส์เหนือพร็อพเพอร์ตี้ระยะขอบจะไฮไลต์โหนดทั้งหมดที่ได้รับผลกระทบจากการประกาศนั้น

รูปที่ 1 การวางเมาส์เหนือพร็อพเพอร์ตี้ margin จะไฮไลต์ขอบของโหนดทั้งหมดที่ได้รับผลกระทบจากประกาศนั้น

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

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

ตอนนี้หมวดหมู่ PWA ของรายงานใช้ระบบการให้คะแนนป้ายแล้ว

ระบบการให้คะแนนป้ายใหม่สำหรับหมวดหมู่ PWA

รูปที่ 3 ระบบการให้คะแนนป้ายใหม่สำหรับหมวดหมู่ PWA

โปรแกรมดูข้อความไบนารี WebSocket

วิธีดูเนื้อหาของข้อความ WebSocket แบบไบนารี

  1. เปิดแผงเครือข่าย ดูตรวจสอบกิจกรรมเครือข่ายเพื่อเรียนรู้พื้นฐานของการวิเคราะห์ กิจกรรมเครือข่าย

    แผงเครือข่าย

    รูปที่ 4 แผงเครือข่าย

  2. คลิก WS เพื่อกรองทรัพยากรทั้งหมดที่ไม่ได้เป็นการเชื่อมต่อ WebSocket

    หลังจากคลิกแล้ว จะแสดงเฉพาะการเชื่อมต่อ WebSocket ของ WS

    รูปที่ 5 หลังจากคลิกแล้ว จะแสดงเฉพาะการเชื่อมต่อ WebSocket ของ WS

  3. คลิกชื่อของการเชื่อมต่อ WebSocket เพื่อตรวจสอบ

    การตรวจสอบการเชื่อมต่อ WebSocket

    รูปที่ 6 การตรวจสอบการเชื่อมต่อ WebSocket

  4. คลิกแท็บข้อความ

    แท็บข้อความ

    รูปที่ 7 แท็บข้อความ

  5. คลิกรายการข้อความไบนารีรายการใดรายการหนึ่งเพื่อตรวจสอบ

    การตรวจสอบข้อความไบนารี

    รูปที่ 8 การตรวจสอบข้อความไบนารี

ใช้เมนูแบบเลื่อนลงที่ด้านล่างของโปรแกรมดูเพื่อแปลงข้อความเป็น Base64 หรือ UTF-8 คลิก คัดลอกไปยังคลิปบอร์ด คัดลอกไปยังคลิปบอร์ด เพื่อคัดลอก ข้อความไบนารีไปยังคลิปบอร์ด

ดูข้อความไบนารีเป็น Base64

รูปที่ 9 ดูข้อความไบนารีเป็น Base64

บันทึกภาพหน้าจอของพื้นที่ที่เลือกในเมนูคำสั่ง

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

  1. โฟกัส DevTools แล้วกด Control+Shift+P หรือ Command+Shift+P (Mac) เพื่อเปิดเมนูคำสั่ง

    เมนูคำสั่ง

    รูปที่ 10 เมนูคำสั่ง

  2. เริ่มพิมพ์ area เลือกจับภาพหน้าจอเฉพาะพื้นที่ แล้วกด Enter

  3. ลากเมาส์เหนือส่วนของวิวพอร์ตที่ต้องการจับภาพหน้าจอ

    เลือกส่วนของวิวพอร์ตที่จะจับภาพหน้าจอ

    รูปที่ 11 เลือกส่วนของวิวพอร์ตที่จะจับภาพหน้าจอ

ตัวกรอง Service Worker ในแผงเครือข่าย

พิมพ์ is:service-worker-initiated หรือ is:service-worker-intercepted ในกล่องข้อความตัวกรองของแผงเครือข่าย เพื่อดูคำขอที่เกิดจาก (initiated) หรืออาจได้รับการแก้ไข (intercepted) โดย Service Worker

การกรองตาม is:service-worker-initiated

รูปที่ 12 การกรองตาม is:service-worker-initiated

การกรองตาม is:service-worker-intercepted

รูปที่ 13 การกรองตาม is:service-worker-intercepted

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

การอัปเดตแผงประสิทธิภาพ

ตอนนี้การบันทึกประสิทธิภาพจะมาร์กอัป Long Task และ First Paint แล้ว

ดูตัวอย่างการใช้แผงประสิทธิภาพเพื่อวิเคราะห์ประสิทธิภาพการโหลดหน้าเว็บได้ที่ลดการทำงานของเทรดหลัก

งานที่ใช้เวลานานในการบันทึกประสิทธิภาพ

ตอนนี้การบันทึกประสิทธิภาพจะแสดงงานที่ใช้เวลานาน

การวางเมาส์เหนือ Long Task ในการบันทึกประสิทธิภาพ

รูปที่ 14 การวางเมาส์เหนือ Long Task ในการบันทึกประสิทธิภาพ

First Paint ในส่วนการจับเวลา

ส่วนระยะเวลาของการบันทึกประสิทธิภาพจะทำเครื่องหมาย First Paint

First Paint ในส่วนการจับเวลา

รูปที่ 15 First Paint ในส่วนการจับเวลา

บทแนะนำ DOM ใหม่

ดูเริ่มต้นใช้งานการดูและการเปลี่ยน DOM เพื่อดูฟีเจอร์ที่เกี่ยวข้องกับ DOM แบบลงมือปฏิบัติ

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

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

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

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

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

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