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

Matthias Rohmer

คำแนะนำโค้ดจาก Gemini

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

ฟีเจอร์คำแนะนำโค้ดในแผงคอนโซลและแผงแหล่งที่มา

หากต้องการเปิดใช้ฟีเจอร์นี้ ให้ไปที่การตั้งค่า > นวัตกรรม AI แล้วสลับ คำแนะนำโค้ด

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

นับตั้งแต่เปิดตัวเวอร์ชันตัวอย่างแบบสาธารณะของเซิร์ฟเวอร์ DevTools MCP ด้วย v0.2.1 เราได้ทำการปรับปรุงต่างๆ โดยมี การมีส่วนร่วมจากชุมชนและเปิดตัว v0.9.0

  • เราได้ขยายการรองรับ Node.js ไปจนถึง Node.js 20
  • คำขอเครือข่ายและข้อความคอนโซลสามารถแบ่งหน้าเพื่อบันทึกโทเค็นและกรองตามประเภทคำขอ (เช่น สคริปต์ สไตล์ชีต รูปภาพ) และประเภทข้อความ (บันทึก คำเตือน ข้อผิดพลาด)
  • คุณสามารถส่งออกภาพหน้าจอไปยังเส้นทางที่เฉพาะเจาะจงและในรูปแบบต่างๆ ได้
  • หมวดหมู่เครื่องมือที่กำหนดค่าได้ช่วยให้คุณจัดระเบียบความสามารถที่ แสดงได้ ซึ่งจะช่วยลดเสียงรบกวนที่ไม่จำเป็น
  • ตอนนี้คุณส่งอาร์กิวเมนต์การเปิดตัวไปยังอินสแตนซ์ Chrome ที่เซิร์ฟเวอร์ MCP ใช้ได้แล้ว

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

เข้าถึงความช่วยเหลือจาก AI ได้เร็วขึ้น

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

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

จุดแรกเข้าใหม่สำหรับความช่วยเหลือจาก AI ในเครื่องมือสำหรับนักพัฒนาเว็บ

แก้ไขข้อบกพร่องของการติดตามประสิทธิภาพแบบเต็มด้วย Gemini

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

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

ในทำนองเดียวกัน ข้อมูลเชิงลึกทั้งหมดในประสิทธิภาพ > ข้อมูลเชิงลึกพร้อมให้คุณใช้แชทกับ Gemini แล้ว

สลับการวางแนวลิ้นชัก

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

เพิ่มแผงอื่นๆ ลงในลิ้นชักจาก ⋮ > เครื่องมือเพิ่มเติม

ปุ่มเปิด/ปิดใหม่ในลิ้นชักเพื่อเปลี่ยนการวางแนว

โปรแกรมนักพัฒนาซอฟต์แวร์ของ Google

ตอนนี้ Google Developer Program ได้ผสานรวมเข้ากับเครื่องมือสำหรับนักพัฒนาเว็บแล้ว โดยมีลิงก์โดยตรงสำหรับการจัดการโปรไฟล์และป้ายใหม่ ให้รับ

การควบคุมโปรไฟล์นักพัฒนาแอปของ Google ในการตั้งค่าเครื่องมือสำหรับนักพัฒนาเว็บ

ป้ายเป็นฟีเจอร์แบบเลือกใช้ หากต้องการเปิดใช้ป้าย ให้ไปที่การตั้งค่า > ค่ากำหนด > บัญชี แล้วสลับรับป้ายเป็นเปิด

ไฮไลต์อื่นๆ

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

  • ตอนนี้แผงแอปพลิเคชันรองรับการตรวจสอบพื้นที่เก็บข้อมูลสำหรับผู้ปฏิบัติงานทุกประเภท รวมถึง Service Worker, Shared Worker และ Dedicated Worker
  • :target-current จะแสดงในแผงสไตล์
  • ตอนนี้แผงเครือข่ายสามารถกรองคำขอตามIs ad-related บูลีนใหม่ได้แล้ว

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

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

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

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

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

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