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

Jecelyn Yeen

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

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

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

ค่ากําหนด" 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 at-rule) คลิกป้ายเพื่อสลับการแสดงการวางซ้อนของคอนเทนเนอร์ที่เลือกและคอนเทนเนอร์ย่อยทั้งหมดที่ทำการค้นหาในหน้า

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

ปัญหา Chromium: 1146422

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

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

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

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

ปัญหา Chromium: 1054464

การเลิกใช้งานแถบด้านข้างของคอนโซลที่กําลังจะเกิดขึ้น

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

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

ปัญหา Chromium: 1232937

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

ตอนนี้ DevTools จะแสดงส่วนหัว Set-Cookie ดิบในแท็บปัญหา

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

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

ปัญหา Chromium: 1179186

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

ตอนนี้ Console จะแสดงตัวรับค่าแบบเนทีฟเป็นพร็อพเพอร์ตี้ของตัวเองอย่างสอดคล้องกัน

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

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

ปัญหา Chromium: 1076820, ​​1199247

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

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

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

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

ปัญหา Chromium: 1183990, ​​578269

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

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

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

ปัญหา Chromium: 1226371

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

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

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

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

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

ปัญหา Chromium: 1223391

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

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

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

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

ปัญหา Chromium: 1175722

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

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

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

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

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

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