Trang này được dịch bởi Cloud Translation API.

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 mới và thay đổi sắp tới đối với Công cụ cho nhà phát triển trong Chrome 62:

Hỗ trợ các toán tử await cấp cao nhất trong Bảng điều khiển.
Ảnh chụp màn hình một phần của khung nhìn và ảnh chụp màn hình của các nút HTML cụ thể.
Đánh dấu lưới CSS.
API Bảng điều khiển mới để truy vấn các đối tượng.
Bộ lọc phủ định và bộ lọc URL trong Bảng điều khiển.
Nhập dữ liệu HAR trong bảng điều khiển Network (Mạng).
Tài nguyên bộ nhớ đệm có thể xem trước.
Gỡ lỗi bộ nhớ đệm dễ dự đoán hơn.
Mức độ sử dụng mã cấp khối.

Lưu ý: Bạn có thể kiểm tra phiên bản Chrome mình đang chạy trong chrome://version. Chrome tự động cập nhật lên phiên bản lớn mới khoảng 6 tuần một lần.

Các toán tử cấp cao nhất đang chờ trong Play 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ờ đợi cấp cao nhất trong Console

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 mới về ảnh chụp màn hình

Giờ đây, bạn có thể chụp ảnh màn hình một phần 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

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

Nhấp vào biểu tượng Inspect (Kiểm tra) hoặc nhấn tổ hợp phím Command + Shift + C (máy Mac) hoặc Control + Shift + C (Windows, Linux) để vào Chế độ kiểm tra phần tử.
Giữ Command (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.
Thả chuột. Công cụ cho nhà phát triển 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ể:

Chọn một phần tử trong bảng điều khiển Phầ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ử
Mở Trình đơn lệnh.
Bắt đầu nhập node rồi chọn Capture node screenshot. Công cụ cho nhà phát triển tải ảnh chụp màn hình của nút đã chọn xuống.

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. Chế độ này chỉ có tác dụng khi mục được chọn hoặc phần tử mẹ của mục đã chọn đã áp dụng display:grid.

Đánh dấu lưới CSS

Hình 5. Đánh dấu lưới CSS

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

Một API mới để truy vấn các đố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 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 Cam kết.
queryObjects(HTMLElement). Trả về tất cả phần tử HTML.
queryObjects(foo), trong đó foo là tên hàm. Trả về mọi đố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 đang được chọn trong Bảng điều khiển. Hãy xem phần Chọn ngữ cảnh thực thi.

Bộ lọc mới trên Play Console

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

Bộ lọc phủ định

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

Ví dụ về 3 thông báo sẽ được lọc ra

Hình 6. Câu lệnh đầu tiên ghi lại 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 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.
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 (Bộ lọc) để chỉ hiển thị thông báo 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 ở bất kỳ đâu 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ị các 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 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ớ 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, bộ nhớ đệm gỡ lỗi được tạo bằng Cache API sẽ... thô. 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ẻ Cache Storage (Bộ nhớ đệm) sẽ 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ụ.

Xem Bản minh hoạ bộ nhớ đệm để tự 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ủ sẽ đánh dấu tất cả mã trong một hàm là đã sử dụng, trong thời gian hàm đó được gọi.

Ví dụ về thẻ Phạm vi áp dụng trong Chrome 61

Hình 10. Ví dụ về thẻ Phạm vi lập chỉ mục 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ẻ Phạm vi bao phủ sẽ cho bạn biết mã nào trong một hàm được gọi.

Ví dụ về thẻ Phạm vi áp dụng trong Chrome 62

Hình 11 Ví dụ về thẻ Phạm vi lập chỉ mục trong Chrome 62. Dòng 4 được đánh dấu là chưa sử dụng

Tải 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
Tweet tại @ChromeDevTools.
Hãy để 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 video trên YouTube.