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 đọc trang, bạn tiếp tục mất vị trí của bạn vì nội dung nhảy xung quanh. Vấn đề này được gọi là bố cục chuyển đổi. Việc này thường xảy ra khi hình ảnh và quảng cáo tải xong. Trang chưa đặt trước bất kỳ không gian nào cho hình ảnh và quảng cáo, nên 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 phần giữ chỗ.

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:

  1. Mở Trình đơn lệnh.
  2. Bắt đầu nhập Rendering.
  3. Chạy lệnh Show Rendering (Hiển thị kết xuất).
  4. 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, bố cục thay đổi đượ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à 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 một người dùng lượt tương tác với trang đầu tiên và phản hồi của trình duyệt đối với lượt tương tác đó. 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 vào điểm số 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. Ngăn trang web của bạn hồi quy theo thời gian bằng cách chỉ định yêu cầu số lượng 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 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ẽ chuyển sang giao diện tối riêng tự động.

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

Nhấn tổ hợp phím Ctrl+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ở Breakpoint Editor (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 Kích thước của bảng điều khiển Mạng hiện cho biết (prefetch cache) khi 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 nền tảng web mới giúp tăng tốc trang tiếp theo tải. 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 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.

Cũng giống như các tính năng Tìm nạp trong nền và đồng bộ hoá trong nền của Chrome 76, sau khi bạn bắt đầu bản ghi, Thông báo đẩy và Thông báo trên trang này được ghi lại trong 3 ngày, ngay cả khi trang đã đó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 kỳ 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   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.