Trang này được dịch bởi Cloud Translation API.

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

Sofia Emelianova

Cải thiện gỡ lỗi biểu định kiểu bị thiếu

Công cụ cho nhà phát triển có một số điểm cải tiến nhằm giúp bạn xác định và gỡ lỗi nhanh hơn khi thiếu biểu định kiểu:

Cây Nguồn > Trang hiện chỉ hiển thị các biểu định kiểu được triển khai và tải thành công để giảm thiểu nhầm lẫn.
Nguồn > Trình chỉnh sửa nay gạch dưới và hiển thị chú giải công cụ về lỗi cùng dòng bên cạnh các câu lệnh @import, url() và href không thành công.

Nội dung được gạch chân kèm theo chú thích trong bảng điều khiển Nguồn.

Bảng điều khiển, ngoài đường liên kết đến các yêu cầu không thực hiện được, giờ đây còn cung cấp đường liên kết đến dòng chính xác tham chiếu đến biểu định kiểu không tải được.

Bảng điều khiển này sẽ cung cấp đường liên kết đến các dòng chính xác chứa câu lệnh có vấn đề.

Bảng điều khiển Network (Mạng) sẽ liên tục điền sẵn các đường liên kết đến dòng chính xác đến cột Initiator (Trình khởi tạo) tham chiếu đến biểu định kiểu không tải được.
Bảng điều khiển Issues (Vấn đề) liệt kê tất cả vấn đề khi tải biểu định kiểu, bao gồm cả URL bị hỏng, yêu cầu không thành công và câu lệnh @import bị đặt nhầm.

Bảng điều khiển Các vấn đề có các đường liên kết đến các nguồn và yêu cầu.

Vấn đề về Chromium: 1440626, 1442198, 1453611.

Hỗ trợ thời gian tuyến tính trong phần tử > Kiểu > Trình chỉnh sửa tốc độ

Trình chỉnh sửa tốc độ trong Phần tử > Kiểu cho phép bạn điều chỉnh các giá trị transition-timing-function và animation-timing-function chỉ bằng một cú nhấp chuột. Trong phiên bản này, Easing Editor (Trình chỉnh sửa tốc độ) được hỗ trợ hàm thời gian tuyến tính.

Để định cấu hình thời gian tuyến tính, hãy nhấp vào nút bộ chọn tuyến tính. Để thêm một điểm điều khiển, hãy nhấp vào vị trí bất kỳ trên đường kẻ. Để xoá một điểm điều khiển, hãy nhấp đúp vào điểm điều khiển đó. Bạn cũng có thể chọn một trong các giá trị đặt trước: linear, elastic, bounce hoặc emphasized. Xem video để xem hoạt động điều chỉnh tuyến tính.

Vấn đề về Chromium: 1421241.

Hỗ trợ bộ chứa lưu trữ và chế độ xem siêu dữ liệu

Phần Ứng dụng > Bộ nhớ được hỗ trợ cho bộ chứa lưu trữ. Các bộ chứa lưu trữ độc lập với nhau, vì vậy, bạn có thể chỉ định mức độ ưu tiên giải phóng cho từng phần dữ liệu và đảm bảo dữ liệu có giá trị nhất không bị xoá. Mỗi bộ chứa lưu trữ có thể lưu trữ dữ liệu liên kết với các API lưu trữ đã thiết lập, chẳng hạn như IndexedDB và CacheStorage.

Hãy xem bộ câu hỏi này để kiểm tra tính năng. Mở Công cụ cho nhà phát triển, chuyển đến Ứng dụng > Bộ nhớ > Cơ sở dữ liệu đã lập chỉ mục rồi chạy mã. Giờ đây, Công cụ cho nhà phát triển sẽ cho bạn thấy các bộ chứa và nội dung trong đó. Chọn một bộ chứa để xem siêu dữ liệu của bộ chứa đó.

Xem siêu dữ liệu của một bộ chứa.

Chế độ xem siêu dữ liệu hợp nhất hiện cũng có cho các phần lưu trữ cục bộ, phiên và bộ nhớ đệm.

Chế độ xem siêu dữ liệu hợp nhất mới.

Vấn đề về Chromium: 1448011, 1406017.

Lighthouse 10.3.0

Bảng điều khiển Lighthouse hiện chạy phiên bản Lighthouse 10.3.0. Đáng chú ý nhất là phiên bản này thêm 4 quy trình kiểm tra mới nhằm phát hiện nhiều vấn đề về khả năng hỗ trợ tiếp cận liên quan đến tiêu đề bảng và phụ đề, tên nút nhập và ngôn ngữ không khớp. Ví dụ:

Kiểm tra tiêu đề bảng đã vượt qua.

Ngoài ra, hãy xem danh sách đầy đủ các thay đổi. Để tìm hiểu thông tin cơ bản về cách sử dụng bảng điều khiển Lighthouse trong Công cụ cho nhà phát triển, hãy xem bài viết Lighthouse: Tối ưu hoá tốc độ trang web.

Vấn đề về Chromium: 772558.

Hỗ trợ tiếp cận: Lệnh bàn phím và khả năng đọc màn hình được cải thiện

Công cụ cho nhà phát triển hiện hỗ trợ thêm nhiều phím tắt và khắc phục sự cố với trình đọc màn hình:

Giờ đây, bạn có thể mở trình đơn theo bối cảnh bằng phím tắt, ví dụ: Shift+F10 trên Windows và nhiều bản phân phối Linux. Đối với các phím tắt trên MacOS, hãy xem phần Thao tác của con trỏ thay thế.
Các ứng dụng trình đọc màn hình:
- Không cần thiết thông báo nhãn hộp đánh dấu hai lần.
- Sẽ thông báo tên tiêu đề cột cho các cột có thể sắp xếp khi bạn nhấn phím tắt "Đọc tiêu đề cột".

Nhóm Công cụ cho nhà phát triển bày tỏ lòng biết ơn Yanling Wang và Elorm Coch đã đạt được những cải tiến này.

Vấn đề về Chromium: 1446482, 1414952.

Nội dung nổi bật khác

Dưới đây là một số nội dung sửa lỗi và cải tiến đáng chú ý trong bản phát hành này:

Bảng điều khiển Network (Mạng) sẽ tiếp tục ghi lại hoạt động mạng ngay cả sau khi bạn đã tương tác với dòng thời gian (1422552).
Giờ đây, bảng điều khiển Phạm vi bao phủ sẽ nhận ra liệu có kích hoạt kết xuất trước hoặc điều hướng bộ nhớ đệm cho thao tác tiến/lùi và nhắc bạn tải lại (1393057).
Giờ đây, bạn có thể di chuyển ngăn Nguồn > Điểm ngắt bằng bàn phím: Mũi tên lên và Mũi tên xuống để di chuyển và Phím cách để chọn (1446150).
Khắc phục việc tải các tệp HAR lên và lọc trong bảng điều khiển Network (Mạng) (1450622).
Biểu đồ ngọn lửa trong bảng Hiệu suất hiện đặt các khoảng trống nhỏ giữa các dấu vết để hiển thị chúng tốt hơn (1452150).
Khắc phục lỗi liên kết tự động cho các tệp được nhúng trong bản đồ nguồn (1446383).

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 > 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.