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

Kayce Basques

Các tính năng và thay đổi mới sẽ có trong DevTools trong Chrome 62:

Toán tử await cấp cao nhất trong Console

Console hiện hỗ trợ các toán tử await cấp cao nhất.

Sử dụng toán tử await cấp cao nhất trong Console

Hình 1 Sử dụng toán tử await cấp cao nhất trong Console

Quy trình chụp ảnh màn hình mới

Giờ đây, bạn có thể chụp ảnh màn hình một phần của khung nhìn hoặc một nút HTML cụ thể.

Ảnh chụp màn hình một phần của khung nhìn

Cách chụp ảnh màn hình một phần khung nhìn:

  1. Nhấp vào biểu tượng Kiểm tra Kiểm tra hoặc nhấn tổ hợp phím Command+Shift+C (Mac) hoặc Control+Shift+C (Windows, Linux) để chuyển sang Chế độ kiểm tra phần tử.
  2. Giữ phím Command (Mac) hoặc Control (Windows, Linux) rồi chọn phần khung nhìn mà bạn muốn chụp ảnh.
  3. Thả chuột. DevTools sẽ tải ảnh chụp màn hình của phần mà bạn đã chọn xuống.

Chụp ảnh màn hình một phần của khung nhìn

Hình 2. Chụp ảnh màn hình một phần của khung nhìn

Ảnh chụp màn hình của các nút HTML cụ thể

Cách chụp ảnh màn hình một nút HTML cụ thể:

  1. Chọn một phần tử trong bảng điều khiển Elements (Phần tử).

    Ví dụ về nút

    Hình 3. Trong ví dụ này, mục tiêu là chụp ảnh màn hình tiêu đề màu xanh dương chứa văn bản Tools. Lưu ý rằng nút này đã được chọn trong DOM Tree (Cây DOM) của bảng điều khiển Elements (Phần tử)

  2. Mở Command Menu (Trình đơn lệnh).

  3. Bắt đầu nhập node rồi chọn Capture node screenshot. DevTools sẽ tải ảnh chụp màn hình của nút đã chọn xuống.

    Kết quả của lệnh "Chụp ảnh màn hình nút"

    Hình 4. Kết quả của lệnh Capture node screenshot

Làm nổi bật Lưới CSS

Để xem Lưới CSS đang ảnh hưởng đến một phần tử, hãy di chuột qua một phần tử trong Cây DOM của bảng điều khiển Phần tử. Một đường viền nét đứt sẽ xuất hiện xung quanh từng mục trong lưới. Thao tác này chỉ hoạt động khi mục đã chọn hoặc mục mẹ của mục đã chọn được áp dụng display:grid.

Làm nổi bật Lưới CSS

Hình 5. Làm nổi bật một Lưới CSS

Hãy xem video dưới đây để tìm hiểu thông tin cơ bản về CSS Grid trong chưa đến 2 phút.

API mới để truy vấn các đối tượng vùng nhớ khối xếp

Gọi queryObjects(Constructor) từ Console để trả về một mảng các đối tượng được tạo bằng hàm khởi tạo đã chỉ định. Ví dụ:

  • queryObjects(Promise). Trả về tất cả Promise.
  • queryObjects(HTMLElement). Trả về tất cả phần tử HTML.
  • queryObjects(foo), trong đó foo là tên hàm. Trả về tất cả đối tượng được tạo bản sao thông qua new foo().

Phạm vi của queryObjects() là ngữ cảnh thực thi hiện đang được chọn trong Console. Xem phần Chọn ngữ cảnh thực thi.

Bộ lọc mới trong Console

Bảng điều khiển hiện hỗ trợ bộ lọc URL và bộ lọc phủ định.

Bộ lọc âm bản

Nhập -<text> vào hộp Filter (Bộ lọc) để lọc ra mọi thông báo Console có chứa <text>.

Ví dụ về 3 tin nhắn sẽ bị lọc ra

Hình 6. Câu lệnh đầu tiên ghi one, two, three và four vào Console. two bị ẩn vì -two được nhập vào hộp Filter (Lọc)

Công cụ cho nhà phát triển sẽ lọc ra một thông báo nếu tìm thấy <text>:

  • Trong nội dung tin nhắn.
  • Trong tên tệp mà thông báo bắt nguồn từ đó.
  • Trong văn bản dấu vết ngăn xếp.

Bộ lọc phủ định cũng hoạt động với các biểu thức chính quy như -/[4-5]*ms/.

Bộ lọc URL

Nhập url:<text> vào hộp Filter (Lọc) để chỉ hiển thị các thông báo bắt nguồn từ một tập lệnh có URL chứa <text>.

Bộ lọc này sử dụng kiểu so khớp mờ. Nếu <text> xuất hiện ở bất kỳ vị trí nào trong URL, thì DevTools sẽ hiển thị thông báo.

Ví dụ về việc lọc URL

Hình 7. Sử dụng tính năng lọc URL để chỉ hiển thị thông báo bắt nguồn từ các tập lệnh có URL chứa hymn. Khi di chuột qua tên tập lệnh, bạn có thể thấy tên máy chủ lưu trữ có chứa văn bản này

Nhập HAR trong bảng điều khiển Mạng

Kéo và thả tệp HAR vào bảng điều khiển Mạng để nhập tệp đó.

Nhập tệp HAR

Hình 8. Nhập tệp HAR

Tài nguyên bộ nhớ đệm có thể xem trước trong Bảng điều khiển ứng dụng

Nhấp vào một hàng trong bảng Bộ nhớ đệm để xem trước tài nguyên đó bên dưới bảng.

Xem trước tài nguyên bộ nhớ đệm

Hình 9. Xem trước tài nguyên bộ nhớ đệm

Gỡ lỗi bộ nhớ đệm thích ứng hơn

Trong Chrome 61 trở xuống, việc gỡ lỗi bộ nhớ đệm được tạo bằng Cache API sẽ gặp nhiều khó khăn. Ví dụ: khi một trang tạo bộ nhớ đệm mới, bạn phải làm mới trang hoặc DevTools theo cách thủ công để xem bộ nhớ đệm mới.

Trong Chrome 62, thẻ Bộ nhớ đệm hiện cập nhật theo thời gian thực bất cứ khi nào bạn tạo, cập nhật hoặc xoá bộ nhớ đệm hoặc tài nguyên. Hãy xem video dưới đây để biết ví dụ.

Hãy xem Bản minh hoạ về bộ nhớ đệm để tự mình dùng thử.

Mức độ sử dụng mã ở cấp khối

Trong Chrome 61 trở xuống, thẻ Coverage (Mức độ sử dụng) đánh dấu tất cả mã trong một hàm là đã sử dụng, miễn là hàm đó được gọi.

Ví dụ về thẻ Mức độ sử dụng trong Chrome 61

Hình 10. Ví dụ về thẻ Phạm vi bao phủ trong Chrome 61. Dòng 4 được đánh dấu là đã sử dụng, mặc dù dòng này không bao giờ thực thi

Kể từ Chrome 62, thẻ Mức độ sử dụng sẽ cho bạn biết mã nào trong một hàm được gọi.

Ví dụ về thẻ Mức độ sử dụng trong Chrome 62

Hình 11 Ví dụ về thẻ Phạm vi bao phủ trong Chrome 62. Dòng 4 được đánh dấu là không sử dụng

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.