หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Sofia Emelianova

Jecelyn Yeen

ลบล้างส่วนหัวการตอบกลับของเครือข่าย

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

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

หากต้องการลบล้างส่วนหัว ให้ไปที่เครือข่าย > ส่วนหัว > ส่วนหัวการตอบกลับ วางเมาส์เหนือค่าของส่วนหัว แล้วคลิก และแก้ไข

ข้อผิดพลาด CORS ได้รับการแก้ไขโดยการลบล้างส่วนหัว

นอกจากนี้ คุณยังเพิ่มส่วนหัวที่กำหนดเองได้ด้วย

การเพิ่มส่วนหัวที่กำหนดเอง

หากต้องการแก้ไขการลบล้างทั้งหมดในที่เดียว ให้แก้ไขไฟล์ .headers ในแหล่งที่มา > การลบล้าง ในส่วนนี้ คุณยังคลิกเพิ่มกฎการลบล้างเพื่อลบล้างคำขอหลายรายการโดยใช้ไวลด์การ์ด (*) ได้ด้วย

กำลังแก้ไขการลบล้างทั้งหมด

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

ปรับปรุงการแก้ไขข้อบกพร่อง Nuxt, Vite และ Rollup

ตอนนี้สแต็กเทรซที่ปรับปรุงแล้วจะซ่อนเฟรมที่มาจากแหล่งที่มาที่สร้างโดย Nuxt 3.3 ขึ้นไป เพื่อช่วยให้คุณระบุปัญหาได้เร็วขึ้นในระหว่างการแก้ไขข้อบกพร่อง เครื่องมือสำหรับนักพัฒนาเว็บจะข้ามเฟรมดังกล่าวไป

ในการติดตามคอนโซล ใต้ลิงก์แสดงอีก N เฟรม
ในแหล่งที่มา > สแต็กการเรียกใช้ ในส่วน แสดงเฟรมที่อยู่ในรายการละเว้น

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

ทีม DevTools, Nuxt, Vite และ Rollup ได้ร่วมมือกันนำx_google_ignoreListส่วนขยายแผนที่แหล่งที่มามาใช้เพื่อปรับปรุงเหล่านี้

ทีม DevTools ขอแสดงความขอบคุณต่อทีม Nuxt, Vite และ Rollup ที่ทำให้การดำเนินการนี้เกิดขึ้นได้ ขอขอบคุณสำหรับความพยายามและความร่วมมือของคุณ ซึ่งสำคัญต่อความสำเร็จของการดำเนินการนี้ ขอขอบคุณอีกครั้งสำหรับการมีส่วนร่วม

การปรับปรุง CSS ในองค์ประกอบ > รูปแบบ

คุณสมบัติและค่า CSS ไม่ถูกต้อง

เพื่อช่วยให้คุณวินิจฉัยปัญหา CSS ได้เร็วขึ้น ตอนนี้แผงรูปแบบจะขีดฆ่า

การประกาศ CSS ทั้งหมด (พร็อพเพอร์ตี้และค่า) เมื่อพร็อพเพอร์ตี้ CSS ไม่ถูกต้อง
เฉพาะค่าเมื่อพร็อพเพอร์ตี้ CSS ถูกต้อง แต่ค่าไม่ถูกต้อง

ชื่อพร็อพเพอร์ตี้และค่าพร็อพเพอร์ตี้ไม่ถูกต้อง

ทีมเครื่องมือสำหรับนักพัฒนาเว็บต้องการแสดงความขอบคุณ Yisi(Goal丝) ที่ช่วยปรับปรุงส่วนนี้

ลิงก์ไปยังคีย์เฟรมในคุณสมบัติการย่อของภาพเคลื่อนไหว

ตอนนี้พร็อพเพอร์ตี้ CSS ของ animation มีลิงก์ไปยังกฎแอตทริบิวต์ @keyframes ที่เกี่ยวข้อง เพื่อให้คุณไปยังส่วนต่างๆ ของแผงรูปแบบได้เร็วขึ้น

ลิงก์ไปยังคีย์เฟรมในคุณสมบัติการย่อของภาพเคลื่อนไหว

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

การตั้งค่าคอนโซลใหม่: เติมข้อความอัตโนมัติด้วย Enter

เริ่มต้นด้วยเวอร์ชันก่อนหน้า (112) คุณสามารถกำหนดค่าคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บเพื่อใช้คำแนะนำที่เติมข้อความอัตโนมัติเมื่อกด Enter

โดยค่าเริ่มต้น หากต้องการยอมรับคำแนะนำที่เติมข้อความอัตโนมัติ ให้กด Tab หรือ Arrow right หากต้องการเติมข้อความอัตโนมัติด้วย Enter ให้เปิดใช้ การตั้งค่า > คอนโซล > ยอมรับคำแนะนำที่เติมข้อความอัตโนมัติด้วย Enter

ช่องทำเครื่องหมายที่เกี่ยวข้องในการตั้งค่า

นอกจากนี้ ข้อความในการตั้งค่าอื่นยังใช้งานได้ง่ายขึ้นด้วย ดังนี้ ถือว่าการประเมินโค้ดเป็นการดำเนินการของผู้ใช้

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

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

สคริปต์ที่ละเว้นในกล่องโต้ตอบเปิดด่วนก่อนและหลังการเปลี่ยนแปลง

ปัญหา Chromium: 1424345

การเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JavaScript: ระยะที่ 2

ตั้งแต่ Chrome 58 ทีม DevTools วางแผนที่จะเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JavaScript และให้นักพัฒนาซอฟต์แวร์ Node.js และ Deno ใช้แผงประสิทธิภาพในการทำโปรไฟล์ประสิทธิภาพของ CPU ของ JavaScript

DevTools เวอร์ชัน 113 เริ่มระยะที่ 2 ของการเลิกใช้งาน JavaScript Profiler 4 ระยะ ในระยะนี้ คุณจะเปิดแผงได้ แต่ UI ของแผงจะใช้งานไม่ได้อีกต่อไป

หากต้องการสร้างโปรไฟล์ประสิทธิภาพของ CPU ให้คลิกไปที่แผงประสิทธิภาพ

การเลิกใช้งานเครื่องมือสร้างโปรไฟล์ JavaScript

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

ไฮไลต์เบ็ดเตล็ด

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

แก้ไขข้อบกพร่องที่ทำให้เกิดการพิมพ์ครั้งเดียวในแผงแหล่งที่มาเพื่อจัดการชื่อตัวแปรที่มีอักขระ Unicode อย่างไม่ถูกต้อง (1425055)
แท็บปัญหาได้เพิ่มข้อความใหม่สำหรับปัญหาเกี่ยวกับการป้อนข้อความอัตโนมัติซึ่งเกี่ยวข้องกับค่า HTML ที่ไม่เป็นไปตามมาตรฐาน (1399414)

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

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

ติดต่อทีม Chrome DevTools

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

ส่งข้อเสนอแนะหรือความคิดเห็นถึงเราทาง crbug.com
รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บโดยใช้ตัวเลือกเพิ่มเติม > ความช่วยเหลือ > รายงานปัญหาเกี่ยวกับเครื่องมือสำหรับนักพัฒนาเว็บในเครื่องมือสำหรับนักพัฒนาเว็บ
ทวีตที่ @ChromeDevTools
แสดงความคิดเห็นว่ามีอะไรใหม่ในวิดีโอ YouTube เครื่องมือสำหรับนักพัฒนาเว็บ หรือวิดีโอ YouTube สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ