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

Kayce Basques

Sao chép kiểu của phần tử

Nhấp chuột phải vào một nút trong Cây DOM để sao chép CSS của nút DOM đó vào bảng nhớ tạm.

Sao chép kiểu.

Hình 1. Sao chép kiểu phần tử.

Cảm ơn Adam Argyle và VisBug đã cung cấp nguồn cảm hứng cho chúng tôi.

Trực quan hoá việc thay đổi bố cục

Giả sử bạn đang đọc một bản tin trên trang web yêu thích của mình. Khi bạn đọc trang, bạn sẽ liên tục mất vị trí của mình do nội dung nhảy xung quanh. Vấn đề này được gọi là dịch chuyển bố cục. Việc này thường xảy ra khi hình ảnh và quảng cáo tải xong. Trang chưa dành riêng không gian cho hình ảnh và quảng cáo, vì vậy, trình duyệt phải chuyển tất cả nội dung khác xuống để tạo không gian cho chúng. Giải pháp là sử dụng placeholders.

Công cụ cho nhà phát triển hiện có thể giúp bạn phát hiện sự dịch chuyển bố cục:

Mở Trình đơn lệnh.
Bắt đầu nhập Rendering.
Chạy lệnh Show Rendering (Hiển thị kết xuất).
Bật hộp đánh dấu Layout Shift Regions (Khu vực thay đổi bố cục). Khi bạn tương tác với một trang, các thay đổi về bố cục được đánh dấu màu xanh dương.

Thay đổi bố cục.

Hình 2. Thay đổi bố cục.

Vấn đề về Chromium #961846

Lighthouse 5.1 trong bảng điều khiển Kiểm tra

Bảng điều khiển Kiểm tra hiện đang chạy Lighthouse 5.1. Các quy trình kiểm tra mới bao gồm:

Cung cấp apple-touch-icon hợp lệ. Kiểm tra để đảm bảo rằng bạn có thể thêm PWA vào màn hình chính của iOS.
Duy trì số lượng yêu cầu và kích thước tệp ở mức thấp. Báo cáo tổng số yêu cầu mạng và kích thước tệp cho nhiều danh mục, chẳng hạn như tài liệu, tập lệnh, biểu định kiểu, hình ảnh, v.v.
Độ trễ đầu vào đầu tiên tối đa tiềm năng. Đo lường khoảng thời gian tiềm năng tối đa giữa lượt tương tác với trang đầu tiên của người dùng và phản hồi của trình duyệt với lượt tương tác đó. Xin lưu ý rằng chỉ số này thay thế cho chỉ số Độ trễ đầu vào ước tính. Độ trễ đầu vào đầu tiên tối đa có thể không ảnh hưởng đến điểm của danh mục Hiệu suất.

Giao diện người dùng mới của bảng điều khiển Kiểm tra.

Hình 3. Giao diện người dùng mới của bảng điều khiển Kiểm tra.

Các phiên bản Node và CLI của Lighthouse 5.1 có 3 tính năng chính mới đáng xem:

Ngân sách hiệu suất. Hãy ngăn trang web của bạn giảm dần theo thời gian bằng cách chỉ định số lượng yêu cầu và kích thước tệp mà các trang không được vượt quá.
Trình bổ trợ. Mở rộng Lighthouse bằng các quy trình kiểm tra tuỳ chỉnh của riêng bạn.
Gói ngăn xếp. Thêm kết quả kiểm tra được điều chỉnh theo bộ phần mềm cơ sở công nghệ cụ thể. Gói ngăn xếp WordPress đã được vận chuyển trước. Gói ngăn xếp React và AMP đang được phát triển.

Đồng bộ hoá giao diện hệ điều hành

Nếu bạn đang sử dụng giao diện tối của hệ điều hành, thì giờ đây, Công cụ cho nhà phát triển sẽ tự động chuyển sang giao diện tối của riêng nó.

Phím tắt để mở Breakpoint Editor (Trình chỉnh sửa điểm ngắt)

Nhấn tổ hợp phím Control+Alt+B hoặc Command+Option+B (máy Mac) khi lấy tiêu điểm trong Trình chỉnh sửa của bảng điều khiển Nguồn để mở Trình chỉnh sửa điểm ngắt. Sử dụng Breakpoint Editor (Trình chỉnh sửa điểm ngắt) để tạo Logpoints (Điểm nhật ký) và Điểm ngắt có điều kiện.

Breakpoint Editor (Trình chỉnh sửa điểm ngắt).

Hình 4. Breakpoint Editor (Trình chỉnh sửa điểm ngắt).

Tìm nạp trước bộ nhớ đệm trong bảng điều khiển Mạng

Cột Size (Kích thước) của bảng điều khiển Mạng (Network) hiện sẽ cho biết (prefetch cache) khi một tài nguyên được tải từ bộ nhớ đệm tìm nạp trước. Tìm nạp trước là một tính năng mới của nền tảng web giúp tăng tốc các lượt tải trang tiếp theo. Báo cáo Tôi có thể sử dụng... cho biết tính năng này được hỗ trợ trong 83,33% trình duyệt toàn cầu tính đến tháng 7 năm 2019.

Cột Kích thước cho thấy các tài nguyên đến từ bộ nhớ đệm tìm nạp trước.

Hình 5. Cột Size (Kích thước) cho thấy prefetch2.html và prefetch2.css đến từ (prefetch cache).

Xem Bản minh hoạ tìm nạp trước để dùng thử.

Vấn đề về Chromium #935267

Thuộc tính riêng tư khi xem đối tượng

Giờ đây, Play Console sẽ cho thấy các trường lớp riêng tư trong bản xem trước đối tượng.

Khi kiểm tra một đối tượng, Play Console hiện sẽ hiển thị các trường riêng tư như '#color'.

Hình 6. Phiên bản Chrome cũ ở bên trái không hiển thị trường #color khi kiểm tra đối tượng, trong khi phiên bản mới ở bên phải thì có.

Thông báo và thông báo đẩy trong bảng điều khiển Ứng dụng

Phần Dịch vụ nền của bảng điều khiển Ứng dụng hiện hỗ trợ Thông báo đẩy và Thông báo. Thông báo đẩy xảy ra khi máy chủ gửi thông tin cho trình chạy dịch vụ. Thông báo xảy ra khi một trình chạy dịch vụ hoặc tập lệnh của trang hiển thị thông tin cho người dùng.

Tương tự như tính năng Tìm nạp và đồng bộ hoá trong nền của Chrome 76, sau khi bạn bắt đầu ghi âm, Thông báo đẩy và Thông báo trên trang này sẽ được ghi lại trong 3 ngày, ngay cả khi trang bị đóng và ngay cả khi Chrome đóng.

Các ngăn mới (Thông báo) và Thông báo đẩy

Hình 7. Các ngăn Thông báo đẩy và Thông báo mới trong bảng điều khiển Ứng dụng.

Vấn đề về Chromium #927726

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