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

Kayce Basques
Kayce Basques
X GitHub

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

Toán tử await cấp cao nhất trong Bảng điều khiển

Bảng điều khiển 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 Bảng điều khiển

Hình 1 Sử dụng các toán tử await cấp cao nhất trong Bảng điều khiển

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 hiển thị hoặc một nút HTML cụ thể.

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

Cách chụp ảnh màn hình một phần của khung hiển thị:

  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. Nhấn giữ phím Command (Mac) hoặc Control (Windows, Linux) rồi chọn phần khung hiển thị mà bạn muốn chụp ảnh màn hình.
  3. Thả chuột. Công cụ cho nhà phát triển sẽ tải ảnh chụp màn hình của phần bạn đã chọn xuống.

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

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

Ả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 của một nút HTML cụ thể:

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

    Ví dụ về một 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 có chứa văn bản Tools. Lưu ý rằng nút này đã được chọn trong Cây DOM của bảng điều khiển Phần tử

  2. Mở Trình đơn lệnh.

  3. Bắt đầu nhập node rồi chọn Capture node screenshot. DevTools 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 lên một phần tử trong Cây DOM của bảng điều khiển Phần 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 gốc của mục đã chọn có display:grid được áp dụng.

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

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

Hãy xem video bên dưới để tìm hiểu những kiến thức cơ bản về CSS Grid trong vòng chưa đầy 2 phút.

Một API mới để truy vấn các đối tượng heap

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ả các Promise.
  • queryObjects(HTMLElement). Trả về tất cả các phần tử HTML.
  • queryObjects(foo), trong đó foo là tên hàm. Trả về tất cả các đối tượng đã được khởi tạo thông qua new foo().

Phạm vi của queryObjects() là ngữ cảnh thực thi hiện được chọn trong Bảng điều khiển. Xem phần Chọn bối 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 âm và bộ lọc URL.

Bộ lọc màu âm bản

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

Ví dụ về 3 thông báo sẽ bị lọc

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 Bộ lọc

Công cụ cho nhà phát triển sẽ lọc 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 xuất phát 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 Bộ lọc để chỉ hiện những 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 tính năng so khớp tương đối. Nếu <text> xuất hiện ở bất kỳ vị trí nào trong URL, thì Công cụ cho nhà phát triển sẽ hiển thị thông báo.

Ví dụ về tính năng lọc URL

Hình 7. Sử dụng tính năng lọc URL để chỉ hiển thị những thông báo bắt nguồn từ các tập lệnh có URL chứa hymn. Bằng cách di chuột lên tên tập lệnh, bạn có thể thấy rằng 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 trong bộ nhớ đệm

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

Gỡ lỗi bộ nhớ đệm hiệu quả hơn

Trong Chrome 61 trở về trước, việc gỡ lỗi bộ nhớ đệm được tạo bằng Cache API là... 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 Công cụ cho nhà phát triển 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ạ Bộ nhớ đệm để tự mình dùng thử.

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

Trong Chrome 61 trở về trước, thẻ Phạm vi đánh dấu tất cả mã trong một hàm là đã 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à đã 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 hiện cho 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à chưa 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 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.