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

Kayce Basques

ยินดีต้อนรับกลับมา ฟีเจอร์ใหม่ที่กำลังจะเปิดตัวในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome 64 มีดังนี้

อ่านต่อหรือดูบันทึกประจำรุ่นฉบับวิดีโอได้ที่ด้านล่าง

เครื่องมือตรวจสอบประสิทธิภาพ

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

  • การใช้งาน CPU
  • ขนาดฮีปของ JavaScript
  • จํานวนโหนด DOM, Listener เหตุการณ์ JavaScript, เอกสาร และเฟรมทั้งหมดในหน้า
  • การคำนวณเลย์เอาต์และรูปแบบซ้ำต่อวินาที

หากผู้ใช้รายงานว่าแอปทำงานช้าหรือกระตุก ให้ตรวจสอบเครื่องมือตรวจสอบประสิทธิภาพเพื่อหาคำตอบ

เหตุใดประสิทธิภาพการโหลดจึงสำคัญ: BookMyShow ได้รับ Conversion เพิ่มขึ้น 80% เมื่อสร้าง Progressive Web App ที่เน้นความเร็ว ดูข้อมูลเพิ่มเติม

วิธีใช้เครื่องมือตรวจสอบประสิทธิภาพ

  1. เปิดเมนูคำสั่ง

  2. เริ่มพิมพ์ Performance แล้วเลือก Show Performance Monitor

    เครื่องมือตรวจสอบประสิทธิภาพ รูปที่ 1 เครื่องมือตรวจสอบประสิทธิภาพ

  3. คลิกเมตริกเพื่อแสดงหรือซ่อน ในรูปที่ 1 แสดงแผนภูมิการใช้งาน CPU, ขนาดฮีป JS และ Listener เหตุการณ์ของ JS

ฟีเจอร์ที่เกี่ยวข้อง

  • แผงประสิทธิภาพ เดินชมเส้นทางของผู้ใช้ที่สําคัญและบันทึกทุกอย่างที่เกิดขึ้นในหน้าเว็บ รวมถึงกิจกรรม JavaScript, คําขอเครือข่าย, การใช้ CPU และอื่นๆ นอกจากนี้ยังใช้เพื่อวิเคราะห์ประสิทธิภาพการโหลดได้ด้วย ดูข้อมูลเพิ่มเติม
  • แผงการตรวจสอบ เรียกใช้ชุดการทดสอบประสิทธิภาพการโหลดและรันไทม์อัตโนมัติกับ URL ใดก็ได้ ดูข้อมูลเพิ่มเติม

หากคุณเพิ่งเริ่มวิเคราะห์ประสิทธิภาพ เราขอแนะนําให้ใช้แผงการตรวจสอบก่อน จากนั้นตรวจสอบเพิ่มเติมโดยใช้แผงประสิทธิภาพหรือเครื่องมือตรวจสอบประสิทธิภาพ

แถบด้านข้างของคอนโซล

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

ใช้แถบด้านข้างของคอนโซลเพื่อแสดงข้อความแสดงข้อผิดพลาดเท่านั้น

รูปที่ 2 ใช้แถบด้านข้างของคอนโซลเพื่อแสดงข้อความแสดงข้อผิดพลาดเท่านั้น

แถบด้านข้างของคอนโซลจะซ่อนอยู่โดยค่าเริ่มต้น คลิกแสดงแถบด้านข้างของคอนโซล แสดงแถบด้านข้างของคอนโซล เพื่อแสดง

ฟีเจอร์ที่เกี่ยวข้อง

  • กล่องข้อความตัวกรอง ป้อนข้อความบางส่วน แล้วคอนโซลจะแสดงเฉพาะข้อความที่มีข้อความนั้น นอกจากนี้ยังรองรับรูปแบบนิพจน์ทั่วไป ตัวกรองเชิงลบ และตัวกรอง URL ด้วย

จัดกลุ่มข้อความที่คล้ายกันในคอนโซล

ตอนนี้คอนโซลจะจัดกลุ่มข้อความที่คล้ายกันไว้ด้วยกันโดยค่าเริ่มต้น เช่น ในรูปที่ 3 มีข้อความ [Violation] Avoid using document.write() 27 รายการ

ตัวอย่างคอนโซลที่จัดกลุ่มข้อความที่คล้ายกันไว้ด้วยกัน

รูปที่ 3 ตัวอย่างคอนโซลที่จัดกลุ่มข้อความที่คล้ายกันไว้ด้วยกัน

คลิกกลุ่มเพื่อขยายและดูอินสแตนซ์ข้อความแต่ละรายการ

ตัวอย่างกลุ่มข้อความคอนโซลที่ขยาย

รูปที่ 4 ตัวอย่างกลุ่มข้อความคอนโซลที่ขยาย

ยกเลิกการเลือกช่องทำเครื่องหมายจัดกลุ่มที่คล้ายกันเพื่อปิดใช้ฟีเจอร์นี้

ฟีเจอร์ที่เกี่ยวข้อง

  • คุณจัดกลุ่มข้อความคอนโซลของคุณเองได้ด้วย console.group()

การลบล้างในเครื่อง

อ๊ะ เดิมเรากำหนดเวลาเปิดตัวฟีเจอร์นี้ใน Chrome 64 แต่ได้เลื่อนเวลาให้ใกล้กับกำหนดเวลาเพื่อปรับปรุงข้อบกพร่องบางอย่าง ทั้งนี้ UI ของ "มีอะไรใหม่" ไม่ได้อัปเดตทันเวลา ขออภัย

ฟีเจอร์นี้จะพร้อมใช้งานใน Chrome 65 ซึ่งจะเปิดตัวประมาณ 6 สัปดาห์หลังจาก Chrome 64 ดูข้อมูลเพิ่มเติมได้ในการลบล้างในเครื่อง หากใช้ Windows หรือ Mac คุณสามารถลองใช้ Chrome 65 ได้แล้วตอนนี้โดยดาวน์โหลด Chrome Canary

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

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

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

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

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

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