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

Sofia Emelianova
Sofia Emelianova
GitHub

ฉบับ Google I/O 2025

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

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

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

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

แก้ไขและบันทึกการเปลี่ยนแปลง CSS ในพื้นที่ทำงานด้วย Gemini

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

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

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

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

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

ดูวิธีการทำงานของเครื่องมือนี้กับ JavaScript

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

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

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

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

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

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

กำกับเนื้อหาเกี่ยวกับสิ่งที่พบเกี่ยวกับประสิทธิภาพด้วย Gemini

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

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

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

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

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

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

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

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

JavaScript ซ้ำ

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

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

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

JavaScript เดิม

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

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

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

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

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

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

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

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