Tính năng mới trong Công cụ cho nhà phát triển (Chrome 80)

Kayce Basques

Hỗ trợ cho việc khai báo lại let và class trong Console

Console hiện hỗ trợ việc khai báo lại các câu lệnh let và class. Không thể khai báo lại là vấn đề phiền toái phổ biến của các nhà phát triển web khi dùng Console để thử nghiệm JavaScript mới .

Ví dụ: trước đây, khi khai báo lại một biến cục bộ bằng let, Console sẽ gửi một lỗi:

Hiện tại, Console cho phép khai báo lại:

Vấn đề về Chromium #1004193

Cải thiện tính năng gỡ lỗi WebAssembly

Công cụ cho nhà phát triển đã bắt đầu hỗ trợ Tiêu chuẩn gỡ lỗi DWARF, điều này có nghĩa là tăng cường hỗ trợ cho thay đổi mã, đặt điểm ngắt và phân giải dấu vết ngăn xếp ở ngôn ngữ nguồn trong Công cụ cho nhà phát triển. Hãy xem bài viết Gỡ lỗi WebAssembly đã cải thiện trong Công cụ của Chrome cho nhà phát triển để biết toàn bộ câu chuyện.

Nội dung cập nhật về bảng điều khiển mạng

Yêu cầu chuỗi trình khởi tạo trong thẻ Trình khởi tạo

Giờ đây, bạn có thể xem các trình khởi tạo và phần phụ thuộc của yêu cầu mạng dưới dạng danh sách lồng nhau. Điều này có thể giúp bạn hiểu lý do tại sao một tài nguyên được yêu cầu hoặc một hoạt động mạng nào của một tài nguyên nhất định (chẳng hạn như như một tập lệnh).

Sau khi ghi nhật ký hoạt động mạng trong bảng điều khiển Mạng, hãy nhấp vào một tài nguyên rồi chuyển đến Thẻ Trình khởi tạo để xem Chuỗi trình khởi tạo yêu cầu:

• Tài nguyên được kiểm tra được in đậm. Trong ảnh chụp màn hình ở trên, https://web.dev/default-627898b5.js là tài nguyên được kiểm tra.
• Các tài nguyên phía trên tài nguyên được kiểm tra là trình khởi tạo. Trong ảnh chụp màn hình ở trên, https://web.dev/bootstrap.js là trình khởi tạo của https://web.dev/default-627898b5.js. Trong phạm vi khác các từ, https://web.dev/bootstrap.js đã gây ra yêu cầu mạng cho https://web.dev/default-627898b5.js.
• Các tài nguyên bên dưới tài nguyên được kiểm tra là dependencies. Trong ảnh chụp màn hình ở trên, https://web.dev/chunk-f34f99f7.js là phần phụ thuộc của https://web.dev/default-627898b5.js. Ngang bằng nói cách khác, https://web.dev/default-627898b5.js đã tạo ra yêu cầu mạng cho https://web.dev/chunk-f34f99f7.js.

Vấn đề về Chromium #842488

Đánh dấu yêu cầu mạng đã chọn trong phần Tổng quan

Sau khi bạn nhấp vào một tài nguyên mạng để kiểm tra, bảng điều khiển Mạng giờ đây sẽ tạo một đường viền màu xanh dương xung quanh tài nguyên đó trong trang Tổng quan. Điều này có thể giúp bạn phát hiện xem yêu cầu mạng xảy ra sớm hơn hoặc muộn hơn dự kiến.

Vấn đề về Chromium #988253

Cột URL và đường dẫn trong bảng điều khiển Mạng

Sử dụng cột Đường dẫn và URL mới trong bảng điều khiển Mạng để xem đường dẫn tuyệt đối hoặc đường dẫn đầy đủ URL của từng tài nguyên mạng.

Nhấp chuột phải vào tiêu đề bảng Thác nước rồi chọn Đường dẫn hoặc URL để hiển thị các cột mới.

Vấn đề về Chromium #993366

Chuỗi tác nhân người dùng mới cập nhật

Công cụ cho nhà phát triển hỗ trợ việc đặt chuỗi tác nhân người dùng tuỳ chỉnh thông qua thẻ Điều kiện mạng. Chiến lược phát hành đĩa đơn Chuỗi tác nhân người dùng ảnh hưởng đến tiêu đề HTTP User-Agent đi kèm với các tài nguyên mạng, đồng thời ảnh hưởng đến giá trị navigator.userAgent.

Các chuỗi Tác nhân người dùng định sẵn đã được cập nhật để phản ánh các phiên bản trình duyệt hiện đại.

Để truy cập Điều kiện mạng, hãy mở Trình đơn lệnh rồi chạy Show Network Conditions .

Vấn đề về Chromium #1029031

Cập nhật bảng điều khiển kiểm tra

Giao diện người dùng cho cấu hình mới

Giao diện người dùng cấu hình có thiết kế mới, thích ứng và các tuỳ chọn cấu hình điều tiết có đã được đơn giản hoá. Xem phần Điều tiết bảng điều khiển để biết thêm thông tin về giao diện người dùng điều tiết thay đổi.

Thông tin cập nhật về thẻ Mức độ phù hợp

Chế độ bao phủ theo mỗi chức năng hoặc mỗi khối

Thẻ Mức độ phù hợp có một trình đơn thả xuống mới giúp bạn chỉ định xem dữ liệu về mức độ sử dụng mã phải được thu thập theo hàm hoặc mỗi khối. Phạm vi bao phủ mỗi khối chi tiết hơn nhưng cũng rất tốn kém. Theo mặc định, Công cụ cho nhà phát triển hiện sử dụng mức độ sử dụng mỗi hàm.

Giờ đây, mức độ phù hợp phải được bắt đầu bằng cách tải lại trang

Tính năng chuyển đổi mức độ sử dụng mã mà không tải lại trang đã bị xoá vì dữ liệu về mức độ sử dụng không đáng tin cậy. Ví dụ: một hàm có thể được báo cáo là không sử dụng nếu quá trình thực thi hàm đó từ lâu và trình thu gom rác của V8 đã dọn dẹp nó.

Vấn đề về Chromium #1004203

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. Các kênh xem trước này cho phép bạn truy cập vào các tính năng mới nhất của Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

• Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
• Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Tweet tại @ChromeDevTools.
• Để lại bình luận về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong Công cụ cho nhà phát triển.

Tính năng mới trong Công cụ cho nhà phát triển

Danh sách mọi nội dung được đề cập trong loạt bài Tính năng mới trong Công cụ cho nhà phát triển.