หน้านี้ได้รับการแปลโดย Cloud Translation API

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

Kayce Basques

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

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

คำเตือน: การประกาศคำสั่ง let หรือ class ในสคริปต์นอกคอนโซลหรือภายในอินพุตเดียวในคอนโซลยังคงทำให้เกิด SyntaxError

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

ภาพหน้าจอของ 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 การกำหนดค่าใหม่

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

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

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

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

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

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

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

ปัญหา Chromium #1004203

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

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

ติดต่อทีม Chrome DevTools

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

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