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.

Hình ảnh hoá các thay đổi về bố cục

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

Giờ đây, DevTools có thể giúp bạn phát hiện việc thay đổi bố cục:

  1. Mở Command Menu (Trình đơn lệnh).
  2. Bắt đầu nhập Rendering.
  3. Chạy lệnh Show Rendering (Hiện kết xuất).
  4. Bật hộp đánh dấu 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 sẽ được làm nổi bật bằng màu xanh dương.

Một lần thay đổi bố cục.

Hình 2. Một lần 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 có thể thêm PWA vào màn hình chính của iOS.
  • Giảm số lượng yêu cầu và kích thước tệ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, bảng định kiểu, hình ảnh, v.v.
  • Thời gian phản hồi lần tương tác đầu tiên tối đa có thể xảy ra. Đo lường khoảng thời gian tiềm năng tối đa giữa lượt tương tác đầu tiên của người dùng trên trang và phản hồi của trình duyệt đối với lượt tương tác đó. Xin lưu ý rằng chỉ số này thay thế chỉ số Thời gian chờ nhập dữ liệu ước tính. Thời gian phản hồi lần tương tác đầu tiên tối đa có thể không ảnh hưởng đến điểm số của bạn trong danh mục Hiệu suất.

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

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

Phiên bản Node và CLI của Lighthouse 5.1 có 3 tính năng chính mới đáng để bạn khám phá:

  • Ngân sách hiệu suất. Ngăn trang web của bạn bị hồi quy 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 quy trình kiểm tra phù hợp với các ngăn xếp công nghệ cụ thể. Gói WordPress Stack sẽ được vận chuyển trước. Gói ngăn xếp AMP và React đang trong quá trình 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ì DevTools sẽ tự động chuyển sang giao diện tối của riêng mình.

Phím tắt để mở 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 (Mac) khi tiêu điểm nằ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 Trình chỉnh sửa điểm ngắt để tạo Điểm ghi nhật ký và Điểm ngắt có điều kiện.

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

Bộ nhớ đệm tìm nạp trước 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 hiển thị là (prefetch cache) khi một tài nguyên được tải từ bộ nhớ đệm tìm nạp trước. Tải trước là một tính năng mới của nền tảng web để tăng tốc độ tải trang tiếp theo. Tính năng Can I use… (Tôi có thể sử dụng… không) cho biết tính năng này được hỗ trợ trên 83,33% trình duyệt trên toàn cầu kể từ tháng 7 năm 2019.

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

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

Hãy xem Bản minh hoạ về tính năng 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

Bảng điều khiển hiện hiển thị các trường lớp riêng tư trong bản xem trước đối tượng.

Giờ đây, khi kiểm tra một đối tượng, Bảng điều khiể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à tin nhắn đẩy trong Bảng điều khiển ứng dụng

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

Tương tự như các tính năng Tìm nạp ở chế độ nền và Đồng bộ hoá ở chế độ nền từ Chrome 76, sau khi bạn bắt đầu ghi, 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 bị đóng.

Ngăn Thông báo và Tin nhắn đẩy mới.

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

Vấn đề về Chromium #927726

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.

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.