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

การอัปเดตเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บ

เราได้ปรับปรุงเซิร์ฟเวอร์ MCP ของเครื่องมือสำหรับนักพัฒนาเว็บหลายอย่างและเปิดตัว v0.11.0

  • ตอนนี้คุณสามารถอ้างอิงองค์ประกอบและคำขอเครือข่ายที่เลือกไว้ในแผงองค์ประกอบและเครือข่ายได้แล้วเมื่อแจ้งพรอมต์ในไคลเอ็นต์ MCP (Gemini CLI, Cursor, ...)
  • ตอนนี้list_console_messagesเครื่องมือนี้ยังรวมปัญหาที่พบในแผงปัญหาด้วย
  • ตอนนี้คุณสามารถใช้เครื่องมือ press_key ใหม่เพื่อแก้ไขข้อบกพร่องของเหตุการณ์ในแป้นพิมพ์ที่ไม่เกี่ยวข้องกับองค์ประกอบของแบบฟอร์มได้แล้ว
  • ตอนนี้คุณสามารถบันทึกภาพรวมของโครงสร้างการช่วยเหลือพิเศษลงในดิสก์ได้แล้ว
  • ตอนนี้คุณโหลดหน้าเว็บซ้ำได้แล้ว โดยจะเลือกไม่สนใจแคชก็ได้
  • กำหนดค่า --user-data-dir Flag เพื่อใช้โปรไฟล์ Chrome ที่มีอยู่

ดูรายการการเปลี่ยนแปลงและการแก้ไขข้อบกพร่องทั้งหมดได้ในบันทึกการเปลี่ยนแปลงแบบสาธารณะใน GitHub และดูข้อมูลเพิ่มเติมเกี่ยวกับเซิร์ฟเวอร์ MCP ของ DevTools ในบล็อกโพสต์ประกาศ

การแชร์การติดตามที่ปรับปรุงแล้ว

กล่องโต้ตอบการแชร์การติดตามในแผงประสิทธิภาพ

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

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

ดูข้อมูลเกี่ยวกับสิ่งที่ควรแชร์และสิ่งที่ควรเก็บไว้เป็นส่วนตัวในเอกสารประกอบฉบับปรับปรุง

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

การรองรับ @starting-style

ตอนนี้แผงองค์ประกอบรองรับการแก้ไขข้อบกพร่องของกฎ CSS @starting-style ใหม่ ซึ่งจำเป็นต่อการสร้างภาพเคลื่อนไหวตอนเข้า

ตอนนี้คุณจะเห็นเครื่องหมาย starting-style ในโครงสร้าง Elements ข้างองค์ประกอบที่เกี่ยวข้อง สลับสถานะ starting-style ขององค์ประกอบได้โดยคลิก ปุ่ม และตรวจสอบและแก้ไขข้อบกพร่องของบล็อก @starting-style ในแท็บ Styles

วิดเจ็ตเอดิเตอร์สำหรับจอแสดงผล: เมสันรี

หากคุณทดลองใช้เลย์เอาต์ CSS Masonry ตอนนี้คุณสามารถใช้วิดเจ็ตเอดิเตอร์เดียวกันกับที่คุ้นเคยจากเลย์เอาต์ display: flex และ grid เพื่อสลับตัวเลือกการจัดแนวต่างๆ ในเลย์เอาต์ masonry ได้อย่างรวดเร็ว

Lighthouse 13

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

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

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

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

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

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

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

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