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!

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

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 letclass 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 các trường hợp sau không được hỗ trợ trong thiết kế:

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

khai báo lại const

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.

Trình xem thứ tự nguồ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.

Hiện chi tiết khung

Thao tác này sẽ chuyển bạn đến chế độ xem 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.v. để gỡ lỗi các vấn đề tiềm ẩn.

Chế độ xem chi tiết khung

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.

Các vấn đề về CORS trong thẻ Vấ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õ rằng bộ lọc này bao gồm cả yêu cầu mạng XMLHttpRequestAPI Tìm nạp.

Nhãn Tìm nạp/XHR

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.

Lọc theo 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.

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

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ượcChế độ 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 đề.

Báo cáo vấn đề về chế độ tương thích ngược trong thẻ 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 đó.

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

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

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

Trình đơn ngữ cảnh Khởi động lại khung không được dùng nữa

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ô

Giám sát giao thức

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.

Máy ghi âm Puppeteer

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ố trong Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   Thêm   > 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59