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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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