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

Kayce Basques

ยินดีต้อนรับกลับมา มาดูกันว่ามีอะไรใหม่บ้าง

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

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

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

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

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

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

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

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

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

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

เครื่องมือดูข้อความไบนารี WebSocket

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

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

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

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

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

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

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

  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

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

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

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

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

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

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

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

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

First Paint ในส่วน "เวลา"

ตอนนี้ส่วนการจับเวลาของการบันทึกประสิทธิภาพจะระบุ First Paint

First Paint ในส่วน "เวลา"

รูปที่ 15 First Paint ในส่วน "เวลา"

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

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

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

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

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

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

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

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