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

Kayce Basques

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

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

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

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

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

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

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

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

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

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

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

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

   

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

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

   

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

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

   

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

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

   

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

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

   

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

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

รูปที่ 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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