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

Kayce Basques

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

Bảng điều khiển hiện hỗ trợ việc khai báo lại các câu lệnh let và class. Việc không thể khai báo lại là một vấn đề thường gặp đối với các nhà phát triển web sử dụng Bảng điều khiển để thử nghiệm với 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, Bảng điều khiển sẽ gửi một lỗi:

Ảnh chụp màn hình của Console trong Chrome 78 cho thấy việc khai báo lại let không thành công.

Giờ đây, Bảng điều khiển cho phép khai báo lại:

Ảnh chụp màn hình của Console trong Chrome 80 cho thấy việc khai báo lại let đã thành công.

Vấn đề về Chromium #1004193

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

DevTools đã bắt đầu hỗ trợ DWARF Debugging Standard (Tiêu chuẩn gỡ lỗi DWARF). Điều này có nghĩa là tăng cường hỗ trợ cho việc chuyển qua mã, đặt điểm ngắt và phân giải dấu vết ngăn xếp trong ngôn ngữ nguồn của bạn trong DevTools. Hãy xem bài viết Cải thiện tính năng gỡ lỗi WebAssembly trong Chrome DevTools để biết toàn bộ thông tin.

Ảnh chụp màn hình của tính năng gỡ lỗi WebAssembly mới sử dụng DWARF.

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 một 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 một tài nguyên được yêu cầu hoặc hoạt động mạng nào mà một tài nguyên nhất định (chẳng hạn như tập lệnh) đã gây ra.

Ảnh chụp màn hình về Chuỗi trình tạo yêu cầu trong thẻ Trình tạo yêu cầu

Sau khi ghi lại 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. Nói cách khác, 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à phần phụ thuộc. 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. Nói cách khác, https://web.dev/default-627898b5.js đã gây ra yêu cầu mạng cho https://web.dev/chunk-f34f99f7.js.

Vấn đề về Chromium #842488

Làm nổi bật 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 tài nguyên đó, bảng điều khiển Mạng sẽ đặt đường viền màu xanh lam xung quanh tài nguyên đó trong phần Tổng quan. Điều này có thể giúp bạn phát hiện xem yêu cầu mạng có diễn ra sớm hơn hay muộn hơn dự kiến hay không.

Ảnh chụp màn hình ngăn Tổng quan làm nổi bật tài nguyên đã kiểm tra.

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ác 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 URL đầy đủ của từng tài nguyên mạng.

Ảnh chụp màn hình của các cột Đường dẫn và URL mới trong bảng điều khiển Mạng.

Nhấp chuột phải vào tiêu đề bảng Waterfall (Trình tự) rồi chọn Path (Đườ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 đã cập nhật

Công cụ của Chrome cho nhà phát triển hỗ trợ việc đặt chuỗi User-Agent tuỳ chỉnh thông qua thẻ Network Conditions (Điều kiện mạng). Chuỗi User-Agent ảnh hưởng đến tiêu đề HTTP User-Agent đính kèm vào tài nguyên mạng, cũng như giá trị của navigator.userAgent.

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

Ảnh chụp màn hình trình đơn User Agent (Trình đại diện người dùng) trong thẻ Network Conditions (Điều kiện mạng).

Để truy cập vào Network Conditions (Tình trạng mạng), hãy mở Command Menu (Trình đơn lệnh) rồi chạy lệnh Show Network Conditions.

Vấn đề về Chromium #1029031

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

Giao diện người dùng 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 đơn giản hoá. Hãy xem phần Giới hạn tốc độ của Bảng điều khiển kiểm tra để biết thêm thông tin về các thay đổi đối với giao diện người dùng giới hạn tốc độ.

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

Nội dung cập nhật về thẻ Phạm vi

Chế độ phạm vi bảo hiểm trên mỗi hàm hoặc trên mỗi khối

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

Trình đơn thả xuống về chế độ phạm vi.

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

Tính năng bật/tắt mức độ phù hợp của mã mà không cần tải lại trang đã bị xoá vì dữ liệu về mức độ phù hợp 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 của hàm đó đã diễn ra từ lâu và trình thu gom rác của V8 đã dọn dẹp hàm đó.

Vấn đề về Chromium #1004203

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

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

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

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới hoặc bất kỳ nội dung nào khác liên quan đến 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 tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.