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

Kayce Basques

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

• Đánh giá nghiêm ngặt. Khi bạn nhập các biểu thức, Bảng điều khiển sẽ xem trước kết quả.
• Gợi ý về đối số. Khi bạn nhập hàm, Bảng điều khiển sẽ cho bạn biết các đối số dự kiến cho hàm đó.
• Tự động hoàn thành hàm. Sau khi bạn nhập một lệnh gọi hàm như document.querySelector('p'), Console sẽ cho bạn biết các hàm và thuộc tính mà giá trị trả về hỗ trợ.
• Từ khoá ES2017 trong Bảng điều khiển. 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 Bảng điều khiển.
• Lighthouse 3.0 trong bảng điều khiển Audits (Kiểm tra). Các 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.
• BigInt hỗ trợ. Dùng thử số nguyên có độ chính xác tuỳ ý mới của JavaScript trong Bảng điều khiển.
• Thêm đường dẫn thuộc tính vào ngăn Watch (Theo dõi). Thêm các thuộc tính từ ngăn Phạm vi vào ngăn Biểu thức canh gác.
• "Hiện dấu thời gian" đã được chuyển 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 có một số tính năng mới của Bảng điều khiển 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ỏ.

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) .
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 tác dụ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.

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 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. 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 & Thiết kế trải nghiệm người dùng của Chrome.

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ỳ nguồn 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ỳ ý. 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 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.

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 đã đượ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.

• 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.
• Đăng bài trên X cho @ChromeDevTools.
• Hãy bình luận trên video "Có gì mới trong Công cụ cho nhà phát triển" trên YouTube hoặc video "Mẹo sử dụng Công cụ cho nhà phát triển" trên YouTube.

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.