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

Chào mừng bạn quay lại! Sau đây là các tính năng mới được ra mắt trong Công cụ cho nhà phát triển trong Chrome 63:

Hãy đọc tiếp hoặc xem video dưới đây để tìm hiểu thêm!

Hỗ trợ gỡ lỗi từ xa cho nhiều ứng dụng

Nếu đã từng thử gỡ lỗi một ứng dụng từ một IDE như VS Code hoặc WebStorm, thì có thể bạn đã phát hiện ra rằng việc mở Công cụ cho nhà phát triển sẽ làm rối phiên gỡ lỗi của bạn. Vấn đề này cũng khiến bạn không thể sử dụng Công cụ cho nhà phát triển để gỡ lỗi kiểm thử WebDriver.

Kể từ Chrome 63, Công cụ cho nhà phát triển hiện hỗ trợ nhiều ứng dụng gỡ lỗi từ xa theo mặc định mà không cần định cấu hình.

Gỡ lỗi từ xa nhiều ứng dụng là vấn đề phổ biến nhất về Công cụ cho nhà phát triển 1 trên crbug.com và là vấn đề số 3 trên toàn bộ dự án Chromium. Việc hỗ trợ nhiều khách hàng cũng mở ra khá nhiều cơ hội thú vị để tích hợp các công cụ khác với Công cụ cho nhà phát triển hoặc sử dụng các công cụ đó theo những cách mới. Ví dụ:

  • Các ứng dụng giao thức (như ChromeDriver) hoặc tiện ích gỡ lỗi của Chrome cho Mã VS và WebStorm cũng như các ứng dụng WebSocket như Puppeteer hiện có thể chạy cùng lúc với Công cụ cho nhà phát triển.
  • Giờ đây, 2 ứng dụng giao thức WebSocket riêng biệt, chẳng hạn như Puppeteer hoặc chrome-remote-interface, có thể kết nối đồng thời với cùng một thẻ.
  • Giờ đây, các Tiện ích của Chrome sử dụng API chrome.debugger có thể chạy cùng lúc với Công cụ cho nhà phát triển.
  • Nhiều Tiện ích của Chrome hiện có thể sử dụng đồng thời API chrome.debugger trên cùng một thẻ.

Workspace 2.0

Không gian làm việc đã hoạt động được một thời gian trong Công cụ cho nhà phát triển. Tính năng này cho phép bạn dùng Công cụ cho nhà phát triển làm IDE của mình. Bạn thực hiện một số thay đổi đối với mã nguồn trong Công cụ cho nhà phát triển và các thay đổi đó vẫn tồn tại trên phiên bản cục bộ của dự án trên hệ thống tệp của bạn.

Workspace 2.0 được xây dựng dựa trên phiên bản 1.0, bổ sung trải nghiệm người dùng hữu ích hơn và cải thiện tính năng tự động ánh xạ mã đã dịch mã. Ban đầu, tính năng này dự kiến sẽ được phát hành ngay sau Hội nghị Nhà phát triển Chrome (CDS) 2016, nhưng nhóm này đã hoãn phát hành để khắc phục một số vấn đề.

Hãy xem phần "Tác giả" (khoảng 14:28) của bài nói chuyện về Công cụ cho nhà phát triển từ CDS 2016 để xem Không gian làm việc 2.0 trong thực tiễn.

Bốn cuộc kiểm tra mới

Trong Chrome 63, bảng điều khiển Kiểm tra có 4 cuộc kiểm tra mới:

  • Phân phát hình ảnh dưới dạng WebP.
  • Sử dụng hình ảnh có tỷ lệ khung hình phù hợp.
  • Tránh các thư viện JavaScript ngoài giao diện người dùng có các lỗ hổng bảo mật đã biết.
  • Đã ghi lỗi của trình duyệt vào Bảng điều khiển.

Xem bài viết Chạy Lighthouse trong Công cụ của Chrome cho nhà phát triển để tìm hiểu cách sử dụng bảng điều khiển Kiểm tra để cải thiện chất lượng trang của bạn.

Xem Lighthouse, để tìm hiểu thêm về dự án hỗ trợ bảng điều khiển Kiểm tra.

Mô phỏng thông báo đẩy bằng dữ liệu tuỳ chỉnh

Việc mô phỏng thông báo đẩy đã hoạt động được một thời gian trong Công cụ cho nhà phát triển, nhưng có một hạn chế là bạn không thể gửi dữ liệu tuỳ chỉnh. Tuy nhiên, với hộp văn bản Push (Đẩy) mới xuất hiện trong ngăn Service Worker trong Chrome 63, giờ đây bạn có thể làm điều đó. Hãy thử ngay:

  1. Chuyển đến Bản minh hoạ đẩy đơn giản.
  2. Nhấp vào Bật thông báo đẩy.
  3. Nhấp vào Cho phép khi Chrome nhắc bạn cho phép thông báo.
  4. Mở Công cụ cho nhà phát triển.
  5. Chuyển đến ngăn Service Worker (Trình chạy dịch vụ).
  6. Viết nội dung nào đó vào hộp văn bản Đẩy.

    Mô phỏng một thông báo đẩy bằng dữ liệu tuỳ chỉnh.

    Hình 1 Mô phỏng một thông báo đẩy có dữ liệu tuỳ chỉnh qua hộp văn bản Push (Đẩy) trong ngăn Service Worker

  7. Nhấp vào Đẩy để gửi thông báo.

    Thông báo đẩy được mô phỏng

    Hình 2. Thông báo đẩy được mô phỏng

Kích hoạt sự kiện đồng bộ hoá dưới nền bằng thẻ tuỳ chỉnh

Việc kích hoạt sự kiện đồng bộ hoá trong nền cũng đã nằm trong ngăn Service Workers, nhưng giờ đây, bạn có thể gửi các thẻ tuỳ chỉnh:

  1. Mở Công cụ cho nhà phát triển.
  2. Chuyển đến ngăn Service Worker (Trình chạy dịch vụ).
  3. Nhập nội dung văn bản vào hộp văn bản Đồng bộ hoá.
  4. Nhấp vào Đồng bộ hoá.

Kích hoạt sự kiện đồng bộ hoá trong nền tuỳ chỉnh

Hình 3. Sau khi nhấp vào Đồng bộ hoá, Công cụ cho nhà phát triển sẽ gửi một sự kiện đồng bộ hoá nền có thẻ tuỳ chỉnh update-content tới trình chạy dịch vụ

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