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 đượ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 để 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 bằng các biểu tượng trên màn hình (ví dụ: justify-content: space-around) và tạo giao diện lưới chỉ bằng một lần nhấp.

Vấn đề về Chromium: 1203241

Hỗ trợ khai báo lại const trong Console

Bảng điều khiển hiện hỗ trợ khai báo lại câu lệnh const, ngoài các câu lệnh khai báo lại let và class hiện có. Việc không thể khai báo lại là một vấn đề thường gặp đối với các nhà phát triển web sử dụng Bảng điều khiển để thử nghiệm với 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 DevTools để xem cách hoạt động của mã 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, DevTools đã gửi một 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ụ bên dưới. Hoạt động 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 đây không được hỗ trợ theo thiết kế:

• Không cho phép khai báo lại const của tập lệnh trang trong tập lệnh REPL
• Không được 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 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.

Thứ tự nội dung trong tài liệu HTML rất quan trọng đối với việc tối ưu hoá cho công cụ tìm kiếm và khả năng tiếp cận. Các tính năng CSS mới cho phép nhà phát triển tạo nội dung có 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, rất có thể là khó hiểu so với người dùng bình thường.

Vấn đề về Chromium: 1094406

Phím tắt mới để xem thông tin chi tiết về khung hình

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ông tin chi tiết về khung.

Thao tác này sẽ đưa bạn đến chế độ xem thông tin chi tiết về 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à tách biệt, chính sách về quyền, v.v. để gỡ lỗi các vấn đề tiềm ẩn.

Vấn đề về Chromium: 1192084

Hỗ trợ gỡ lỗi CORS nâng cao

Giờ đây, các 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. Nhấp để mở rộng từng vấn đề để tìm hiểu các nguyên nhân và giải pháp tiềm ẩn.

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õ hơn rằng bộ lọc này bao gồm cả các yêu cầu mạng XMLHttpRequest và Fetch API.

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

Thông tin mô tả của ứng dụng tác nhân người dùng cho thiết bị trong thẻ Điều kiện mạng

Gợi ý cho ứ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.

Gợi ý cho ứng dụng tác nhân người dùng là một phần mở rộng mới cho Client Hints API, cho phép nhà phát triển truy cập thông tin về trình duyệt của người dùng theo cách bảo vệ quyền riêng tư và phù hợp với người dùng.

Vấn đề về Chromium: 1174299

Báo cáo vấn đề về chế độ Quirks trong 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 ngược và Chế độ tương thích ngược giới hạn.

Chế độ Quirks và Chế độ Quirks có giới hạn là các chế độ trình duyệt cũ trước khi có các tiêu chuẩn web. Các chế độ này mô phỏng hành vi bố cục trước thời kỳ tiêu 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ể nghĩ rằng các vấn đề đó là do lỗi CSS hoặc HTML do người dùng tạo ra, trong khi vấn đề thực sự là do trang đang ở Chế độ tương thích. Công cụ cho nhà phát triển sẽ đưa ra đề xuất để khắc phục vấn đề này.

Vấn đề về Chromium: 622660

Thêm tính năng Tính các giao điểm 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ị Tính toán giao điểm 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 trình quan sát giao lộ và gỡ lỗi về mức hao tổn 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 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 cho thấy cảnh báo đối với hình ảnh không 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

Ngừng sử dụng trình đơn theo bối cảnh "Restart frame" ("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ò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, hiện đang bị lỗi và thường xuyên gặp sự cố.

Vấn đề về Chromium: 1203606

[Thử nghiệm] Trình 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 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. Trình giám sát giao thức cung cấp cho bạn một cách để xem tất cả các yêu cầu và phản hồi CDP do DevTools thực hiện.

Thêm hai hàm mới để hỗ trợ việc kiểm thử CDP:

• Nút 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 trực tiếp gửi lệnh CDP thô

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

[Thử nghiệm] Trình ghi 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 trước đây, DevTools trực tiếp tạo 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 ghi lại.

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

Vấn đề về Chromium: 1199787

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.