มีอะไรใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บ (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
• ตัวเลือกเซิร์ฟเวอร์ Vite
• ตัวเลือกการกําหนดค่าภาพรวม

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

การปรับปรุง CSS ในองค์ประกอบ > สไตล์

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

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

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

ทีม DevTools ขอแสดงความขอบคุณ Yisi(一丝) ที่ช่วยปรับปรุงเรื่องนี้

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

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

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

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

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

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

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

ปัญหา Chromium: 1276960

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

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

ปัญหา Chromium: 1424345

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

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

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

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

ปัญหา Chromium: 1354548

ไฮไลต์อื่นๆ

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

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

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

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

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

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

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

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

รายการทุกอย่างที่ครอบคลุมในชุดมีอะไรใหม่ใน DevTools