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 chính sắp ra mắt 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 hoạt động kiểm thử cho các ứ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 tạo yêu cầu về 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ể tăng tốc 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.
• Trình đơn mới để chọn ngữ cảnh trong Console.
• Các lựa chọn điều tiết mạng đơn giản hơn.
• Dấu vết ngăn xếp không đồng bộ được bật theo mặc định.

Hãy xem phiên bản video của những 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, do Lighthouse cung cấp

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

Điểm số ở đầu 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 phương pháp trong số đó 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 quyết định điểm số của bạn. Cải thiện chất lượng trang web của bạn bằng cách khắc phục các lượt 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ẻ Inspects (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 Công cụ cho nhà phát triển để mô phỏng thiết bị di động, chạy nhiều kiểm thử trên trang rồi hiển thị kết quả trong bảng điều khiển Inspections (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 dưới đây để tìm hiểu thêm về việc tích hợp của 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 nội dung đó, hãy xem bài nói chuyện trên Lighthouse từ Google I/O '17 bên dưới.

Bạn có ý tưởng kiểm tra bằng Lighthouse? Hãy đă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ề các pháp nhân đang gửi yêu cầu về mạng trên một , ghi nhật ký vào Bảng điều khiển 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 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 tuỳ chọn Nhóm theo sản phẩm trong thẻ Cây cuộc gọi và Từ dưới lên để nhóm hiệu suất ghi lại hoạt động của các pháp nhân bên thứ ba đã tạo ra các hoạt động đó. Xem bài viết Bắt đầu sử dụng 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

Một cử chỉ mới cho thao tác 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à bạn 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, thì còn một cử chỉ nhanh hơn để xử lý quy trình công việc này.

Khi duyệt qua mã, hãy giữ phím Command (máy Mac) hoặc Control (máy tính Windows, Linux) và rồi nhấp để tiếp tục đến dòng mã đó. Công cụ cho nhà phát triển làm nổi bật các đích đến có thể nhảy bằng màu xanh dương.

Hình 5. Tiếp tục đế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.

Chuyển sang chế độ không đồng bộ

Trong tương lai gần, một chủ đề lớn của nhóm Công cụ cho nhà phát triển là thực hiện gỡ lỗi mã không đồng bộ có thể dự đoán 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 Tiếp tục tới đây cũng hoạt động với mã không đồng bộ. Khi bạn giữ Command (Mac) hoặc Control (Windows, Linux), công cụ cho nhà phát triển đánh dấu có thể nhảy đích không đồng bộ có màu xanh lục.

Hãy xem bản minh hoạ dưới đây trong bài nói chuyện của Công cụ 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 chứa nhiều thông tin hơn trong Console

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

Hình 6. Cách sử dụng Bảng điều khiển để xem trước đối tượng

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

Trình đơn chọn bối cảnh chứa 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ả định nghĩa của từng mặt hàng.
• Phụ đề bên dưới tiêu đề mô tả miền nơi bắt nguồn của mặt hàng.
• 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 di chuột qua một iframe trong trình đơn Lựa chọn theo bối cảnh mới, bạn sẽ đánh dấu iframe đó trong phần khung nhìn

Thông tin cập nhật theo thời gian thực trong thẻ Mức độ phù hợp

Khi ghi lại mức độ sử dụng mã trong Chrome 59, thẻ Phạm vi bao phủ sẽ chỉ hiển thị "Bản ghi...", mà không biết được mã nào đang được sử dụng. Giờ đây, thẻ Phạm vi bao phủ cho bạn thấy theo thời gian thực mã nào đang được sử dụng.

Hình 9. Tải và tương tác với một trang bằng thẻ Phạm vi lập chỉ mục cũ

Hình 10. Tải và tương tác với một trang bằng thẻ Phạm vi bao phủ mới

Các tuỳ chọn điều tiết mạng đơn giản hơn

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

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

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

Các 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 điều khiển Async. Dấu vết ngăn xếp không đồng bộ hiện được bật bởi mặc định. Trước đây, bạn có thể chọn sử dụng tuỳ chọn này do chi phí hiệu suất. Mức hao tổn hiện tại là đủ tối thiểu để bật tính năng này theo mặc định. Nếu bạn 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 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 Ireland thần thoại dưới đây để tìm hiểu thêm về những gì nhóm Công cụ cho nhà phát triển giải quyết trong năm vừa qua và những chủ đề lớn mà họ sẽ giải quyết trong tương lai gần.

Tải kênh xem trước xuống

Hãy cân nhắc việc sử dụng Chrome Canary, Nhà phát triển hoặc Beta làm trình duyệt phát triển mặc định của bạn. 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 Công cụ cho nhà phát triển, kiểm thử các API nền tảng web tiên tiến và tìm ra các vấn đề trên trang web của bạn trước khi người dùng làm điều đó!

Liên hệ với nhóm Công cụ của Chrome cho nhà phát triển

Sử dụng các lựa chọn sau để thảo luận về các tính năng và thay đổi mới trong bài đăng, hoặc bất cứ nội dung nào khác liên quan đến Công cụ cho nhà phát triển.

• Gửi đề xuất hoặc phản hồi cho chúng tôi qua crbug.com.
• Báo cáo sự cố Công cụ cho nhà phát triển bằng cách sử dụng Tuỳ chọn khác   > Trợ giúp > Báo cáo vấn đề về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
• Tweet tại @ChromeDevTools.
• Để lại bình luận về Tính năng mới trong Video trên YouTube của Công cụ cho nhà phát triển hoặc Mẹo video trên YouTube trong 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.