มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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ส่วนขยายแผนที่แหล่งที่มามาใช้เพื่อปรับปรุงเหล่านี้

• รุ่น Nuxt 3.3
• ตัวเลือกเซิร์ฟเวอร์ Vit
• ตัวเลือกการกำหนดค่าภาพรวม

ทีม 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 ให้คลิกไปที่แผงประสิทธิภาพ

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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