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

Matthias Rohmer

เผยแพร่: 1 ตุลาคม 2026

Chrome 153 และ Chrome 154 ได้เปิดตัวในเวอร์ชันเสถียรในช่วงเดือนที่ผ่านมา ซึ่งมาพร้อม การปรับปรุงสำหรับนักพัฒนาแอปมากมายที่พร้อมให้คุณใช้ในเวิร์กโฟลว์ประจำวัน ฉบับนี้ เน้นการควบคุมการเรียกใช้ JavaScript แบบละเอียดในเครื่องมือสำหรับนักพัฒนาเว็บสำหรับเอเจนต์ การติดตามสคริปต์โฆษณา ในแผงแอปพลิเคชัน การรองรับการนำทางแบบนุ่มนวลอย่างเต็มรูปแบบ และการลบล้างระดับประสิทธิภาพ CPU ในประสิทธิภาพ การรองรับสไตล์ที่ไม่ได้ใช้งานและ การตกแต่งที่เข้าถึงได้ด้วยแป้นพิมพ์ในองค์ประกอบ การตรวจสอบแหล่งที่มาและการบันทึกการติดตามประสิทธิภาพ ในความช่วยเหลือจาก AI รวมถึงค่าที่กำหนดล่วงหน้าของอุปกรณ์ที่ปรับปรุงใหม่ในโหมดอุปกรณ์

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

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

  • แพ็กเกจปลั๊กอินเอเจนต์ 1.0: เพิ่มการรองรับแพ็กเกจปลั๊กอินเอเจนต์ 1.0 เพื่อให้เอเจนต์โหลดและเรียกใช้ส่วนขยายปลั๊กอินแบบแยกส่วนได้
  • การควบคุมการเรียกใช้ JavaScript: กําหนดค่า --no-javascript-evaluation หรือ ปิดเครื่องมือการเรียกใช้ JavaScript เพื่อตรวจสอบหน้าเว็บโดยไม่ต้องประเมิน สคริปต์ ซึ่งจะขยายไปทั่วสคริปต์การนำทางและการเริ่มต้น
  • การแมปแหล่งที่มาตามต้องการ: เพิ่มตัวเลือกในการปิดใช้การแมปแหล่งที่มาและโหลดการแมปแหล่งที่มาแบบ Lazy Load ตามต้องการ เพื่อป้องกันการใช้งานหน่วยความจำสูงในเว็บไซต์ขนาดใหญ่
  • สิทธิ์ของรูทระบบไฟล์และเส้นทาง CLI ที่กำหนดค่าได้: ตอนนี้ CLI มี --allow-unrestricted-paths โดยค่าเริ่มต้นและรองรับรูทระบบไฟล์ที่กำหนดค่าได้
  • การตรวจสอบสแนปชอตฮีป: ค้นหาออบเจ็กต์โดยตรงตามขนาดที่เก็บไว้หรือชื่อพร็อพเพอร์ตี้ด้วย query_heapsnapshot ดูขนาดของตัวเองและขนาดที่เก็บไว้สำหรับขอบ และตรวจสอบหน่วยความจำที่บริบทการดำเนินการ V8 เก็บไว้
  • เครื่องมือการทำงานอัตโนมัติของ PWA: เพิ่มเครื่องมือเฉพาะสำหรับการทำงานอัตโนมัติในการติดตั้ง Progressive Web App และการตรวจสอบวงจร
  • การติดตามสแต็กของคอนโซล: เรียกข้อมูลการติดตามสแต็กที่ไม่บังคับเมื่อแสดงข้อความคอนโซลด้วย list_console_messages

ดูข้อมูลเพิ่มเติมได้ในที่เก็บ chrome-devtools-mcp

หลังจากเปิดตัวเมตริกโฆษณาเวอร์ชันทดลอง 4 รายการสำหรับรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX) แผงย่อยใหม่นี้จะเป็นตำแหน่งส่วนกลางสำหรับแก้ไขข้อบกพร่องและเพิ่มประสิทธิภาพข้อมูลที่เกี่ยวข้องกับโฆษณาทั้งหน้า ซึ่งรวมถึงเนื้อหาต่อไปนี้

  • แดชบอร์ดสำหรับเมตริกทดสอบใหม่ ได้แก่ ความหนาแน่นของโฆษณาใน Viewport, จำนวนโฆษณาใน Viewport, การใช้งาน CPU ทั้งหมดโดยโฆษณา และการใช้งานเครือข่ายทั้งหมดโดยโฆษณา
  • การแบ่งกลุ่มการใช้งาน CPU และเครือข่ายตามองค์ประกอบของโฆษณา
  • ตารางสคริปต์โฆษณาในเฟรมหลัก
  • ปุ่มเปิด/ปิดที่ไฮไลต์โฆษณาในหน้าเว็บ

ดูข้อมูลเพิ่มเติมเกี่ยวกับเมตริกโฆษณาใหม่ได้ในเอกสารประกอบ

แท็บโฆษณาของแผงแอปพลิเคชันแสดงตารางสคริปต์โฆษณาใหม่และแสดงสคริปต์โฆษณาในแหล่งที่มา
แท็บโฆษณาในแผงแอปพลิเคชันแสดงตารางสคริปต์โฆษณาใหม่และแสดงสคริปต์โฆษณาในแหล่งที่มา

ปัญหาเกี่ยวกับ Chromium: 514957134, 512927903, 540469610

แผงประสิทธิภาพมีการวัดการนำทางแบบช้าๆ ตั้งแต่ต้นจนจบ การลบล้างการปรับเทียบฮาร์ดแวร์ และการค้นหารายละเอียดการติดตามที่ละเอียดยิ่งขึ้น

  • รองรับการนำทางแบบนุ่มอย่างเต็มรูปแบบ: หลังจากเปิดตัวการรองรับการนำทางแบบนุ่มในมุมมองเมตริกแบบเรียลไทม์และมุมมองการติดตามใน Chrome 152 ตอนนี้การวิเคราะห์การนำทางแบบนุ่มพร้อมใช้งานในข้อมูลเชิงลึกแล้ว ซึ่งเป็นการรองรับแบบครบวงจรอย่างเต็มรูปแบบสำหรับการวัดการนำทางแบบนุ่มในแผงประสิทธิภาพ
  • การลบล้างระดับประสิทธิภาพ CPU ผ่าน CDP: ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บรองรับ การกำหนดค่า การคำนวณ และการส่งการลบล้างระดับประสิทธิภาพ CPU ที่ปรับเทียบแล้ว ผ่านโปรโตคอลเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome (Emulation.setCPUPerformanceOverride) ซึ่งช่วยให้ทดสอบประสิทธิภาพที่ทำซ้ำได้ ในระดับฮาร์ดแวร์ต่างๆ
  • การค้นหาแทร็กส่วนขยายในแผนภูมิ Flame Chart: การกด Ctrl+F ในแผนภูมิ Flame Chart ของแผงประสิทธิภาพจะตรงกับรายการในแทร็กที่กำหนดเองซึ่งลงทะเบียนโดยใช้ Extensibility API, ค้นหาข้อความในเคล็ดลับเครื่องมือ, พร็อพเพอร์ตี้ และรายละเอียดผู้ใช้
  • การแสดงภาพเธรดโปรไฟล์ CPU: แผนภูมิ Flame Chart ของแผงประสิทธิภาพ ตอนนี้แสดงเทรดที่มีเฉพาะตัวอย่างโปรไฟล์ CPU เพื่อให้ การดำเนินการในเบื้องหลัง เช่น เทรด WebAssembly ปรากฏในมุมมองไทม์ไลน์
เวิร์กโฟลว์การนำทางแบบนุ่มนวลตั้งแต่ต้นจนจบในแผงประสิทธิภาพ

ปัญหาใน Chromium: 449760252, 483092899, 540020488

องค์ประกอบ: สไตล์ที่ไม่ได้ใช้งาน เครื่องมือตกแต่งที่เข้าถึงได้ด้วยแป้นพิมพ์ และการแก้ไขโครงร่างแบบต้นไม้

การตรวจสอบและเขียน CSS จะรวดเร็วและเข้าถึงได้มากขึ้นในแผงองค์ประกอบ

  • รองรับสไตล์ที่ไม่ได้ใช้งาน: ตอนนี้ DevTools สามารถแสดงกฎสไตล์ที่ ก่อนหน้านี้ตรงกับองค์ประกอบที่เลือกได้ต่อไปเมื่อกฎนั้นไม่เกี่ยวข้องอีกต่อไป โดยจะ แยกความแตกต่างอย่างชัดเจนด้วยตัวบ่งชี้ภาพที่ไม่ได้ใช้งาน เปิดใช้รูปแบบที่ไม่ได้ใช้งาน และกำหนดค่าลักษณะการยุบในการตั้งค่า
  • การตกแต่งที่เข้าถึงได้ด้วยแป้นพิมพ์: การตกแต่งแบบอินเทอร์แอกทีฟใน DOM tree ซึ่งรวมถึงดูแหล่งที่มา รูปแบบเริ่มต้น การเลื่อนสแนป และ แสดง ตอนนี้สามารถโฟกัสได้ด้วยแป้นพิมพ์และเปิดใช้งานได้โดยใช้ Enter หรือ Space
  • การจัดลำดับใหม่แบบลากและวาง: การจัดลำดับโหนด DOM ใหม่โดยการลากองค์ประกอบใน แผนผัง DOM ทำงานได้อย่างน่าเชื่อถือในขอบเขตของ Shadow DOM พร้อมตัวบ่งชี้ตำแหน่งการวางที่ชัดเจน
  • การสลับพร็อพเพอร์ตี้ CSS ที่ราบรื่นยิ่งขึ้น: การสลับช่องทำเครื่องหมายพร็อพเพอร์ตี้ CSS ในแท็บรูปแบบจะไม่ทําให้เกิดการทาสี UI ซ้ำหรือการกะพริบของภาพอีกต่อไป
แผงองค์ประกอบแสดงกฎ CSS ที่ไม่ได้ใช้งาน
แผงองค์ประกอบที่แสดงกฎ CSS ที่ไม่ได้ใช้งาน

ปัญหาใน Chromium: 539424116, 554057179, 555088527, 548477554

โหมดอุปกรณ์: ค่าที่กำหนดล่วงหน้าของอุปกรณ์ที่ปรับปรุงใหม่ซึ่งจัดกลุ่มตามรูปแบบของอุปกรณ์

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

  • การจัดกลุ่มรูปแบบ: ตอนนี้ระบบจะจัดกลุ่มอุปกรณ์ที่จำลองไว้เป็นอุปกรณ์เคลื่อนที่ อุปกรณ์พับได้ แท็บเล็ตและเดสก์ท็อป และจออัจฉริยะ
  • แคตตาล็อกฮาร์ดแวร์ที่อัปเดตแล้ว: เพิ่มค่าที่กำหนดล่วงสมัยใหม่ ซึ่งรวมถึง iPhone 16, Pixel 9, Pixel 10, Galaxy Z Fold 6, iPad Pro 13" และ Nest Hub Max พร้อมกับ เลิกใช้คำจำกัดความของอุปกรณ์รุ่นเดิมที่ล้าสมัย
โหมดอุปกรณ์แสดงค่าที่กำหนดล่วงหน้าของอุปกรณ์ที่ปรับปรุงใหม่ซึ่งจัดกลุ่มตามรูปแบบ
โหมดอุปกรณ์ที่แสดงค่าที่กำหนดล่วงหน้าของอุปกรณ์ที่ปรับปรุงใหม่ซึ่งจัดกลุ่มตามรูปแบบของอุปกรณ์

ปัญหาใน Chromium: 526856234, 526857820

เครือข่าย: แก้ไขและส่งอีกครั้งเป็นการดึงข้อมูลใน Console และการลบล้างในเครื่องจะมีความปลอดภัย

เราได้ปรับปรุงและรักษาความปลอดภัยของเวิร์กโฟลว์การตรวจสอบและการแก้ไขข้อบกพร่องของคำขอเครือข่ายแล้ว ดังนี้

  • แก้ไขและส่งอีกครั้งเป็นคำสั่ง Fetch ใน Console: การเลือกแก้ไขและส่งอีกครั้งเป็นคำสั่ง Fetch ในคำขอเครือข่ายใดก็ตามจะโฟกัสที่แผง Console โดยอัตโนมัติพร้อมกับวางนิพจน์ fetch() ลงในพรอมต์เรียบร้อยแล้ว พร้อมด้วยความคิดเห็นเกี่ยวกับพารามิเตอร์และลิงก์อ้างอิงไปยังคำขอเดิม
  • การปิดช่องโหว่ด้านความปลอดภัยของการลบล้างในเครื่อง: ตอนนี้แผงเครือข่ายจะป้องกัน Path Traversal (%2E%2E) ในการลบล้างในเครื่องและห้ามสร้างการลบล้างในรูปแบบที่ไม่ใช่ http(s) เช่น data:, blob:, javascript: และabout:
  • การหลีกเลี่ยงเครื่องหมายแคริเอทใน "คัดลอกเป็น curl (cmd)": การคัดลอกคำขอเครือข่ายเป็นคำสั่ง curl สำหรับ Windows cmd.exe จะหลีกเลี่ยงวงเล็บและเครื่องหมายแบ็กทิก เพื่อป้องกันข้อผิดพลาดเกี่ยวกับไวยากรณ์ของคำสั่งเมื่อวางลงในเชลล์อื่น
  • การซิงค์เคอร์เซอร์ของเพย์โหลดไบนารี: แท็บเพย์โหลดจะรักษา ตำแหน่งการเลื่อนและเคอร์เซอร์ของคุณเมื่อสลับระหว่างมุมมอง Hex, Base64 และ UTF-8
คลิกขวาที่คำขอเครือข่าย แล้วเลือก "แก้ไขและส่งอีกครั้งเป็น Fetch" ซึ่งจะโฟกัสแผง Console โดยอัตโนมัติพร้อมกับวางนิพจน์ Fetch ไว้แล้วและพร้อมแก้ไข
คลิกขวาที่คำขอเครือข่าย แล้วเลือก "แก้ไขและส่งอีกครั้งเป็นคำขอเรียกข้อมูล" ซึ่งจะโฟกัสแผง Console โดยอัตโนมัติพร้อมกับวางนิพจน์การเรียกข้อมูลไว้แล้วและพร้อมแก้ไข

ปัญหาเกี่ยวกับ Chromium: 40726969, 513843792, 513836026, 407750982

หน่วยความจำ: การกรองขอบสแนปชอตฮีป การจัดเรียงขนาด และการค้นหาออบเจ็กต์

แผงหน่วยความจำมีเครื่องมือที่ละเอียดยิ่งขึ้นสําหรับการวิเคราะห์สแนปชอตฮีป

  • การจัดเรียงและการกรองขอบ: ตอนนี้คุณสามารถกรองขอบในสแนปชอตฮีปตามขนาดที่คงไว้ขั้นต่ำ และกรองค่าดั้งเดิม (null, undefined, true, false) เพื่อมุ่งเน้นที่การอ้างอิงออบเจ็กต์ที่มีความหมาย คุณสามารถจัดเรียงขอบตามขนาดที่คงไว้ ขนาดของตัวเอง หรือชื่อ
  • การค้นหาออบเจ็กต์โดยตรง: เครื่องมือสำหรับนักพัฒนาเว็บรองรับการค้นหาออบเจ็กต์สแนปชอตฮีปโดยตรงตามเกณฑ์ขนาดที่คงไว้หรือชื่อพร็อพเพอร์ตี้ ซึ่งช่วยให้การตรวจสอบหน่วยความจำรั่วไหลมีประสิทธิภาพมากขึ้น
  • การวิเคราะห์การคงบริบท: สแนปชอตของ Heap สามารถคำนวณและรายงาน หน่วยความจำรวมที่ยังคงใช้งานได้โดยเฉพาะบริบทการดำเนินการ V8
  • การแยกวิเคราะห์สแนปชอตที่ยืดหยุ่น: ตอนนี้ไฟล์สแนปชอตฮีปที่ไม่ถูกต้องหรือเสียหายจะ แสดงข้อผิดพลาดที่ชัดเจนแทนที่จะทำให้การแยกวิเคราะห์ค้าง

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

การปรับปรุงการช่วยเหลือพิเศษ

Chrome 153 และ Chrome 154 มีการปรับปรุงการช่วยเหลือพิเศษต่อไปนี้

  • องค์ประกอบ: ตอนนี้ VoiceOver ใน macOS จะประกาศการเปลี่ยนแปลงสถานะเป็น "ขยาย" และ "ยุบ" ผ่านขอบเขตแบบสดที่สุภาพเมื่อไปยังส่วนต่างๆ ของรายการในแผนผัง DOM (ปัญหาใน Chromium: 540028208)
  • ปัญหา: แก้ไขการประกาศของโปรแกรมอ่านหน้าจอที่ซ้ำกันในตัวนับปัญหา อ่านสรุปที่ชัดเจนรายการเดียว และใช้ความหมายที่ไม่ใช่ปุ่มที่ถูกต้องภายในแผงปัญหา (ปัญหาใน Chromium: 536977880)
  • องค์ประกอบ: เครื่องมือตกแต่งแบบอินเทอร์แอกทีฟ (ดูแหล่งที่มา รูปแบบเริ่มต้น การเลื่อนสแนป และเปิดเผย) สามารถโฟกัสและเปิดใช้งานได้อย่างเต็มที่โดยใช้ แป้นพิมพ์ (ปัญหาใน Chromium: 554057179)
  • ภูมิภาคที่ใช้งานได้: เพิ่ม AccessibilityAnnouncementRecordingView เพื่อ บันทึกและแก้ไขข้อบกพร่องของประกาศสดและariaNotifyการโทร (ปัญหาใน Chromium: 527462118)

ปัญหาเกี่ยวกับ Chromium: 540028208, 536977880, 554057179, 527462118