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

Sofia Emelianova
Sofia Emelianova
GitHub

เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ที่เชื่อถือได้และมีประสิทธิภาพมากขึ้น

ในเวอร์ชันนี้ Chrome DevTools ให้ความสำคัญกับความเป็นเลิศของผลิตภัณฑ์ ซึ่งรวมถึงการจัดการปัญหาที่ทราบแล้วมากมาย ตั้งแต่ข้อบกพร่องด้านภาพที่เกิดขึ้นมานาน ข้อกังวลด้านความสามารถในการใช้งาน และความไม่สอดคล้องกันในการออกแบบ ไปจนถึงปัญหาด้านประสิทธิภาพและการทำงาน โดยรวมแล้ว เราลดจำนวนปัญหาที่เปิดอยู่ได้ 27%

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

เบื้องหลังการทำงาน เราได้พยายามอย่างเต็มที่เพื่อเพิ่มความครอบคลุมของการทดสอบ ตรวจสอบการทดสอบที่ซับซ้อนซึ่งล้มเหลว ย้ายข้อมูลการทดสอบไปยังรากฐานที่แข็งแกร่งยิ่งขึ้น และแก้ไขข้อบกพร่องที่เราค้นพบระหว่างทาง เราลดจำนวนปัญหาที่เกี่ยวข้องกับการทดสอบได้ 54%

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

อัปโหลดรูปภาพในความช่วยเหลือจาก AI เพื่อจัดสไตล์

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

เริ่มการสนทนาจากแผงองค์ประกอบโดยเลือกองค์ประกอบ DOM แล้วคลิก ถาม AI เพื่อระบุองค์ประกอบเป็นบริบทการสนทนา จากนั้นคลิก เพิ่มรูปภาพในช่องป้อนข้อมูล

ก่อนและหลังการรองรับการอัปโหลดรูปภาพโดยพลการ

เพิ่มส่วนหัวของคำขอลงในตารางในเครือข่าย

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

ก่อนและหลังเพิ่มตัวเลือก "ส่วนหัวของคำขอ" ลงในเมนู

ปัญหาใน Chromium: 397481040

ดูไฮไลต์จากงาน Google I/O 2025

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

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

ไฮไลต์อื่นๆ

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

  • แอปพลิเคชัน: ตอนนี้มีกล่องโต้ตอบการยืนยันเพื่อล้างที่เก็บออบเจ็กต์ IndexedDB เนื่องจากเป็นการดำเนินการที่ย้อนกลับไม่ได้ (crbug.com/326987147)
  • แหล่งที่มา: ป้ายจุดบันทึกและเบรกพอยต์แบบมีเงื่อนไขข้างบรรทัดโค้ดจะแสดงเคล็ดลับเครื่องมือเมื่อวางเมาส์พร้อมข้อความบันทึกหรือเงื่อนไขที่เกี่ยวข้อง (crbug.com/40266230)

  • ประสิทธิภาพ:

    • ข้อมูลเชิงลึกสาเหตุของการเปลี่ยนเลย์เอาต์จะแสดงลิงก์ไปยังรูปภาพที่ไม่มีขนาด (crbug.com/416449602)
    • ข้อมูลเชิงลึกการค้นพบคำขอ LCP จะแสดงความล่าช้าในการโหลดรูปภาพหลังจากจุดเริ่มต้นแรกสุด
    • การจำกัดอัตรา: แก้ไขรูปแบบการตั้งค่าการจำกัดอัตราที่ล้าสมัยซึ่งผู้ใช้บางรายจัดเก็บไว้ในเครื่อง
    • บันทึกเหตุการณ์: การกรองเร็วขึ้น (crbug.com/40783421)

  • ภาพเคลื่อนไหว: เลิกใช้ภาพหน้าจอตัวอย่างเนื่องจากการคลิกเพื่อดูตัวอย่างกลุ่มภาพเคลื่อนไหวจะมอบประสบการณ์ที่คล้ายกันและดียิ่งขึ้น (crbug.com/330179643)

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

    • เพิ่ม aria-label ลงในแถบด้านข้างแหล่งที่มา > เบรกพอยท์ DOM เมื่อมี
    • แก้ไขการไปยังส่วนต่างๆ ของแป้นพิมพ์โดยใช้ Shift + Tab ภายในช่องข้อความนิพจน์สดในคอนโซล (crbug.com/408398435, crbug.com/420344137)
    • ตอนนี้การตั้งค่ารองรับแป้นพิมพ์ลัดสำหรับซูมเข้า/ออก/รีเซ็ตแล้ว: Cmd/Ctrl + +/-/0 (crbug.com/41484555)
    • องค์ประกอบ > รูปแบบ: ตอนนี้ไอคอนคำแนะนำและคำเตือน CSS (crbug.com/40706851) และนาฬิกามุมสามารถโฟกัสด้วยแป้นพิมพ์ได้แล้ว (crbug.com/401212624, crbug.com/401213524)

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

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

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

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

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

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