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

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

ขณะนี้ Chrome DevTools รองรับมากกว่า 80 ภาษา คุณจึงทำงานในภาษาที่ต้องการได้

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

ค่ากำหนด" 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 ใหม่

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

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

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

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

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

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

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

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

การเลิกใช้งานแถบด้านข้างของ Console ที่จะเกิดขึ้นเร็วๆ นี้

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

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

ปัญหา Chromium: 1232937

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ปัญหา Chromium: 1223391

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

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

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

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

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

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

ยกเลิก Chrome 82 แล้ว

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59