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

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

Sofia Emelianova

Jecelyn Yeen

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1288023

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

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

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

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

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

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

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

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

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

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

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

ทีมเครื่องมือสำหรับนักพัฒนาเว็บขอขอบคุณ Yisi(긝) ที่ปรับปรุงฟีเจอร์นี้

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

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

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

ปัญหา Chromium: 1420656

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

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

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

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

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

ปัญหา Chromium: 1276960

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

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

ปัญหา Chromium: 1424345

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

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

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

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

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

ปัญหา Chromium: 1354548

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

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

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

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

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

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

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

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