มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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 และ JS แผนภูมิ Listener เหตุการณ์จะแสดงขึ้น

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ตัวอย่างกลุ่มข้อความ Console แบบขยาย

รูปที่ 4 ตัวอย่างกลุ่มข้อความ Console แบบขยาย

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

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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