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

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

Một tính năng được yêu cầu nhiề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!

Khi một phần tử HTML trên trang của bạn đã á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 để 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 tiềm năng 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ề Chromium: 1203241

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

Giờ đây, Play Console hỗ trợ khai báo lại câu lệnh const, cùng với các phương thức khai báo lại let và class hiện có. Việc không thể khai báo lại là vấn đề thường gặp đối với các nhà phát triển web sử dụng Console để thử nghiệm mã JavaScript mới.

Điều 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 mã 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 gặp lỗi cú pháp nếu mã đã khai báo lại một liên kết const.

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

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

Vấn đề về Chromium: 1076427

Trình xem thứ tự nguồn

Giờ đây, bạn có thể xem thứ tự của các thành phần 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.

Thứ tự nội dung trong tài liệu HTML có vai trò quan trọng đối với khả năng tối ưu hoá và khả năng tiếp cận cho công cụ tìm kiếm. Các tính năng CSS mới cho phép nhà phát triển tạo nội dung trông rất khác về thứ tự trên màn hình so với nội dung trong tài liệu HTML. Đây là một vấn đề lớn về 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 biệt, nhiều khả năng là dễ gây nhầm lẫn hơn so với người dùng có mắt.

Vấn đề về Chromium: 1094406

Lối tắt mới để xem thông tin chi tiết về khung

Xem chi tiết 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.

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

Vấn đề về Chromium: 1192084

Tính năng hỗ trợ nâng cao cho việc gỡ lỗi CORS

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

Vấn đề về 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 giúp làm rõ rằng bộ lọc này bao gồm cả yêu cầu mạng XMLHttpRequest và API Tìm nạp.

Vấn đề về 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 mạng Wasm.

Vấn đề về Chromium: 1103638

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

Gợi ý về ứng dụng tác nhân người dùng hiện được á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 phần mở rộng mới của API Gợi ý ứng dụng, cho phé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à thiết kế công thái học.

Vấn đề về Chromium: 1174299

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

Công cụ cho nhà phát triển hiện sẽ báo cáo các vấn đề về Chế độ tương thích ngược và Chế độ tương thích ngược.

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

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

Vấn đề về Chromium: 622660

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

Công cụ cho nhà phát triển hiện hiển thị 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 sự kiện trình quan sát giao lộ và gỡ lỗi chi phí hiệu suất tiềm ẩn của sự kiện đó.

Vấn đề về Chromium: 1199137

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

Bảng điều khiển Lighthouse đang chạy Lighthouse 7.5. Trường "thiếu chiều rộng và chiều cao rõ ràng" cảnh báo 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 đối với 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ề Chromium: 772558

Không dùng "Khung khởi động lại" nữa trình đơn theo bối cảnh trong ngăn xếp lệnh gọi

Tuỳ chọn Khởi động lại khung hình hiện không còn đượ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 bị lỗi và thường gặp sự cố.

Vấn đề về Chromium: 1203606

[Thử nghiệm] Giám sát giao thức

Công cụ của Chrome cho nhà phát triển sử dụng Giao thức Chrome Công cụ cho nhà phát triển (CDP) để đo lường, kiểm tra, gỡ lỗi và phân tích tài nguyên trình duyệt Chrome. Trình giám sát giao thức cung cấp cho bạn cách 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 đưa ra.

Hai hàm mới được thêm vào để hỗ trợ việc thử nghiệm CDP:

• Nút Save (Lưu) mới cho phép bạn tải các tin nhắn đã ghi 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 lệnh CDP thô

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

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

Trình ghi Puppeteer hiện tạo 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 đây đã tạo trực tiếp tập lệnh Puppeteer. Một nút Export (Xuất) mới đượ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 Phát lại (mới) để phát lại các bước. Hãy làm theo hướng dẫn tại đây để tìm hiểu cách bắt đầu quay video.

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

Vấn đề về Chromium: 1199787

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

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.