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

Kayce Basques
Kayce Basques
X GitHub

Những điểm mới trong Công cụ cho nhà phát triển của Chrome 68:

Hãy đọc tiếp hoặc xem phiên bản video của ghi chú phát hành bên dưới.

Bảng điều khiển hỗ trợ

Chrome 68 có một số tính năng mới của Console liên quan đến tính năng tự động hoàn thành và xem trước.

Đánh giá nghiêm ngặt

Giờ đây, khi bạn nhập một biểu thức vào Bảng điều khiển, Bảng điều khiển có thể cho thấy bản xem trước kết quả của biểu thức đó bên dưới con trỏ.

Console đang in kết quả của thao tác sort() trước khi thao tác này được thực thi một cách rõ ràng.

Hình 1 Bảng điều khiển đang in kết quả của thao tác sort() trước khi thao tác này được thực thi một cách rõ ràng

Cách bật tính năng Đánh giá nghiêm ngặt:

  1. Mở Console.
  2. Mở Console Settings (Cài đặt bảng điều khiển) Nút Cài đặt bảng điều khiển.
  3. Chọn hộp đánh dấu Đánh giá tức thì.

Công cụ cho nhà phát triển không đánh giá ngay nếu biểu thức gây ra hiệu ứng phụ.

Gợi ý về đối số

Khi bạn nhập các hàm, giờ đây, Console sẽ cho bạn biết những đối số mà hàm đó yêu cầu.

Gợi ý về đối số trong Bảng điều khiển.

Hình 2. Nhiều ví dụ về gợi ý đối số trong Bảng điều khiển

Lưu ý:

  • Dấu chấm hỏi trước một đối số, chẳng hạn như ?options, biểu thị một đối số không bắt buộc.
  • Dấu ba chấm trước một đối số, chẳng hạn như ...items, biểu thị một spread (phân tán).
  • Một số hàm, chẳng hạn như CSS.supports(), chấp nhận nhiều chữ ký đối số.

Tự động hoàn thành sau khi thực thi hàm

Sau khi bạn bật tính năng Đánh giá tức thì, giờ đây, Console cũng cho bạn biết những thuộc tính và hàm có sẵn sau khi bạn nhập một hàm.

Sau khi chạy document.querySelector('p'), giờ đây, Console có thể cho bạn biết các thuộc tính và hàm có sẵn cho phần tử đó.

Hình 3. Ảnh chụp màn hình trên cùng thể hiện hành vi cũ và ảnh chụp màn hình dưới cùng thể hiện hành vi mới hỗ trợ tính năng tự động hoàn thành hàm

Từ khoá ES2017 trong tính năng tự động hoàn thành

Các từ khoá ES2017, chẳng hạn như await, hiện có trong giao diện người dùng tự động hoàn thành của Bảng điều khiển.

Giờ đây, Console sẽ đề xuất "await" trong giao diện người dùng tự động hoàn thành.

Hình 4. Giờ đây, Console sẽ đề xuất await trong giao diện người dùng tự động hoàn thành

Quy trình kiểm tra nhanh hơn, đáng tin cậy hơn, giao diện người dùng mới và quy trình kiểm tra mới

Chrome 68 đi kèm với Lighthouse 3.0. Các phần tiếp theo là nội dung tóm tắt một số thay đổi lớn nhất. Hãy xem bài viết Thông báo về Lighthouse 3.0 để biết toàn bộ câu chuyện.

Kiểm tra nhanh hơn, đáng tin cậy hơn

Lighthouse 3.0 có một công cụ kiểm tra nội bộ mới (có tên mã là Lantern) giúp hoàn tất các hoạt động kiểm tra nhanh hơn và ít có sự khác biệt giữa các lần chạy.

Giao diện người dùng mới

Lighthouse 3.0 cũng có giao diện người dùng mới, nhờ sự hợp tác giữa nhóm Lighthouse và nhóm Nghiên cứu và thiết kế trải nghiệm người dùng của Chrome.

Giao diện người dùng báo cáo mới trong Lighthouse 3.0.

Hình 5. Giao diện người dùng báo cáo mới trong Lighthouse 3.0

Kiểm tra mới

Lighthouse 3.0 cũng đi kèm với 4 bài kiểm tra mới:

  • Nội dung đầu tiên hiển thị
  • robots.txt không hợp lệ
  • Sử dụng định dạng video cho nội dung động
  • Tránh nhiều chuyến đi khứ hồi tốn kém đến bất kỳ điểm xuất phát nào

Hỗ trợ BigInt

Chrome 68 hỗ trợ một kiểu dữ liệu nguyên thuỷ dạng số mới có tên là BigInt. BigInt cho phép bạn biểu thị các số nguyên có độ chính xác tuỳ ý. Hãy dùng thử trong Console:

Ví dụ về BigInt trong Bảng điều khiển.

Hình 6. Ví dụ về BigInt trong Bảng điều khiển

Thêm đường dẫn thuộc tính vào biểu thức canh gác

Khi tạm dừng ở một điểm ngắt, hãy nhấp chuột phải vào một thuộc tính trong ngăn Phạm vi rồi chọn Thêm đường dẫn thuộc tính vào biểu thức canh gác để thêm thuộc tính đó vào ngăn Biểu thức canh gác.

Ví dụ về Thêm đường dẫn thuộc tính vào biểu thức canh gác.

Hình 7. Ví dụ về Thêm đường dẫn thuộc tính vào biểu thức canh gác

Chế độ "Hiện dấu thời gian" đã được chuyển sang phần cài đặt

Hộp đánh dấu Hiện dấu thời gian trước đây nằm trong phần Cài đặt bảng điều khiển Nút Cài đặt bảng điều khiển đã được chuyển sang phần Cài đặt.

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.