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ắp ra mắt trên Công cụ cho nhà phát triển trong Chrome 62:

Các toán tử cấp cao nhất đang chờ trong Console

Bảng điều khiển hiện hỗ trợ các toán tử await cấp cao nhất.

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

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

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

Bây giờ, 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 của một phần 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 Command+Shift+C (Mac) hoặc Ctrl+Shift+C (Windows, Linux) để vào chế độ Kiểm tra phần tử.
  2. Giữ Command (máy Mac) hoặc Control (Windows, Linux) và chọn phần khung nhìn mà bạn muốn chụp ảnh màn hình.
  3. Nhả 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 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 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ề 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. Công cụ cho nhà phát triển tải xuống ảnh chụp màn hình của nút đã chọn.

    Kết quả của thao tác "Chụp ảnh màn hình nút" Command

    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ử. Đường viền nét đứt sẽ xuất hiện xung quanh từng mục trong lưới. Tính năng này chỉ hoạt động khi mục đã chọn hoặc mục gốc của mục đã chọn đã áp dụng display:grid cho mục đó.

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 dưới đây để tìm hiểu thông tin cơ bản về Lưới CSS trong vòng chưa đầy 2 phút.

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

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

  • queryObjects(Promise). Trả về tất cả Lời hứa.
  • 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ả đối tượng đã được tạo thực thể 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 Chọn ngữ cảnh thực thi.

Các bộ lọc mới trên Console

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

Bộ lọc phủ định

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

Ví dụ về 3 tin nhắn sẽ được lọc ra

Hình 6. Câu lệnh đầu tiên ghi nhật ký one, two, three và four vào Bảng điều khiển. 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 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 chứa thông báo.
  • 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 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 thị các thư bắt nguồn từ tập lệnh có URL bao gồm <text>.

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

Ví dụ về 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 bao gồm hymn. Bằng cách di chuột qua tên tập lệnh, bạn có thể thấy tên máy chủ 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 Application

Nhấp vào một hàng trong bảng Cache Storage (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 nhiều hơn

Trong Chrome 61 trở xuống, việc gỡ lỗi bộ nhớ đệm được tạo bằng API Bộ nhớ đệm sẽ... tương đối. Cho 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ạ 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ẻ Phạm vi bao phủ đánh dấu tất cả mã trong một hàm là được sử dụng, vì vậy, miễn là hàm được gọi.

Ví dụ về thẻ Mức độ phù hợp 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ù nó không bao giờ thực thi

Kể từ Chrome 62, thẻ Phạm vi bao phủ giờ đây sẽ cho bạn biết mã nào trong một hàm được gọi.

Ví dụ về thẻ Mức độ phù hợp 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 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 cứ 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.