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

Kayce Basques

Chào mừng bạn quay lại! Sau đây là các tính năng mới có 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 nhiều ứng dụng

Nếu đã từng thử gỡ lỗi một ứng dụng qua một IDE như VS Code hoặc WebStorm, 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 chúng tôi 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, không .

Gỡ lỗi từ xa nhiều ứng dụng là vấn đề số 1 phổ biến nhất trong Công cụ cho nhà phát triển trên crbug.com, và số 3 trong toàn bộ dự án Chromium. Hỗ trợ nhiều khách hàng cũng mở ra khá nhiều các 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ụ đó trong nhiều cách. Ví dụ:

  • Các ứng dụng giao thức như ChromeDriver hoặc tiện ích gỡ lỗi của Chrome cho VS Code và WebStorm, và các ứng dụng khách WebSocket như Puppeteer, hiện có thể chạy cùng lúc với Công cụ cho nhà phát triển.
  • Hai ứng dụng khách giao thức WebSocket riêng biệt, chẳng hạn như Puppeteer hoặc chrome-remote-interface, hiện có thể kết nối đồng thời với cùng một thẻ.
  • Giờ đây, những 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 nay có thể sử dụng API chrome.debugger trên cùng một thẻ đồng thời.

Không gian làm việc 2.0

Các không gian làm việc đã tồn tại 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 sử dụng Công cụ cho nhà phát triển như IDE của bạn. 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 đó sẽ được duy trì đối với phiên bản cục bộ của dự án trên hệ thống tệp của bạn.

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

Xem thước phim "Tác giả" phần (khoảng 14:28) của bài nói chuyện trong 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.

4 lượt kiểm tra mới

Trong Chrome 63, bảng Inspections (Kiểm tra) có 4 lượt 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 giao diện người dùng có lỗ hổng bảo mật đã biết.
  • Đã ghi lỗi 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 nhằm cải thiện chất lượng trang của bạn.

Hãy xem Lighthouse để tìm hiểu thêm về dự án cung cấp bảng điều khiển Audits (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 đã xuất hiện được một thời gian trong Công cụ cho nhà phát triển, nhưng có một hạn chế: bạn không thể gửi dữ liệu tuỳ chỉnh. Tuy nhiên, với hộp văn bản Đẩ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ạ thao tác đẩy đơn giản.
  2. Nhấp vào Enable Push Notifications (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 Workers.

  6. Viết nội dung nào đó vào hộp văn bản Đẩy.

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

    Hình 1 Mô phỏng thông báo đẩy với dữ liệu tuỳ chỉnh thông qua hộp văn bản Đẩ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á ở chế độ nền bằng thẻ tuỳ chỉnh

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

  1. Mở Công cụ cho nhà phát triển.
  2. Chuyển đến ngăn Service Workers.
  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á 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á dưới nền kèm theo thẻ tuỳ chỉnh update-content đến trình chạy dịch vụ

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 kỳ 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   Thêm > 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.