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 92)

Jecelyn Yeen

Trình chỉnh sửa lưới CSS

Một tính năng được nhiều người yêu cầu. Giờ đây, bạn có thể xem trước và tạo Lưới CSS bằng trình chỉnh sửa Lưới CSS mới!

Trình chỉnh sửa lưới CSS

Khi một phần tử HTML trên trang của bạn được áp dụng display: grid hoặc display: inline-grid, bạn có thể thấy một biểu tượng xuất hiện bên cạnh phần tử đó trong ngăn Kiểu. Nhấp vào biểu tượng này để bật/tắt trình chỉnh sửa lưới CSS. Tại đây, bạn có thể xem trước các thay đổi có thể xảy ra bằng các biểu tượng trên màn hình (ví dụ: justify-content: space-around) và chỉnh sửa giao diện lưới chỉ bằng một lần nhấp.

Vấn đề với Chromium: 1203241

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

Play Console hiện hỗ trợ khai báo lại câu lệnh const, ngoài các nội dung khai báo lại let và class hiện tại. Việc không thể khai báo lại là một điều phiền toái 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.

Việc này cho phép nhà phát triển sao chép và dán mã vào bảng điều khiển Công cụ cho nhà phát triển để xem cách thức hoạt động hoặc thử nghiệm, thực hiện các thay đổi nhỏ đối với mã và lặp lại quy trình mà không cần làm mới trang. Trước đây, Công cụ cho nhà phát triển đưa ra lỗi cú pháp nếu mã khai báo lại liên kết const.

Hãy tham khảo ví dụ dưới đây. Việc khai báo lại const được hỗ trợ trên các tập lệnh REPL riêng biệt (tham khảo biến a). Xin lưu ý rằng các trường hợp sau không được thiết kế hỗ trợ:

Không cho phép const khai báo lại tập lệnh trang trong tập lệnh REPL
Không được phép khai báo lại const trong cùng một tập lệnh REPL (tham khảo biến b)

khai báo lại cố định

Vấn đề với Chromium: 1076427

Trình xem thứ tự nguồn

Giờ đây, bạn có thể xem thứ tự của các phần tử nguồn trên màn hình để kiểm tra khả năng hỗ trợ tiếp cận hiệu quả hơn.

Trình xem thứ tự nguồn

Thứ tự nội dung trong tài liệu HTML là yếu tố quan trọng đối với việc tối ưu hoá và tiếp cận cho công cụ tìm kiếm. Các tính năng CSS mới hơn cho phép nhà phát triển tạo nội dung theo thứ tự trên màn hình rất khác so với nội dung trong tài liệu HTML. Đây là một vấn đề lớn về khả năng hỗ trợ tiếp cận vì người dùng trình đọc màn hình sẽ có trải nghiệm khác, dễ nhầm lẫn hơn so với người dùng sáng mắt.

Vấn đề với Chromium: 1094406

Lối tắt mới để xem chi tiết khung

Xem thông tin chi tiết về iframe bằng cách nhấp chuột phải vào phần tử iframe trong bảng điều khiển Phần tử, rồi chọn Hiển thị chi tiết khung.

Hiện chi tiết khung

Thao tác này sẽ đưa bạn đến chế độ xem chi tiết của iframe trong bảng điều khiển Ứng dụng. Tại đây, bạn có thể kiểm tra thông tin chi tiết về tài liệu, trạng thái bảo mật và cách ly, chính sách về quyền, v.v. để khắc phục các vấn đề tiềm ẩn.

Chế độ xem chi tiết khung

Vấn đề với Chromium: 1192084

Hỗ trợ nâng cao cho tính năng gỡ lỗi CORS

Lỗi chia sẻ tài nguyên trên nhiều nguồn gốc (CORS) hiện xuất hiện trong thẻ Vấn đề. Có nhiều lý do gây ra lỗi CORS. Hãy nhấp để mở rộng từng vấn đề để tìm hiểu nguyên nhân tiềm ẩn và giải pháp.

Các vấn đề về CORS (chia sẻ tài nguyên Internet) trong thẻ Vấn đề

Vấn đề với Chromium: 1141824

Nội dung cập nhật về bảng điều khiển mạng

Đổi tên nhãn XHR thành Tìm nạp/XHR

Nhãn XHR hiện được đổi tên thành Tìm nạp/XHR. Thay đổi này làm rõ việc bộ lọc này bao gồm cả yêu cầu mạng XMLHttpRequest và API Tìm nạp.

Nhãn tìm nạp/XHR

Vấn đề với Chromium: 1201398

Lọc loại tài nguyên Wasm trong bảng điều khiển Mạng

Giờ đây, bạn có thể nhấp vào nút Wasm mới để lọc các yêu cầu về mạng Wasm.

Lọc theo Wasm

Vấn đề với Chromium: 1103638

Gợi ý của ứng dụng tác nhân người dùng cho thiết bị trong thẻ Tình trạng mạng

Gợi ý ứng dụng tác nhân người dùng hiện áp dụng cho các thiết bị trong trường Tác nhân người dùng trong thẻ Điều kiện mạng.

Tính năng Gợi ý ứng dụng tác nhân người dùng là một bản mở rộng mới cho API Gợi ý ứng dụng, giúp nhà phát triển truy cập vào thông tin về trình duyệt của người dùng theo cách bảo đảm quyền riêng tư và hiệu quả.

Gợi ý của ứng dụng tác nhân người dùng cho thiết bị trong thẻ Tình trạng mạng

Vấn đề với Chromium: 1174299

Báo cáo vấn đề về chế độ tương thích với thẻ Vấn đề

Công cụ cho nhà phát triển hiện báo cáo các vấn đề về Chế độ tương thích và Chế độ tương tác giới hạn.

Chế độ tương thích và Chế độ tương tác hạn chế là các chế độ trình duyệt cũ từ trước khi các tiêu chuẩn web được tạo ra. Các chế độ này mô phỏng hành vi bố cục thời tiền tiêu chuẩn thường gây ra hiệu ứng hình ảnh không mong muốn.

Khi gỡ lỗi sự cố bố cục, nhà phát triển có thể cho rằng chúng là do lỗi CSS hoặc HTML do người dùng tạo ra, trong khi vấn đề thực sự là Chế độ tương thích trên trang. Công cụ cho nhà phát triển đưa ra đề xuất cách khắc phục.

Báo cáo vấn đề về chế độ tương thích với thẻ Vấn đề

Vấn đề với Chromium: 622660

Thêm các giao điểm trong tính toán vào bảng điều khiển Hiệu suất

Giờ đây, Công cụ cho nhà phát triển hiển thị Các giao điểm tính toán trong biểu đồ hình ngọn lửa. Những thay đổi này giúp bạn xác định các sự kiện của trình quan sát điểm giao cắt và gỡ lỗi cho các chi phí hiệu suất tiềm ẩn.

Tính các giao điểm trong bảng điều khiển Hiệu suất

Vấn đề với Chromium: 1199137

Lighthouse 7.5 trong bảng điều khiển Lighthouse

Bảng điều khiển Lighthouse hiện đang chạy Lighthouse 7.5. Cảnh báo "thiếu chiều rộng và chiều cao rõ ràng" hiện đã bị xoá đối với hình ảnh có aspect-ratio được xác định trong CSS. Trước đây, Lighthouse hiển thị cảnh báo cho những hình ảnh chưa xác định chiều rộng và chiều cao.

Hãy xem ghi chú phát hành để biết danh sách đầy đủ các thay đổi.

Vấn đề với Chromium: 772558

Ngừng sử dụng trình đơn theo bối cảnh "Khởi động lại khung" trong ngăn xếp lệnh gọi

Tuỳ chọn Khởi động lại khung hiện không được dùng nữa. Tính năng này cần được phát triển thêm để hoạt động tốt. Tính năng này hiện đang bị hỏng và thường gặp sự cố.

Ngừng sử dụng trình đơn theo bối cảnh Khởi động lại khung

Vấn đề với Chromium: 1203606

[Thử nghiệm] Trình giám sát giao thức

Dịch vụ Công cụ của Chrome cho nhà phát triển sử dụng Giao thức Công cụ của Chrome cho nhà phát triển (CDP) để đo lường, kiểm tra, gỡ lỗi và lập hồ sơ cho trình duyệt Chrome. Công cụ giám sát giao thức giúp bạn xem tất cả các yêu cầu và phản hồi CDP do Công cụ cho nhà phát triển thực hiện.

Bổ sung hai chức năng mới để hỗ trợ việc kiểm thử CDP:

Nút Lưu mới giúp bạn tải tin nhắn đã ghi lại xuống dưới dạng tệp JSON
Một trường mới cho phép bạn gửi trực tiếp một lệnh CDP thô

Giám sát giao thức

Vấn đề với Chromium: 1204004, 1204466

[Thử nghiệm] Máy ghi âm bằng Puppeteer

Trình ghi Puppeteer hiện tạo ra một danh sách các bước dựa trên hoạt động tương tác của bạn với trình duyệt, trong khi Công cụ cho nhà phát triển trước đó đã trực tiếp tạo tập lệnh Puppeteer. Nút Xuất mới sẽ được thêm vào để cho phép bạn xuất các bước dưới dạng tập lệnh Puppeteer.

Sau khi ghi lại các bước, bạn có thể sử dụng nút mới là Phát lại để phát lại các bước đó. Làm theo hướng dẫn tại đây để tìm hiểu cách bắt đầu ghi lại.

Xin lưu ý rằng đây là một thử nghiệm đang ở giai đoạn đầu. Chúng tôi dự định cải thiện và mở rộng chức năng Máy ghi âm theo thời gian.

Máy ghi hình

Vấn đề với Chromium: 1199787

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy gửi đề xuất hoặc phản hồi cho chúng tôi qua 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 phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để 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 video trên YouTube.