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

Jecelyn Yeen

ใช้เครื่องมือสำหรับนักพัฒนาเว็บในภาษาที่ต้องการ

ตอนนี้เครื่องมือนักพัฒนาเว็บใน Chrome รองรับมากกว่า 80 ภาษาแล้ว ทำให้คุณทำงานในภาษาที่ต้องการได้

เปิดการตั้งค่า จากนั้นเลือกภาษาที่ต้องการในเมนูแบบเลื่อนลงค่ากำหนด > ภาษา แล้วโหลด DevTools ซ้ำ

Preferences" width="800" height="494">

ปัญหาใน Chromium: 1163928

อุปกรณ์ Nest Hub ใหม่ในรายการอุปกรณ์

ตอนนี้คุณสามารถจำลองขนาดของ Nest Hub และ Nest Hub Max ในโหมดอุปกรณ์ได้แล้ว

คลิกสลับแถบเครื่องมือของอุปกรณ์   สลับแถบเครื่องมือของอุปกรณ์  เลือก Nest Hub หรือ Nest Hub Max ในรายการอุปกรณ์

อุปกรณ์ Nest Hub ในโหมดอุปกรณ์

ปัญหาใน Chromium: 1223525

การทดลองใช้ฟีเจอร์ต้นทางในมุมมองรายละเอียดเฟรม

ตอนนี้คุณดูข้อมูลเกี่ยวกับการทดลองใช้ต้นทางของเว็บไซต์ได้ในมุมมองรายละเอียดเฟรมในแผงแอปพลิเคชัน

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

เปิดหน้าเว็บที่มีการทดลองใช้ฟีเจอร์ต้นทาง (เช่น หน้าเดโม) ในแผงแอปพลิเคชัน ให้เลื่อนลงไปที่ส่วนเฟรม แล้วเลือกเฟรมบนสุด

การทดลองใช้ฟีเจอร์ต้นทางในมุมมองรายละเอียดเฟรม

ปัญหาใน Chromium: 607555

ป้ายการค้นหาคอนเทนเนอร์ CSS ใหม่

ระบบจะเพิ่มป้ายคอนเทนเนอร์ใหม่ข้างองค์ประกอบคอนเทนเนอร์ (องค์ประกอบระดับบนสุดที่ตรงกับเกณฑ์ของกฎ @container) คลิกป้ายเพื่อสลับการแสดงภาพซ้อนทับของคอนเทนเนอร์ที่เลือกและลูกหลานที่ทำการค้นหาทั้งหมดในหน้า

ป้ายการค้นหาคอนเทนเนอร์ CSS

ปัญหาใน Chromium: 1146422

ช่องทําเครื่องหมายใหม่เพื่อกลับด้านตัวกรองเครือข่าย

ใช้ช่องทําเครื่องหมายกลับด้านใหม่เพื่อกลับด้านตัวกรองในแผงเครือข่าย

เช่น คุณพิมพ์ "status-code: 404" เพื่อกรองคำขอเครือข่ายที่มีสถานะ 404 ได้ เลือกช่องทําเครื่องหมายกลับเพื่อปฏิเสธตัวกรอง (แสดงคําขอเครือข่ายทั้งหมดที่ไม่ได้มีสถานะ 404)

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

ปัญหาใน Chromium: 1054464

การเลิกใช้งานแถบด้านข้างของคอนโซลในเร็วๆ นี้

เราจะนำแถบด้านข้างของคอนโซลออกเพื่อย้าย UI ของตัวกรองไปยังแถบเครื่องมือ คุณมีข้อกังวลหรือความคิดเห็นไหม โปรดแจ้งให้เราทราบผ่านเครื่องมือติดตามปัญหานี้

ข้อความการเลิกใช้งานแถบด้านข้างของคอนโซล

ปัญหาใน Chromium: 1232937

แสดงส่วนหัว Set-Cookie ดิบในแท็บปัญหาและแผงเครือข่าย

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแสดงส่วนหัว Set-Cookie ดิบในแท็บปัญหา

ก่อนหน้านี้ เครื่องมือสำหรับนักพัฒนาเว็บไม่แสดงคุกกี้ที่มีรูปแบบไม่ถูกต้อง (ส่วนหัว Set-Cookie ไม่ถูกต้อง) ในแผงเครือข่าย เมื่อเพิ่มตัวกรอง response-header-set-cookie ใหม่ในแผงเครือข่าย ผู้ใช้จะกรองการตอบกลับส่วนหัว Set-Cookie ดิบได้ เครื่องมือสำหรับนักพัฒนาเว็บจะลิงก์ส่วนหัว Set-Cookie ดิบในแท็บปัญหากับแผงเครือข่าย

ส่วนหัว "Set-Cookie" ดิบในแท็บปัญหาและแผงเครือข่าย

ปัญหาใน Chromium: 1179186

แสดงตัวช่วยการเข้าถึงเนทีฟของ Display อย่างสอดคล้องกันเป็นพร็อพเพอร์ตี้ของตนเองใน Console

ตอนนี้ Console จะแสดงตัวช่วยการเข้าถึงดั้งเดิมเป็นพร็อพเพอร์ตี้ของตัวเองอย่างสม่ำเสมอ

ตัวอย่างเช่น เมื่อประเมินนิพจน์ new Int8Array([1, 2, 3]) ในConsole ตัวช่วยการเข้าถึงดั้งเดิม เช่น length, byteOffset จะไม่แสดงในการแสดงตัวอย่าง การอัปเดตล่าสุดนี้จะแสดงตัวช่วยการเข้าถึงแบบเนทีฟในตัวอย่าง และจะประเมินค่าอย่างรวดเร็วเมื่อขยาย

แสดงตัวช่วยการเข้าถึงเนทีฟของ Display อย่างสอดคล้องกันเป็นพร็อพเพอร์ตี้ของตนเองใน Console

ปัญหาเกี่ยวกับ Chromium: 1076820, ​​1199247

สแต็กเทรซข้อผิดพลาดที่เหมาะสมสำหรับสคริปต์แบบอินไลน์ที่มี #sourceURL

ตอนนี้เครื่องมือสำหรับนักพัฒนาเว็บจะแก้ไขสคริปต์แบบอินไลน์ด้วย #sourceURL อย่างถูกต้อง และแสดงการติดตามสแต็กข้อผิดพลาดที่เหมาะสมสำหรับการแก้ไขข้อบกพร่อง

ก่อนหน้านี้ เครื่องมือสำหรับนักพัฒนาเว็บแสดงตำแหน่งที่ไม่ถูกต้องสำหรับสคริปต์ในบรรทัดที่มี #sourceURL โดยอิงตามเอกสารโดยรอบแทนที่จะอิงตามแท็ก <script> ที่เปิด

สแต็กเทรซข้อผิดพลาดที่เหมาะสมสำหรับสคริปต์แบบอินไลน์ที่มี #sourceURL

ปัญหาเกี่ยวกับ Chromium: 1183990, ​​578269

เปลี่ยนรูปแบบสีในแผง "คำนวณ"

ตอนนี้คุณเปลี่ยนรูปแบบสีขององค์ประกอบใดก็ได้ในแผง "คำนวณ" ได้โดยกด Shift แล้วคลิกตัวอย่างสี

กด Shift แล้วคลิกตัวอย่างสีเพื่อเปลี่ยนรูปแบบสี

ปัญหาใน Chromium: 1226371

แทนที่เคล็ดลับเครื่องมือที่กำหนดเองด้วยเคล็ดลับเครื่องมือ HTML ดั้งเดิม

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

ขออภัย การดูแลรักษาการติดตั้งใช้งานเคล็ดลับเครื่องมือที่กำหนดเองนั้นซับซ้อน และเรามักพบข้อบกพร่องที่ซับซ้อนอยู่เสมอ

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

เคล็ดลับเครื่องมือสำหรับนักพัฒนาเว็บ

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

[ทดลอง] ซ่อนปัญหาในแท็บปัญหา

เปิดใช้การทดสอบซ่อนเมนูปัญหาเพื่อซ่อนปัญหาในแท็บปัญหา วิธีนี้จะช่วยให้คุณมุ่งเน้นไปที่ปัญหาสำคัญที่เกี่ยวข้องกับคุณได้

ในแท็บปัญหา ให้วางเมาส์เหนือปัญหา คลิกเมนูปัญหา   เพิ่มเติม   ทางด้านขวา แล้วเลือกซ่อนปัญหาแบบนี้เพื่อซ่อน

เมนูตามบริบทซ่อนปัญหาเวอร์ชันทดลอง

ปัญหาใน Chromium: 1175722

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

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

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

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

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

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