Tính năng mới trong Công cụ cho nhà phát triển (Chrome 77)

Kayce Basques
Kayce Basques
X GitHub

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 vì đã truyền cảm hứng.

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

Giả sử bạn đang đọc một bài báo trên trang web yêu thích. Khi bạn đang đọc trang, bạn liên tục bị mất vị trí vì nội dung bị dịch chuyển xung quanh. Vấn đề này được gọi là hiện tượng thay đổ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 này chưa dành sẵn 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 dưới để dành chỗ cho các nội dung này. Giải pháp là sử dụng phần giữ chỗ.

Giờ đây, Công cụ cho nhà phát triển có thể giúp bạn phát hiện hiện tượng thay đổi 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 công cụ kết xuất hình ảnh).
  4. Chọn 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 đánh dấu 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 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 xem có thể thêm PWA vào màn hình chính của iOS hay không.
  • 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, biểu đị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ể. Đ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 được tính vào điểm số 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 mà bạn nên xem qua:

  • Ngân sách hiệu suất. Ngăn trang web của bạn bị giảm hiệu suất 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á.
  • Plugin. Mở rộng Lighthouse bằng các bài kiểm tra tuỳ chỉnh của riêng bạn.
  • Gói Stack. Thêm các quy trình kiểm tra phù hợp với các ngăn xếp công nghệ cụ thể. WordPress Stack Pack được phát hành đầu tiên. React và AMP Stack Pack đ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ì DevTools hiện 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 Control+Alt+B hoặc Command+Option+B (Mac) khi bạn tập trung vào Trình chỉnh sửa của bảng Sources (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 Logpoint 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 có nội dung là (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 độ tải các trang tiếp theo. Can I use... báo cáo rằng tính năng này được hỗ trợ trong 83,33% trình duyệt trên toàn cầu tính đến tháng 7 năm 2019.

Cột Kích thước cho biết các 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 biết prefetch2.html và prefetch2.css đến từ (prefetch cache).

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

Vấn đề #935267 của Chromium

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

Giờ đây, Bảng điều khiển sẽ hiển thị 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, giờ đây, Bảng điều khiển sẽ cho thấy 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

Mục 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 đẩy và Thông báo. Thông báo đẩy xuất hiện khi một máy chủ gửi thông tin đến một worker dịch vụ. Thông báo xuất hiện 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 Background Fetch và Background Sync trong 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 trong 3 ngày, ngay cả khi trang bị đóng và ngay cả khi Chrome bị đóng.

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

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 đề #927726 của Chromium

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.

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.