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

Kayce Basques
Kayce Basques
X GitHub

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

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

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

ภาพหน้าจอของ Console ใน Chrome 78 แสดงว่าการประกาศตัวแปร let ซ้ำไม่สำเร็จ

ตอนนี้คอนโซลอนุญาตให้ประกาศซ้ำได้แล้ว โดยมีข้อกำหนดดังนี้

ภาพหน้าจอของคอนโซลใน Chrome 80 ที่แสดงว่าการประกาศตัวแปร let ซ้ำสำเร็จ

ปัญหาใน Chromium #1004193

การแก้ไขข้อบกพร่องของ WebAssembly ที่ได้รับการปรับปรุง

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

ภาพหน้าจอของการแก้ไขข้อบกพร่อง WebAssembly ใหม่ที่ขับเคลื่อนโดย DWARF

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

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

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

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

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

  • ทรัพยากรที่ตรวจสอบจะแสดงเป็นตัวหนา ในภาพหน้าจอด้านบน 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 มีผลต่อส่วนหัว User-Agent HTTP ที่แนบมากับทรัพยากรเครือข่าย รวมถึงค่าของ navigator.userAgent ด้วย

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

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

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

ปัญหาใน Chromium #1029031

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

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

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

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

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

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

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

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

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

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

ปัญหาใน Chromium #1004203

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

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

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

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

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

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