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

Kayce Basques
Kayce Basques
X GitHub

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

Giờ đây, Bảng điều khiể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 đề gây khó chịu 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 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, Console cho phép khai báo lại:

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

Vấn đề #1004193 của Chromium

Cải thiện quy trình 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, tức là tăng cường khả năng hỗ trợ cho việc chuyển qua mã, thiết lập điểm ngắt và giải quyết dấu vết ngăn xếp bằng các ngôn ngữ nguồn trong Công cụ cho nhà phát triển. Hãy xem bài viết Cải thiện tính năng gỡ lỗi WebAssembly trong Công cụ của Chrome cho nhà phát triển để biết toàn bộ câu chuyện.

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

Nội dung cập nhật của bảng điều khiển Mạng

Chuỗi trình khởi tạo yêu cầu 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 của một Chuỗi yêu cầu khởi đầu trong thẻ Trình khởi tạo

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 của tài nguyên đó:

  • Tài nguyên được kiểm tra sẽ đượ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à các phần phụ thuộc. Trong ảnh chụp màn hình ở trên, https://web.dev/chunk-f34f99f7.js là một 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 đề #842488 của Chromium

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, bảng điều khiển Mạng hiện sẽ đặt một đường viền màu xanh dương 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ó xảy ra sớm hơn hoặc 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 được kiểm tra.

Vấn đề #988253 của Chromium

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 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 Thác nước rồi chọn Đường dẫn hoặc URL để hiện các cột mới.

Vấn đề #993366 của Chromium

Đã cập nhật chuỗi tác nhân người dùng

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

Các chuỗi User-Agent đượ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 (Tác nhân người dùng) trong thẻ Network Conditions (Điều kiện mạng).

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

Vấn đề #1029031 của Chromium

Nội dung cập nhật cho bảng 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 lựa chọn cấu hình điều tiết đã được đơn giản hoá. Hãy xem phần Điều tiết bảng 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 điều tiết.

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 theo chức năng hoặc theo khối

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

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

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

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 dùng đến nếu hàm đó đã được thực thi từ lâu và trình thu gom rác của V8 đã dọn dẹp hàm đó.

Vấn đề #1004203 của Chromium

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 truy cập vào 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 các vấn đề trên trang web của mình trước khi người dùng tìm thấy!

Liên hệ với nhóm Chrome DevTools

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng mới, nội dung cập nhật 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 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.