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

Kayce Basques

รองรับการประกาศletและclassซ้ำในคอนโซล

ตอนนี้ Console รองรับการประกาศคำสั่ง let และ class ซ้ำแล้ว การไม่สามารถประกาศใหม่ได้ เป็นเรื่องน่ารำคาญสำหรับนักพัฒนาเว็บที่ใช้ Console เพื่อทดสอบ JavaScript ใหม่ โค้ด

ตัวอย่างเช่น ก่อนหน้านี้เมื่อประกาศตัวแปรภายในเครื่องอีกครั้งด้วย let Console จะส่ง ข้อผิดพลาด:

ภาพหน้าจอของ Console ใน Chrome 78 ที่แสดงให้เห็นว่าการประกาศ "Let" ซ้ำล้มเหลว

ตอนนี้คอนโซลจะอนุญาตให้มีการประกาศซ้ำ:

ภาพหน้าจอของ Console ใน Chrome 80 ที่แสดงให้เห็นว่าการประกาศ "Let" ซ้ำสำเร็จแล้ว

ปัญหา Chromium #1004193

การแก้ไขข้อบกพร่อง WebAssembly ที่ดียิ่งขึ้น

เครื่องมือสำหรับนักพัฒนาเว็บเริ่มรองรับมาตรฐานการแก้ไขข้อบกพร่อง DWARF ซึ่งหมายถึงการสนับสนุนที่เพิ่มขึ้นสำหรับ ขั้นตอนการเขียนโค้ด ตั้งค่าเบรกพอยท์ และการแก้ไขสแต็กเทรซในภาษาต้นฉบับภายใน เครื่องมือสำหรับนักพัฒนาเว็บ ดูเรื่องราวทั้งหมดได้ที่หัวข้อการแก้ไขข้อบกพร่อง WebAssembly ที่ปรับปรุงใหม่ในเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

ภาพหน้าจอของการแก้ไขข้อบกพร่อง WebAssembly ใหม่ที่ทำงานด้วยระบบ DWARF

การอัปเดตแผงเครือข่าย

ขอเชนผู้เริ่มต้นในแท็บผู้เริ่มต้น

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

ภาพหน้าจอของเชนผู้เริ่มคำขอในแท็บผู้เริ่ม

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

  • แหล่งข้อมูลที่ตรวจสอบจะเป็นตัวหนา ในภาพหน้าจอด้านบน https://web.dev/default-627898b5.js คือทรัพยากรที่ตรวจสอบแล้ว
  • ทรัพยากรที่อยู่ด้านบนของทรัพยากรที่ตรวจสอบคือผู้เริ่ม ในภาพหน้าจอด้านบน https://web.dev/bootstrap.js เป็นผู้เริ่มของ https://web.dev/default-627898b5.js ในอีก คำ https://web.dev/bootstrap.js เป็นต้นเหตุของคำขอเครือข่ายสำหรับ https://web.dev/default-627898b5.js
  • ทรัพยากรที่อยู่ใต้ทรัพยากรที่ตรวจสอบคือทรัพยากร Dependency ในภาพหน้าจอด้านบน https://web.dev/chunk-f34f99f7.js เป็นทรัพยากร Dependency ของ https://web.dev/default-627898b5.js ใน กล่าวอีกนัยหนึ่ง https://web.dev/default-627898b5.js เป็นสาเหตุของคำขอเครือข่ายสำหรับ https://web.dev/chunk-f34f99f7.js

ปัญหา Chromium #842488

ไฮไลต์คำขอเครือข่ายที่เลือกใน "ภาพรวม"

หลังจากคลิกทรัพยากรเครือข่ายเพื่อตรวจสอบแล้ว แผงเครือข่ายจะมีเส้นขอบสีน้ำเงิน ของทรัพยากรดังกล่าวในภาพรวม วิธีนี้ช่วยให้คุณตรวจสอบว่าคำขอเครือข่าย เกิดขึ้นก่อนหรือหลังที่คาดไว้

ภาพหน้าจอของแผงภาพรวมที่ไฮไลต์ทรัพยากรที่ตรวจสอบแล้ว

ปัญหา Chromium #988253

คอลัมน์ URL และเส้นทางในแผงเครือข่าย

ใช้คอลัมน์เส้นทางและ URL ใหม่ในแผงเครือข่ายเพื่อดูเส้นทางสัมบูรณ์หรือเส้นทางแบบเต็ม URL ของทรัพยากรเครือข่ายแต่ละรายการ

ภาพหน้าจอของคอลัมน์เส้นทางและ URL ใหม่ในแผงเครือข่าย

คลิกขวาที่ส่วนหัวของตาราง Waterfall แล้วเลือกเส้นทางหรือ URL เพื่อแสดงคอลัมน์ใหม่

ปัญหา Chromium #993366

สตริง User Agent ที่อัปเดตแล้ว

เครื่องมือสำหรับนักพัฒนาเว็บรองรับการตั้งค่าสตริง User-Agent ที่กำหนดเองผ่านแท็บเงื่อนไขของเครือข่าย สตริง User Agent ส่งผลต่อส่วนหัว HTTP ของ User-Agent ที่แนบมากับทรัพยากรเครือข่าย และ เป็น navigator.userAgent

สตริง User Agent ที่กำหนดไว้ล่วงหน้าได้รับการอัปเดตแล้วเพื่อแสดงเวอร์ชันของเบราว์เซอร์ที่ทันสมัย

ภาพหน้าจอของเมนู User Agent ในแท็บเงื่อนไขของเครือข่าย

ในการเข้าถึงเงื่อนไขของเครือข่าย ให้เปิดเมนูคำสั่ง และเรียกใช้ Show Network Conditions คำสั่ง

ปัญหา Chromium #1029031

การอัปเดตแผงการตรวจสอบ

UI การกำหนดค่าใหม่

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

UI การกำหนดค่าใหม่

การอัปเดตแท็บความครอบคลุม

โหมดการครอบคลุมต่อฟังก์ชันหรือต่อการบล็อก

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

เมนูแบบเลื่อนลงของโหมดการครอบคลุม

ตอนนี้ต้องเริ่มการครอบคลุมด้วยการโหลดหน้าซ้ำ

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

ปัญหา Chromium #1004203

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

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

ติดต่อทีม Chrome DevTools

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

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

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

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