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ắp có trong Công cụ cho nhà phát triển trong Chrome 60 bao gồm:

• Một bảng Kiểm tra mới, bao gồm các bài kiểm tra về ứ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 những bên thứ ba nào đang thực hiện yêu cầu mạng, ghi nhật ký vào Bảng điều khiển và thực thi JavaScript.
• Tiếp tục đến đây. Một cử chỉ mới có thể giúp bạn đẩy nhanh quy trình gỡ lỗi JavaScript.
• Gỡ lỗi có thể dự đoán cho JavaScript không đồng bộ.
• Xem trước đối tượng trong Bảng điều khiển.
• 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 Bảng điều khiển.
• Các lựa chọn hạn chế băng thông mạng đơn giản hơn.
• Theo mặc định, dấu vết ngăn xếp không đồng bộ sẽ bật.

Bạn có thể xem phiên bản video của 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 Kiểm tra mới, sử dụng Lighthouse

Bảng Kiểm tra hiện sử dụng Lighthouse. Lighthouse cung cấp một bộ thử nghiệm 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 số 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 tra đã 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 bài kiểm tra 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 Perform an audit (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 kiểm thử đối với trang, rồi hiển thị kết quả trong bảng 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 '17 bên dưới để tìm hiểu thêm về việc tích hợp Lighthouse vào 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 của Lighthouse và cách đóng góp cho công cụ này, 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 bài kiểm tra Lighthouse không? Đăng 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ề những thực thể đang tạo yêu cầu mạng trên một trang, ghi nhật ký vào Bảng điều khiển và thực thi JavaScript.

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

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

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

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

Sử dụng lựa chọn Nhóm theo sản phẩm trong thẻ Call Tree (Cây lệnh gọi) và Bottom-Up (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 hoạt động. Hãy xem bài viết Bắt đầu phân tích hiệu suất 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

Thao tác mới cho tính năng Tiếp tục tại đây

Giả sử bạn đang tạm dừng ở dòng 25 của một tập lệnh và bạn muốn chuyển đến dòng 50. Trước đây, bạn có thể đặt mộ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 này.

Khi thực hiện từng bước qua mã, hãy giữ phím Command (Mac) hoặc Control (Windows, Linux), sau đó nhấp để tiếp tục đến 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 những kiến thức cơ bản về 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 đối với nhóm Công cụ cho nhà phát triển trong tương lai gần là giúp việc gỡ lỗi mã không đồng bộ trở nên dễ đoán hơn và cung cấp cho bạn nhật ký đầy đủ về quá trình 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ẽ làm nổi bật các đích đến không đồng bộ có thể chuyển đến bằng màu xanh lục.

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

Các thay đổi

Xem trước đối tượng nhiều thông tin hơn trong Bảng điều khiển

Trước đây, khi bạn ghi nhật ký hoặc đánh giá một đối tượng trong Bảng điều khiển, Bảng điều khiển sẽ chỉ hiển thị Object, điều này không hữu ích cho lắm. Giờ đây, 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 các đối tượng

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

Trình đơn chọn ngữ cảnh có nhiều thông tin hơn trong Bảng điều khiển

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

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

Hình 8. Khi bạn di chuột lên một iframe trong trình đơn Context Selection (Lựa chọn theo bối cảnh) mới, iframe đó sẽ được làm nổi bật trong khung hiển thị

Thông tin cập nhật theo thời gian thực trong thẻ Mức độ phủ sóng

Khi ghi lại mức độ sử dụng mã trong Chrome 59, thẻ Mức độ sử dụng sẽ chỉ hiển thị "Đang ghi..." mà không cho biết mã nào đang được sử dụng. Giờ đây, thẻ Coverage (Mức độ sử dụng mã) 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 lựa 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 lựa chọn: Không có mạng, 3G chậm (thường thấy ở những nơi như Ấn Độ) và 3G nhanh (thường thấy ở những nơi như Hoa Kỳ).

Hình 11 Các lựa chọn mới về hạn chế băng thông mạng

Các lựa 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 khác ở cấp độ hạt nhân. Công cụ cho nhà phát triển không còn hiển thị các chỉ số về độ trễ, tốc độ tải xuống và tải lên bên cạnh mỗi lựa chọn nữa, vì những giá trị đó gây hiểu lầm. Mục tiêu là so khớp 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 đã bị xoá khỏi bảng Sources (Nguồn). Dấu vết ngăn xếp không đồng bộ hiện đang bật theo mặc định. Trước đây, lựa chọn này là không bắt buộc do hiệu suất bị ảnh hưởng. 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 Settings (Cài đặt) hoặc bằng cách chạy lệnh Do not capture async stack traces trong Command Menu (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 (một nhân vật huyền thoại) bên dưới để tìm hiểu thêm về những việc mà nhóm DevTools đã làm trong năm qua và những 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 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.
• Để lại 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 về 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.