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

Kayce Basques

Tính năng mới trong DevTools của Chrome 68:

• Đánh giá sớm. Khi bạn nhập biểu thức, Console sẽ xem trước kết quả.
• Gợi ý đối số. Khi bạn nhập các hàm, Console sẽ hiển thị cho bạn các đối số dự kiến cho hàm đó.
• Tự động hoàn thành hàm. Sau khi nhập lệnh gọi hàm như document.querySelector('p'), Console sẽ hiển thị cho bạn các hàm và thuộc tính mà giá trị trả về hỗ trợ.
• Từ khoá ES2017 trong Console. Các từ khoá như await hiện đã có trong giao diện người dùng tự động hoàn thành của Console.
• Lighthouse 3.0 trong bảng điều khiển Kiểm tra. Quy trình kiểm tra nhanh hơn, nhất quán hơn, giao diện người dùng mới và các quy trình kiểm tra mới.
• Hỗ trợ BigInt. Dùng thử số nguyên có độ chính xác tuỳ ý mới của JavaScript trong Console.
• Thêm đường dẫn thuộc tính vào ngăn Watch (Xem). Thêm các thuộc tính từ ngăn Phạm vi vào ngăn Theo dõi.
• Chuyển"Hiện dấu thời gian" sang phần Cài đặt.

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 đi kèm với 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á sớm

Giờ đây, khi bạn nhập một biểu thức trong Console, Console có thể hiển thị bản xem trước kết quả của biểu thức đó bên dưới con trỏ.

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

Cách bật tính năng Đánh giá sớm:

1. Mở Bảng điều khiển.
2. Mở Cài đặt bảng điều khiển .
3. Bật hộp đánh dấu Đánh giá sớm.

Công cụ cho nhà phát triển không đánh giá sớm 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, Console hiện sẽ hiển thị các đối số mà hàm đó dự kiế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, đại diện cho một mảng.
• 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á sớm, Console cũng sẽ cho bạn biết những thuộc tính và hàm nào có sẵn sau khi bạn nhập một hàm.

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 Console.

Hình 4. Play Console hiện đề xuất await trong giao diện người dùng tự động hoàn thành

Quy trình kiểm tra nhanh và đáng tin cậy hơn, giao diện người dùng mới và các 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à thông tin tóm tắt về một số thay đổi lớn nhất. Hãy xem bài viết Ra mắt Lighthouse 3.0 để biết toàn bộ thông tin.

Kiểm tra nhanh hơn và đá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. Công cụ này giúp hoàn tất quy trình kiểm tra nhanh hơn và có ít sự khác biệt hơn giữa các lần chạy.

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

Lighthouse 3.0 cũng mang đến một giao diện người dùng mới, nhờ sự cộng tác giữa nhóm Lighthouse và nhóm Trải nghiệm người dùng Chrome (Nghiên cứu và Thiết kế).

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

Quy trình kiểm tra mới

Lighthouse 3.0 cũng đi kèm với 4 quy trình kiểm tra mới:

• Thời gian hiển thị nội dung đầu tiên
• Tệp robots.txt không hợp lệ
• Sử dụng định dạng video cho nội dung ảnh động
• Tránh nhiều chuyến đi và về tốn kém đến bất kỳ nguồn gốc nào

Hỗ trợ BigInt

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

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 để theo dõi để thêm thuộc tính đó vào ngăn Watch (Theo dõi).

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

Chuyển chế độ "Hiện dấu thời gian" vào 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 của Console đã 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 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.

• Gửi ý kiến phản hồi và yêu cầu về tính năng cho chúng tôi tại 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 biểu tượng more_vert Tuỳ chọn khác > Trợ giúp > Báo cáo sự cố của Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Gửi tweet đến @ChromeDevTools.
• Để lại bình luận trên video YouTube về tính năng mới trong DevTools hoặc video YouTube về mẹo sử dụng DevTools.

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.