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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

ผู้ดูข้อความไบนารี WebSocket

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

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

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

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

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

    หลังจากคลิก WS จะเห็นการเชื่อมต่อ WebSockety เท่านั้น

    รูปที่ 5 หลังจากคลิก WS จะเห็นการเชื่อมต่อ WebSockety เท่านั้น

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

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

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

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

    แท็บข้อความ

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

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

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

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

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

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

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

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

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

  1. โฟกัสเครื่องมือสำหรับนักพัฒนาเว็บ แล้วกด 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

การกรองตาม เป็น:เริ่มต้นโดยพนักงานบริการ

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

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

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

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

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

ขณะนี้ การบันทึกประสิทธิภาพจะมาร์กอัปงานที่ใช้เวลานานและ First Paint

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

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

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

การวางเมาส์เหนืองานยาวในการบันทึกการแสดง

รูปที่ 14 การวางเมาส์เหนืองานยาวในการบันทึกการแสดง

การแสดงผลครั้งแรกในส่วนการจับเวลา

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

การแสดงผลครั้งแรกในส่วนการจับเวลา

รูปที่ 15 การแสดงผลครั้งแรกในส่วนการจับเวลา

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

ดูเริ่มต้นใช้งานการดูและเปลี่ยนแปลง DOM สําหรับทัวร์ชมเกี่ยวกับ DOM ใหม่ๆ

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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