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

Hỗ trợ cho việc khai báo lại letclass trong Console

Console hiện hỗ trợ việc khai báo lại các câu lệnh letclass. Việc không thể khai báo lại là vấn đề phổ biến đối với các nhà phát triển web sử dụng Console để 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ẽ báo lỗi:

Ảnh chụp màn hình Console trong Chrome 78 cho thấy không thể khai báo lại cho phép.

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

Ảnh chụp màn hình Console trong Chrome 80 cho thấy quá trình khai báo cho phép đã thành công.

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ợ việc bước qua mã, đặt điểm ngắt và phân giải dấu vết ngăn xếp bằng ngôn ngữ nguồn của bạ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.

Ảnh chụp màn hình gỡ lỗi WebAssembly mới hỗ trợ 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 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 tại sao một tài nguyên được yêu cầu hoặc một hoạt động mạng mà một tài nguyên nhất định (chẳng hạn như một tập lệnh) gây ra.

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

Sau khi ghi nhật ký hoạt động mạng trong bảng điều khiển Network, 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 đã tạo 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 đã 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 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 diễn ra sớm hơn hay muộn hơn dự kiến.

Ảnh chụp màn hình ngăn Overview (Tổng quan) làm nổi bật tài nguyên được 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ột Đường dẫnURL 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á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 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. Chuỗi User-Agent ảnh hưởng đến tiêu đề HTTP User-Agent đính kèm với 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 định sẵn đã đượ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 Tác nhân người dùng trong thẻ Điều kiện mạng.

Để truy cập vào Đ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 đề 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 đơ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ề những thay đổi trên giao diện người dùng điều tiết.

Giao diện người dùng cho cấu hình mớ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 việc hệ thống cần thu thập dữ liệu về mức độ sử dụng mã theo hàm hay theo khối. Phạm vi trên mỗi khối chi tiết hơn nhưng việc thu thập cũng tốn kém hơn nhiều. 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.

Trình đơn thả xuống về chế độ bao phủ.

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

Việc bật/tắt 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 được sử dụng nếu quá trình thực thi đã 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 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ố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59