มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ของ Chrome 137

Sofia Emelianova
Sofia Emelianova
GitHub

ฉบับ Google I/O 2025

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome จะมีบทบาทสำคัญในงาน Google I/O ปีนี้ โดยจะมีทั้งเซสชันสดและเซสชันที่บันทึกไว้

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

นอกจากนี้ อย่าลืมเข้าร่วมเซสชัน "มีอะไรใหม่บนเว็บ" ของ Rachel Andrew ในวันที่ 20 พฤษภาคม 2025 เวลา 16:30 น. (PT)

ดูวิดีโอล่าสุดของเราเพื่อดูภาพรวมคร่าวๆ ของไฮไลต์ล่าสุด

แก้ไขและบันทึกการเปลี่ยนแปลง CSS ใน Workspace พร้อม Gemini

ตอนนี้คุณสามารถให้ Gemini แก้ไขและแก้ไข CSS ให้คุณได้ด้วยการคลิกเพียงไม่กี่ครั้ง และด้วยโฟลเดอร์ Workspace ที่เชื่อมต่อ คุณจะบันทึกการเปลี่ยนแปลงกลับไปยังไฟล์ต้นฉบับในคอมพิวเตอร์ได้

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

เมื่อเชื่อมต่อโฟลเดอร์ Workspace แล้ว ให้คลิกขอความช่วยเหลือจาก AI ในแผงองค์ประกอบ ขอให้ Gemini แก้ไข CSS คลิกดำเนินการต่อเพื่อทดสอบการเปลี่ยนแปลงแบบเรียลไทม์ จากนั้นขยายการเปลี่ยนแปลงที่ยังไม่ได้บันทึก คลิกใช้กับ Workspace ตรวจสอบความแตกต่าง แล้วคลิกบันทึกทั้งหมด

เชื่อมต่อโฟลเดอร์พื้นที่ทำงานและบันทึกการเปลี่ยนแปลงกลับไปยังไฟล์แหล่งข้อมูล

ตอนนี้คุณสามารถเชื่อมต่อโฟลเดอร์พื้นที่ทำงานโดยอัตโนมัติ (หรือด้วยตนเอง) เพื่อให้ DevTools บันทึกการเปลี่ยนแปลง JavaScript, HTML และ CSS กลับไปยังไฟล์ต้นฉบับที่จัดเก็บไว้ในคอมพิวเตอร์ได้

ดูวิธีการทำงานกับ JavaScript

ปัญหาเกี่ยวกับ Chromium: 404170628

ถาม Gemini เกี่ยวกับข้อมูลเชิงลึกเกี่ยวกับประสิทธิภาพ

ตอนนี้คุณสามารถเริ่มแชทกับ Gemini ได้ด้วยการคลิกปุ่มเพียงปุ่มเดียวเพื่อตรวจสอบและดำเนินการตามข้อมูลเชิงลึกด้านประสิทธิภาพต่อไปนี้

  • LCP ตามระยะ
  • การค้นพบคำขอ LCP
  • คำขอที่บล็อกการแสดงผล
  • สาเหตุของการเปลี่ยนแปลงเลย์เอาต์
  • เวลาในการตอบสนองต่อคำขอเอกสาร

ก่อนและหลังเพิ่มปุ่ม "ถาม AI" ลงในข้อมูลเชิงลึกในแผงประสิทธิภาพ

โปรดแสดงความคิดเห็นเกี่ยวกับฟีเจอร์นี้ได้ที่ crbug.com/371170842

ใส่คำอธิบายประกอบผลการค้นหาด้านประสิทธิภาพด้วย Gemini

ตอนนี้คุณขอให้ Gemini สร้างหมายเหตุเกี่ยวกับเหตุการณ์ในการติดตามประสิทธิภาพได้แล้ว

ดับเบิลคลิกเหตุการณ์ในแทร็กหลัก แล้วคลิกสร้างป้ายกำกับข้างช่องป้อนข้อมูล Gemini สามารถแนะนำป้ายกำกับโดยอิงตาม Stack Trace และบริบท

เพิ่มภาพหน้าจอลงในแชทกับ Gemini

ในแผงความช่วยเหลือจาก AI ตอนนี้คุณสามารถคลิกปุ่ม ถ่ายภาพหน้าจอเพื่อจับภาพหน้าจอของหน้าเว็บและส่งไปยังแชทกับ Gemini ได้แล้ว

คุณสามารถใช้ภาพหน้าจอเพื่อระบุบริบทภาพเพิ่มเติมในพรอมต์ได้ เช่น เพื่อตรวจสอบว่าปุ่มที่มองเห็นทั้งหมดมีระยะห่างเท่ากันหรือไม่

ภาพก่อนและหลังเพิ่มปุ่ม "ถ่ายภาพหน้าจอ" ลงในแผง "ความช่วยเหลือจาก AI"

ข้อมูลเชิงลึกใหม่ในแผงประสิทธิภาพ

เวอร์ชันนี้จะเพิ่มข้อมูลเชิงลึกใหม่ 2 รายการลงในแผงประสิทธิภาพ ได้แก่ JavaScript ที่ซ้ำกันและ JavaScript เดิม

JavaScript ที่ซ้ำกัน

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

ข้อมูลเชิงลึก "JavaScript ที่ซ้ำกัน" ในแผงประสิทธิภาพ

นอกจากนี้ คุณยังคลิกดูแผนผังแบบต้นไม้ในข้อมูลเชิงลึกเพื่อสำรวจการขึ้นต่อกันของ JavaScript ได้ด้วย

JavaScript เดิม

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

ข้อมูลเชิงลึก "JavaScript เดิม" ในแผงประสิทธิภาพ

ตอนนี้การคาดเดารองรับแท็กกฎแล้ว

ตอนนี้ Application > Speculative loads จะแสดงแท็กแทน URL สำหรับชุดกฎ หากมีแท็ก

URL ของชุดกฎก่อนและหลังการแทนที่ด้วยแท็ก

ปัญหาใน Chromium: 393408589

Lighthouse 12.6.0

ตอนนี้แผง Lighthouse ทำงานด้วย Lighthouse 12.6.0

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

ก่อนและหลังเพิ่มตัวเลือกในการเปลี่ยนไปใช้ข้อมูลเชิงลึกในรายงาน Lighthouse

ดูรายการการเปลี่ยนแปลงทั้งหมดด้วย

ดูข้อมูลพื้นฐานเกี่ยวกับการใช้แผง Lighthouse ในเครื่องมือสำหรับนักพัฒนาเว็บได้ที่ Lighthouse: เพิ่มประสิทธิภาพความเร็วของเว็บไซต์

ปัญหาใน Chromium: 40543651

ไฮไลต์อื่นๆ

การแก้ไขและการปรับปรุงที่น่าสนใจในรุ่นนี้มีดังนี้

  • เครือข่าย: เพิ่มการแยกวิเคราะห์สำหรับรูปแบบที่รู้จักของการกำหนดเวลาของเซิร์ฟเวอร์
  • ตอนนี้คุณยกเลิกการเลือกแถวในตารางได้แล้วด้วย Cmd/Ctrl + คลิก (ปัญหา Chromium: 409474445)
  • ประสิทธิภาพ > ข้อมูลเชิงลึก > ใช้ระยะเวลาแคชที่มีประสิทธิภาพ จะไม่สนใจชิ้นงานที่มี TTL ตั้งแต่ 30 วันขึ้นไป

การช่วยเหลือพิเศษ

เวอร์ชันนี้มีการปรับปรุงการช่วยเหลือพิเศษดังต่อไปนี้

  • ประสิทธิภาพ: ตอนนี้ลูกศรผู้เริ่มต้นในร่องรอยจะมองเห็นได้ชัดเจนยิ่งขึ้น
  • องค์ประกอบ: ตอนนี้คุณสามารถสลับมุมมองโครงสร้างการช่วยเหลือพิเศษแบบเต็มหน้าด้วยแป้นพิมพ์ลัด A (ปัญหาใน Chromium: 40888478)

  • ตอนนี้โปรแกรมอ่านหน้าจอจะประกาศสิ่งต่างๆ เช่น

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

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

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

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

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

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

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