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

Kayce Basques

Chào mừng bạn! Sau đây là các tính năng mới và những thay đổi lớn sắp tới đối với Công cụ cho nhà phát triển trong Chrome 60:

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, 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ộ quy trình kiểm thử toàn diện để đo lường chất lượng trang web của bạn.

Các đ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 từng danh mục đó. Phần còn lại của báo cáo là phần phân tích chi tiết 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 của bạn bằng cách khắc phục các lượt kiểm tra không đạt.

Báo cáo Lighthouse

Hình 1 Báo cáo Lighthouse

Để 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 Run testing (Chạy kiểm tra). Lighthouse thiết lập Công cụ cho nhà phát triển để mô phỏng một thiết bị di động, chạy nhiều quy trình 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 '17

Xem bài chia sẻ về Công cụ cho nhà phát triển từ Google I/O '17 dưới đây để 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 vào tính năng này, hãy xem bài nói chuyện về Lighthouse tại Google I/O '17 dưới đây.

Bạn có ý tưởng về một bài kiểm tra cho Lighthouse? Hãy đăng bài đánh giá 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 gửi 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.

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

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

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

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ở Trình đơn lệnh.
  2. Chạy lệnh Show third party badges.

Sử dụng tùy chọn Nhóm theo sản phẩm trong các thẻ Cây cuộc 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ể của bên thứ ba đã gây ra hoạt động đó. 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.

Nhóm theo sản phẩm trong thẻ Từ dưới lê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 nút Tiếp tục đến đây

Giả sử bạn bị tạm dừng ở dòng 25 của một tập lệnh và bạn muốn chuyển sang 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 Continue to here (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 duyệt qua mã, hãy giữ Command (Mac) hoặc Control (Windows, Linux) 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.

Tiếp tục tới đây

Hình 5. Tiếp tục tới đâ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ề gỡ lỗi trong Công cụ cho nhà phát triển.

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

Một chủ đề lớn cho nhóm Công cụ cho nhà phát triển trong tương lai gần là làm cho việc gỡ lỗi mã không đồng bộ trở nên dễ 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 nút Tiếp tục đến đây cũng hoạt động với mã không đồng bộ. Khi bạn giữ phím Command (máy Mac) hoặc Control (Windows, Linux), Công cụ cho nhà phát triển sẽ làm nổi bật các đích đến không đồng bộ có thể nhảy bằng màu xanh lục.

Hãy xem bản minh hoạ bên dưới từ buổi trò chuyện về 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 Bảng điều khiển

Trước đây, khi bạn ghi lại hoặc đánh giá một đối tượng trong Console, Play Console sẽ chỉ cho thấy Object. Điều 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.

Cách Console dùng để xem trước các đối tượng

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

Cách Console hiện tại có thể xem trước các đối tượng

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

Trình đơn chọn bối cảnh giàu thông tin hơn trong Bảng điều khiển

Trình đơn Lựa chọn ngữ cảnh trong bảng điều khiển giờ đây cung cấp thêm thông tin về các ngữ cảnh có sẵn.

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

Trình đơn Lựa chọn ngữ cảnh mới

Hình 8. Di chuột qua một iframe trong trình đơn Lựa chọn ngữ cảnh mới sẽ làm nổi bật iframe đó trong khung nhìn

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

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

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

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ũ

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

Hình 10. Tải và tương tác với một trang bằng thẻ Phạm vi lập chỉ mục 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 điều khiển Mạng và Hiệu suất đã được đơn giản hoá để chỉ bao gồm 3 tuỳ chọn: Ngoại tuyến, 3G chậm (thường thấy ở các nơi như Ấn Độ) và 3G nhanh (thường thấy ở những nơi như Hoa Kỳ).

Các tuỳ chọn mới để điều tiết mạng

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

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

Hộp đánh dấu Không đồng bộ đã bị xóa khỏi bảng điều khiển 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, chọn sử dụng tuỳ chọn này do chi phí hiệu suất tăng. Mức hao tổn hiện đã đủ 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 các dấu vết ngăn xếp này 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 '17

Hãy xem bài nói chuyện của Paul Ireland trong thần thoại dưới đây để tìm hiểu thêm về những việc mà nhóm Công cụ cho nhà phát triển đã và đang thực hiện trong năm qua cũng như 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 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 cung cấp cho bạn quyề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, thử nghiệm API nền tảng web tiên tiến và tìm ra sự cố trên trang web của bạn trước khi người dùng của bạn 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 đây để thảo luận về các tính năng mới và thay đổi trong bài đăng hoặc bất cứ vấn đề nào khác liên quan đến Công cụ cho nhà phát triển.

  • Hãy 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ủa Công cụ cho nhà phát triển bằng cách sử dụng phần Tuỳ chọn khác   Thêm   > Trợ giúp > Báo cáo sự cố về Công cụ cho nhà phát triển trong Công cụ cho nhà phát triển.
  • Tweet tại @ChromeDevTools.
  • Hãy để 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 video 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 video Tính năng mới trong Công cụ cho nhà phát triển.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Kiến thức cơ bản về Chrome

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 đã bị huỷ.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59