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ình muố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 DevTools.

Preferences" width="800" height="494">

Vấn đề về Chromium: 1163928

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 biểu tượng Bật/tắt thanh công cụ của thiết bị    , chọn Nest Hub hoặc Nest Hub Max trong danh sách thiết bị.

Vấn đề về Chromium: 1223525

Thử nghiệm nguồn gốc trong chế độ xem Chi tiết về khung

Giờ đây, bạn có thể xem thông tin về các thử nghiệm gốc của một trang web trong chế độ xem chi tiết về 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 tất cả mọi người.

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

Vấn đề về Chromium: 607555

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

Một 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ử cấp trên khớp với tiêu chí của quy tắc tại @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 phần tử con truy vấn của vùng chứa đó trên trang.

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 Invert (Đả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 Invert (Lật ngược) để phủ định 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).

Vấn đề về Chromium: 1054464

Sắp ngừng sử dụng thanh bên Console

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

Vấn đề về Chromium: 1232937

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

Giờ đây, DevTools hiển thị các tiêu đề Set-Cookie thô trong thẻ Issues (Vấn đề).

Trước đây, DevTools không hiển thị cookie có định dạng không chính xác (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ụ dành 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.

Vấn đề về Chromium: 1179186

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

Console hiện hiển thị các phương thức truy cập gốc dưới dạng thuộc tính của riêng chúng một cách nhất quán.

Ví dụ: khi đánh giá biểu thức new Int8Array([1, 2, 3]) trong Console, các phương thức truy cập gốc như length, byteOffset không hiển thị trong bản xem trước. Với bản cập nhật mới nhất này, các phương thứ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á nhanh khi mở rộng.

Vấn đề về Chromium: 1076820, ​​1199247

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

Công cụ cho nhà phát triển hiện phân giải các tập lệnh nội tuyến bằng #sourceURL đúng cách và hiển thị 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> đang mở.

Vấn đề về Chromium: 1183990, ​​578269

Thay đổi định dạng màu trong ngăn Computed (Đã tính toán)

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 Computed (Đã tính toán) bằng cách nhấn tổ hợp phím Shift + nhấp vào bản xem trước màu.

Vấn đề về Chromium: 1226371

Thay thế chú giải công cụ tuỳ chỉnh bằng chú giải công cụ HTML gốc

DevTools hiện sử dụng chú giải công cụ 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ú giải công cụ tuỳ chỉnh trong một thời gian dài do thiếu kiểu của chú giải công cụ HTML gốc.

Rất tiếc, việc duy trì việc triển khai chú giải công cụ tuỳ chỉnh rất phức tạp và chúng ta thường gặp phải các lỗi phức tạp.

Sau khi đánh giá lại các lợi ích của việc triển khai tuỳ chỉnh, chúng tôi nhận thấy rằng chú giải công cụ HTML gốc là đủ cho DevTools và việc sử dụng chú giải công cụ sẽ giúp người dùng tránh được nhiều vấ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 sự cố trong thẻ Sự cố. Nhờ đó, 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 đề     ở bên phải, chọn Ẩn các vấn đề như thế này để ẩn vấn đề đó.

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

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại crbug.com.
• Báo cáo sự cố của Công cụ cho nhà phát triển bằng cách sử dụng biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.