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

Jecelyn Yeen

Sử dụng Công cụ cho nhà phát triển bằng ngôn ngữ bạn muốn

Chrome DevTools hiện hỗ trợ hơn 80 ngôn ngữ, cho phép bạn làm việc bằng ngôn ngữ mà mình ưu tiên!

Mở Settings (Cài đặt), sau đó chọn ngôn ngữ bạn muốn trong trình đơn thả xuống Preferences (Lựa chọn ưu tiên) > Language (Ngôn ngữ) rồi tải lại Công cụ cho nhà phát triển.

Lựa chọn ưu tiên" width="800" height="494">

Vấn đề về Chromium: 1163928

Các thiết bị Nest Hub mới trong Danh sách thiết bị

Giờ đây, bạn có thể mô phỏng kích thước của Nest Hub và Nest Hub Max ở Chế độ thiết bị.

Nhấp vào Toggle Device Toolbar (Bật/tắt thanh công cụ thiết bị)   Bật/tắt thanh công cụ trên thiết bị  , chọn Nest Hub hoặc Nest Hub Max trong danh sách thiết bị.

Thiết bị Nest Hub ở Chế độ thiết bị

Vấn đề về Chromium: 1223525

Thử nghiệm nguồn trong chế độ xem Chi tiết khung

Giờ đây, bạn có thể xem thông tin về thử nghiệm nguồn gốc của một trang web trong chế độ xem chi tiết khung trong bảng điều khiển Ứng dụng.

Bản dùng thử theo nguyên gốc cấp cho bạn quyền sử dụng một tính năng mới hoặc tính năng thử nghiệm, để xây dựng chức năng mà người dùng có thể dùng thử trong một khoảng thời gian giới hạn trước khi tính năng đó được cung cấp cho mọi người.

Mở một trang có các thử nghiệm nguồn gốc (ví dụ: trang minh hoạ). Trong bảng Application (Ứng dụng), hãy di chuyển xuống phần Frames (Khung) rồi chọn khung trên cùng.

Thử nghiệm nguồn trong chế độ xem Chi tiết khung

Vấn đề về Chromium: 607555

Huy hiệu truy vấn vùng chứa CSS mới

Huy hiệu vùng chứa mới được thêm vào bên cạnh các phần tử vùng chứa (các phần tử tổ tiên khớp với tiêu chí của quy tắc @container). Nhấp vào huy hiệu để bật/tắt chế độ hiển thị lớp phủ của vùng chứa đã chọn và tất cả các thành phần con truy vấn của vùng chứa đó trên trang.

Huy hiệu truy vấn vùng chứa CSS

Vấn đề về Chromium: 1146422

Hộp đánh dấu mới để đảo ngược bộ lọc mạng

Sử dụng hộp đánh dấu Đảo ngược mới để đảo ngược các bộ lọc trong bảng điều khiển Mạng.

Ví dụ: bạn có thể nhập "status-code: 404" để lọc các yêu cầu mạng có trạng thái 404. Bật hộp đánh dấu Đảo ngược để phủ nhận bộ lọc (hiển thị tất cả các yêu cầu mạng không có trạng thái 404).

Đảo ngược bộ lọc mạng

Vấn đề về Chromium: 1054464

Thanh bên Console sắp ngừng hoạt động

Thanh bên Console sẽ bị xoá để chuyển giao diện người dùng bộ lọc sang thanh công cụ. Bạn có lo ngại hoặc ý kiến phản hồi nào không? Hãy cho chúng tôi biết thông qua công cụ theo dõi lỗi này.

Thông báo ngừng sử dụng thanh bên của bảng điều khiển

Vấn đề về Chromium: 1232937

Hiển thị tiêu đề Set-Cookie thô trong thẻ Vấn đề và bảng điều khiển Mạng

Giờ đây, Công cụ cho nhà phát triển sẽ hiển thị tiêu đề Set-Cookie thô trong thẻ Vấn đề.

Trước đây, Công cụ cho nhà phát triển không hiển thị cookie bị lỗi (tiêu đề Set-Cookie không chính xác) trong bảng điều khiển Mạng. Với bộ lọc response-header-set-cookie mới được thêm vào bảng điều khiển Mạng, người dùng có thể lọc phản hồi tiêu đề Set-Cookie thô. Công cụ cho nhà phát triển sẽ liên kết các tiêu đề Set-Cookie thô trong thẻ Vấn đề với bảng điều khiển Mạng.

Tiêu đề "Set-Cookie" thô trong thẻ Vấn đề và bảng điều khiển Mạng

Vấn đề về Chromium: 1179186

Hiển thị nhất quán các đối tượng truy cập gốc dưới dạng các thuộc tính riêng trong Console

Giờ đây, Bảng điều khiển sẽ luôn hiển thị các trình truy cập gốc dưới dạng các thuộc tính riêng.

Ví dụ: khi đánh giá biểu thức new Int8Array([1, 2, 3]) trong Console (Bảng điều khiển), các công cụ hỗ trợ gốc như length, byteOffset không xuất hiện trong bản xem trước. Với bản cập nhật mới nhất này, các công cụ truy cập gốc sẽ xuất hiện trong bản xem trước và các giá trị sẽ được đánh giá ngay khi mở rộng.

Hiển thị nhất quán các đối tượng truy cập gốc dưới dạng các thuộc tính riêng trong Console

Các vấn đề về Chromium: 1076820, ​​1199247

Dấu vết ngăn xếp lỗi thích hợp cho tập lệnh nội tuyến có #sourceURL

Công cụ cho nhà phát triển hiện giải quyết các tập lệnh nội tuyến bằng #sourceURL một cách thích hợp và cho thấy dấu vết ngăn xếp lỗi thích hợp để gỡ lỗi.

Trước đây, Công cụ cho nhà phát triển hiển thị vị trí không chính xác cho các tập lệnh nội tuyến có #sourceURL, so với tài liệu xung quanh thay vì so với thẻ <script> mở.

Dấu vết ngăn xếp lỗi thích hợp cho tập lệnh nội tuyến có #sourceURL

Các vấn đề về Chromium: 1183990, ​​578269

Thay đổi định dạng màu trong ngăn Đã tính

Giờ đây, bạn có thể thay đổi định dạng màu của bất kỳ phần tử nào trong ngăn Đã tính toán bằng cách nhấn phím Shift + nhấp vào bản xem trước màu.

Nhấn Shift + nhấp vào bản xem trước màu để thay đổi định dạng màu

Vấn đề về Chromium: 1226371

Thay thế chú thích tuỳ chỉnh bằng chú thích HTML gốc

Công cụ cho nhà phát triển hiện sử dụng chú thích HTML gốc trên tất cả các thành phần. Công cụ cho nhà phát triển đã triển khai chú thích tuỳ chỉnh trong một thời gian dài do thiếu kiểu cho chú thích HTML gốc.

Rất tiếc, việc duy trì một chế độ triển khai chú thích tuỳ chỉnh khá phức tạp và chúng tôi thường xuyên gặp phải các lỗi phức tạp.

Sau khi đánh giá lại lợi ích của các chế độ triển khai tuỳ chỉnh, chúng tôi nhận thấy chú thích HTML gốc là đủ cho Công cụ cho nhà phát triển và việc áp dụng chú thích sẽ ngăn chặn nhiều vấn đề cho người dùng.

Chú giải công cụ của Công cụ cho nhà phát triển

Vấn đề về Chromium: 1223391

[Thử nghiệm] Ẩn vấn đề trong thẻ Vấn đề

Bật thử nghiệm ẩn trình đơn sự cố để ẩn các vấn đề trong thẻ Vấn đề. Bằng cách này, bạn có thể tập trung vào những vấn đề quan trọng đối với mình.

Trong thẻ Vấn đề, hãy di chuột qua một vấn đề, nhấp vào trình đơn vấn đề   Thêm   ở bên phải, chọn Ẩn các vấn đề tương tự để ẩn vấn đề đó.

Trình đơn theo bối cảnh ẩn vấn đề thử nghiệm

Vấn đề về Chromium: 1175722

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.