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 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ó display: grid hoặc display: inline-grid được áp dụng, 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à tạo giao diện lưới chỉ bằng một cú nhấp chuột.

Vấn đề về Chromium: 1203241

Hỗ trợ việc khai báo lại const trong Bảng điều khiển

Giờ đây, Console hỗ trợ việc 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 gây khó chịu cho các nhà phát triển web sử dụng Bảng điều khiển để thử nghiệm mã JavaScript mới.

Nhờ đó, nhà phát triển có thể 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 sẽ đưa ra 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. Việc khai báo lại const được hỗ trợ (tham khảo biến a) trong các tập lệnh REPL riêng biệt. Xin lưu ý rằng theo thiết kế, các trường hợp sau đây không được hỗ trợ:

• Không cho phép khai báo lại const 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)

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 một cách hiệu quả hơn.

Thứ tự nội dung trong tài liệu HTML rất quan trọng đối với khả năng tiếp cận và việc tối ưu hoá 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 có thứ tự trên màn hình khác nhiều so với nội dung trong tài liệu HTML. Đây là một vấn đề lớn về khả năng 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 và rất có thể là khó hiểu so với người dùng nhìn thấy.

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à cách ly, chính sách về quyền và nhiều thông tin khác để 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 đề nhằm tìm hiểu nguyên nhân và giải pháp có thể có.

Vấn đề về Chromium: 1141824

Nội dung cập nhật của bảng điều khiển Mạng

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

Giờ đây, nhãn XHR được đổi tên thành Tìm nạp/XHR. Thay đổi này giúp bạn hiểu 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 các thiết bị trong thẻ Điều kiện mạng

Thông tin mô tả của ứ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 tính năng mới mở rộng cho Client Hints API, 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à tiện lợi.

Vấn đề về Chromium: 1174299

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

Giờ đây, Công cụ cho nhà phát triể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 giới hạn.

Chế độ tương thích ngược và Chế độ tương thích ngược có giới hạn 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 của thời kỳ trước tiêu chuẩn, thường gây ra hiệu ứng hình ảnh không mong muốn.

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

Vấn đề về Chromium: 622660

Thêm Compute Intersections (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ị Compute Intersections (Tính toán giao điểm) trong biểu đồ ngọn lửa. Những thay đổi này giúp bạn xác định các sự kiện intersection observer và gỡ lỗi về 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 hiện đang chạy Lighthouse 7.5. Giờ đây, cảnh báo "thiếu chiều rộng và chiều cao rõ ràng" sẽ bị xoá đối với những 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 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 "Khởi động lại khung" trong ngăn xếp lệnh gọi

Lựa 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 hiệu quả, hiện đang bị lỗi và thường xuyên gặp sự cố.

Vấn đề về Chromium: 1203606

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

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

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

• Nút Lưu mới cho phép bạn tải 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] Trình ghi Puppeteer

Giờ đây, trình ghi Puppeteer sẽ tạo 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 trước đây, DevTools sẽ tạo trực tiếp một tập lệnh Puppeteer. Chúng tôi đã thêm nút Xuất mới để 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ể dùng nút Phát lại mớ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 hình.

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

• 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.
• Đăng bài trên X cho @ChromeDevTools.
• Hãy bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo sử dụng Công cụ cho nhà phát triển" trên YouTube.

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.