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

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

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

การตรวจสอบประสิทธิภาพ

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

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

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

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

วิธีใช้การตรวจสอบประสิทธิภาพ

  1. เปิดเมนูคำสั่ง
  2. เริ่มพิมพ์ Performance แล้วเลือก Show Performance Monitor

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59