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

Jecelyn Yeen

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

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

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

ค่ากำหนด" ความกว้าง="800" ความสูง="494">

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

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

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

คลิกสลับแถบเครื่องมืออุปกรณ์   เปิด/ปิดแถบเครื่องมืออุปกรณ์ แล้วเลือก Nest Hub หรือ Nest Hub Max ใต้รายการอุปกรณ์

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

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

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

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

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

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

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

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

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

ระบบจะเพิ่มป้ายcontainerใหม่ข้างองค์ประกอบคอนเทนเนอร์ (องค์ประกอบระดับบนที่ตรงกับเกณฑ์ของกฎ 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 สำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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

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