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

Chào mừng bạn! Các tính năng mới và thay đổi lớn sẽ có trong Công cụ cho nhà phát triển trong Chrome 60 bao gồm:

• Một bảng điều khiển Kiểm tra mới, bao gồm các bài kiểm thử cho ứng dụng web tiến bộ, hiệu suất, khả năng hỗ trợ tiếp cận và các phương pháp hay nhất.
• Huy hiệu của bên thứ ba. Tìm hiểu xem bên thứ ba nào đang gửi yêu cầu mạng, đăng nhập vào Console và thực thi JavaScript.
• Tiếp tục chuyển đến đây. Một cử chỉ mới có thể đẩy nhanh quy trình gỡ lỗi JavaScript.
• Gỡ lỗi có thể dự đoán cho JavaScript không đồng bộ.
• Bản xem trước đối tượng trong Console.
• Thông tin cập nhật theo thời gian thực trong thẻ Mức độ phù hợp.
• Một trình đơn mới để chọn bối cảnh trong Console.
• Các tuỳ chọn hạn chế băng thông mạng đơn giản hơn.
• Dấu vết ngăn xếp không đồng bộ bật theo mặc định.

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

Tính năng mới

Bảng điều khiển Kiểm tra mới, sử dụng Lighthouse

Bảng điều khiển Kiểm tra hiện sử dụng Lighthouse. Lighthouse cung cấp một bộ kiểm thử toàn diện để đo lường chất lượng của các trang web.

Điểm số ở trên cùng cho Ứng dụng web tiến bộ, Hiệu suất, Hỗ trợ tiếp cận và Các phương pháp hay nhất là điểm tổng hợp của bạn cho từng danh mục đó. Phần còn lại của báo cáo là thông tin chi tiết về từng bài kiểm thử đã xác định điểm số của bạn. Cải thiện chất lượng trang web bằng cách khắc phục các kiểm thử không đạt.

Hình 1 Báo cáo Lighthouse

Cách kiểm tra một trang:

1. Nhấp vào thẻ Kiểm tra.
2. Nhấp vào Thực hiện kiểm tra.
3. Nhấp vào Chạy quy trình kiểm tra. Lighthouse thiết lập DevTools để mô phỏng một thiết bị di động, chạy một loạt các bài kiểm thử trên trang, sau đó hiển thị kết quả trong bảng điều khiển Kiểm tra.

Lighthouse tại Google I/O 2017

Hãy xem bài nói chuyện về Công cụ cho nhà phát triển tại Google I/O 2017 bên dưới để tìm hiểu thêm về việc tích hợp Lighthouse trong Công cụ cho nhà phát triển.

Đóng góp cho Lighthouse

Lighthouse là một dự án nguồn mở. Để tìm hiểu thêm về cách hoạt động và cách đóng góp cho Lighthouse, hãy xem bài nói chuyện về Lighthouse tại Google I/O 2017 ở bên dưới.

Bạn có ý tưởng về một quy trình kiểm tra Lighthouse? Hãy đăng bài tại đây!

Huy hiệu của bên thứ ba

Sử dụng huy hiệu của bên thứ ba để hiểu rõ hơn về các thực thể đang tạo yêu cầu mạng trên một trang, ghi nhật ký vào Console và thực thi JavaScript.

Hình 2. Di chuột qua huy hiệu của bên thứ ba trong bảng điều khiển Mạng

Hình 3. Di chuột qua huy hiệu của bên thứ ba trong Console

Cách bật huy hiệu của bên thứ ba:

1. Mở Command Menu (Trình đơn lệnh).
2. Chạy lệnh Show third party badges.

Sử dụng tuỳ chọn Nhóm theo sản phẩm trong thẻ Cây lệnh gọi và Từ dưới lên để nhóm hoạt động ghi lại hiệu suất theo các thực thể bên thứ ba đã gây ra các hoạt động đó. Hãy xem bài viết Bắt đầu phân tích hiệu suất trong thời gian chạy để tìm hiểu cách phân tích hiệu suất bằng Công cụ cho nhà phát triển.

Hình 4. Nhóm theo sản phẩm trong thẻ Từ dưới lên

Cử chỉ mới cho tính năng Tiếp tục đến đây

Giả sử bạn đang tạm dừng ở dòng 25 của tập lệnh và muốn chuyển đến dòng 50. Trước đây, bạn có thể đặt điểm ngắt trên dòng 50 hoặc nhấp chuột phải vào dòng đó rồi chọn Tiếp tục đến đây. Nhưng giờ đây, có một cử chỉ nhanh hơn để xử lý quy trình công việc này.

Khi thực hiện từng bước trong mã, hãy giữ phím Command (Mac) hoặc Control (Windows, Linux) rồi nhấp để tiếp tục dòng mã đó. DevTools đánh dấu các đích đến có thể chuyển đến bằng màu xanh dương.

Hình 5. Tiếp tục chuyển đến đây

Hãy xem bài viết Bắt đầu gỡ lỗi JavaScript để tìm hiểu kiến thức cơ bản về cách gỡ lỗi trong Công cụ cho nhà phát triển.

Bước vào không đồng bộ

Một chủ đề lớn của nhóm DevTools trong tương lai gần là giúp bạn có thể dự đoán được quá trình gỡ lỗi mã không đồng bộ và cung cấp cho bạn toàn bộ nhật ký thực thi không đồng bộ.

Cử chỉ mới cho tính năng Tiếp tục tại đây cũng hoạt động với mã không đồng bộ. Khi bạn giữ phím Command (Mac) hoặc Control (Windows, Linux), DevTools sẽ đánh dấu các đích không đồng bộ có thể chuyển đến bằng màu xanh lục.

Hãy xem bản minh hoạ dưới đây trong buổi trò chuyện về Công cụ dành cho nhà phát triển tại I/O để biết ví dụ.

Các thay đổi

Bản xem trước đối tượng cung cấp nhiều thông tin hơn trong Console

Trước đây, khi bạn ghi lại hoặc đánh giá một đối tượng trong Console, Console sẽ chỉ hiển thị Object, điều này không đặc biệt hữu ích. Bây giờ, Console cung cấp thêm thông tin về nội dung của đối tượng.

Hình 6. Cách Console dùng để xem trước đối tượng

Hình 7. Cách Console hiện xem trước đối tượng

Trình đơn lựa chọn theo bối cảnh cung cấp nhiều thông tin hơn trong Console

Trình đơn Lựa chọn bối cảnh của Console hiện cung cấp thêm thông tin về các bối cảnh có sẵn.

• Tiêu đề mô tả nội dung của từng mục.
• Tiêu đề phụ bên dưới tiêu đề mô tả miền nơi mục đó đến.
• Di chuột qua ngữ cảnh iframe để làm nổi bật ngữ cảnh đó trong khung nhìn.

Hình 8. Khi di chuột qua một iframe trong trình đơn Lựa chọn theo bối cảnh mới, iframe đó sẽ được làm nổi bật trong khung nhìn

Thông tin cập nhật theo thời gian thực trong thẻ Phạm vi

Khi ghi lại mức độ sử dụng mã trong Chrome 59, thẻ Coverage (Mức sử dụng mã) sẽ chỉ hiển thị "Recording..." (Đang ghi), không cho biết mã nào đang được sử dụng. Giờ đây, thẻ Coverage (Mức độ sử dụng) sẽ cho bạn biết mã nào đang được sử dụng theo thời gian thực.

Hình 9. Tải và tương tác với một trang bằng thẻ Mức độ phù hợp cũ

Hình 10. Tải và tương tác với một trang bằng thẻ Mức độ phù hợp mới

Các tuỳ chọn hạn chế băng thông mạng đơn giản hơn

Các trình đơn điều tiết mạng trong bảng điều khiển Mạng và Hiệu suất đã được đơn giản hoá để chỉ bao gồm 3 tuỳ chọn: Không có mạng, 3G chậm (phổ biến ở những nơi như Ấn Độ) và 3G nhanh (phổ biến ở những nơi như Hoa Kỳ).

Hình 11 Các tuỳ chọn mới về tính năng hạn chế băng thông mạng

Các tuỳ chọn điều tiết đã được điều chỉnh để phù hợp với các công cụ điều tiết cấp hạt nhân khác. Công cụ cho nhà phát triển không còn hiển thị các chỉ số độ trễ, tải xuống và tải lên bên cạnh mỗi tuỳ chọn nữa, vì các giá trị đó gây hiểu lầm. Mục tiêu là khớp với trải nghiệm thực tế của từng lựa chọn.

Ngăn xếp không đồng bộ được bật theo mặc định

Hộp đánh dấu Async (Không đồng bộ) đã bị xoá khỏi bảng điều khiển Sources (Nguồn). Dấu vết ngăn xếp không đồng bộ hiện được bật theo mặc định. Trước đây, tuỳ chọn này là tuỳ chọn sử dụng do hao tổn hiệu suất. Mức hao tổn hiện đã ở mức tối thiểu để bật tính năng này theo mặc định. Nếu muốn tắt dấu vết ngăn xếp không đồng bộ, bạn có thể tắt chúng trong phần Cài đặt hoặc bằng cách chạy lệnh Do not capture async stack traces trong Trình đơn lệnh.

Công cụ cho nhà phát triển tại Google I/O 2017

Hãy xem bài nói chuyện của Paul Irish bên dưới để tìm hiểu thêm về những gì nhóm DevTools đã làm trong năm qua và các chủ đề lớn mà họ đang giải quyết trong tương lai gần.

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.