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

Kayce Basques

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

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

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

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

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

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

ปัญหา Chromium #1004193

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

DevTools เริ่มรองรับมาตรฐานการแก้ไขข้อบกพร่อง DWARF แล้ว ซึ่งหมายความว่ามีการรองรับการข้ามโค้ด การตั้งจุดหยุดพัก และแก้ไขสแต็กเทรซในภาษาต้นทางมากขึ้นภายใน DevTools อ่านเรื่องราวทั้งหมดได้ในการแก้ไขข้อบกพร่อง 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
  • ทรัพยากรที่อยู่ด้านล่างทรัพยากรที่ตรวจสอบคือทรัพยากรที่ต้องพึ่งพา ในภาพหน้าจอด้านบน https://web.dev/chunk-f34f99f7.js เป็นสิ่งที่ต้องพึ่งพาของ https://web.dev/default-627898b5.js กล่าวคือ https://web.dev/default-627898b5.js เป็นสาเหตุที่ทำให้เกิดคำขอเครือข่ายสำหรับ https://web.dev/chunk-f34f99f7.js

ปัญหา Chromium #842488

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

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

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

ปัญหา Chromium #988253

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

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

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

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

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

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