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

Sofia Emelianova

Jecelyn Yeen

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

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

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

• ส่วนหัวของกลไกการแชร์ทรัพยากรข้ามโดเมน (CORS)
• ส่วนหัวของนโยบายสิทธิ์
• ส่วนหัวของการแยกแบบข้ามต้นทาง

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

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

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

ปัญหาใน Chromium: 1288023

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

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

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

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

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

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

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

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

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

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

ทีม DevTools ขอขอบคุณ Yisi(一丝) ที่ช่วยปรับปรุงฟีเจอร์นี้

ลิงก์ไปยังคีย์เฟรมในพร็อพเพอร์ตี้ภาพเคลื่อนไหวแบบย่อ

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

ปัญหาใน Chromium: 1420656

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

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

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

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

ปัญหาใน Chromium: 1276960

เมนูคำสั่งจะเน้นไฟล์ที่สร้างขึ้น

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

ปัญหาใน Chromium: 1424345

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

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

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

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

ปัญหาใน Chromium: 1354548

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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

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