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! Các tính năng mới sẽ có trong Công cụ của Chrome cho nhà phát triển trong Chrome 63 bao gồm:

Hãy đọc tiếp hoặc xem video bên dưới để 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, có thể bạn đã phát hiện ra việc mở DevTools sẽ làm hỏng phiên gỡ lỗi. Vấn đề này cũng khiến bạn không thể sử dụng DevTools để gỡ lỗi kiểm thử WebDriver.

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

Gỡ lỗi từ xa cho nhiều ứng dụng là vấn đề phổ biến nhất số 1 về Công cụ cho nhà phát triển trên crbug.com và là vấn đề số 3 trên toàn bộ dự án Chromium. Tính năng hỗ trợ nhiều ứng dụ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 DevTools 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 Chrome cho VS Code 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 DevTools.
  • Giờ đây, hai ứng dụng giao thức WebSocket riêng biệt, chẳng hạn như Puppeteer hoặc chrome-remote-interface, có thể đồng thời kết nối với cùng một thẻ.
  • Giờ đây, các tiện ích Chrome sử dụng API chrome.debugger có thể chạy cùng lúc với DevTools.
  • Giờ đây, nhiều tiện ích Chrome có thể sử dụng API chrome.debugger trên cùng một thẻ cùng một lúc.

Workspaces 2.0

Không gian làm việc đã xuất hiện trong một thời gian trong DevTools. Tính năng này cho phép bạn sử dụng DevTools làm IDE. Bạn thực hiện một số thay đổi đối với mã nguồn trong DevTools và các thay đổi này sẽ được giữ nguyên cho phiên bản cục bộ của dự án trên hệ thống tệp.

Workspaces 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 liên kết mã được chuyển đổi. 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 đã hoãn việc phát hành để giải quyết một số vấn đề.

Hãy xem phần "Soạn" (khoảng 14:28) của cuộc trò chuyện về DevTools tại CDS 2016 để xem Workspaces 2.0 hoạt động như thế nào.

4 quy trình kiểm tra mới

Trong Chrome 63, bảng điều khiển Kiểm tra có 4 quy trình 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.
  • Lỗi trình duyệt được ghi vào Bảng điều khiển.

Hãy 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.

Hãy 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

Tính năng mô phỏng thông báo đẩy đã có trong DevTools được một thời gian, nhưng có một hạn chế: bạn không thể gửi dữ liệu tuỳ chỉnh. Nhưng giờ đây, bạn có thể làm được điều này nhờ hộp văn bản Push (Đẩy) mới trong ngăn Service Worker (Trình chạy dịch vụ) trong Chrome 63. 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 Trình chạy dịch vụ.

  6. Viết nội dung vào hộp văn bản Push (Đẩ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 bằng dữ liệu tuỳ chỉnh thông qua hộp văn bản Push (Đẩy) trong ngăn Service Worker (Trình chạy dịch vụ)

  7. Nhấp vào Push (Đẩ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á trong nền bằng thẻ tuỳ chỉnh

Việc kích hoạt các sự kiện đồng bộ hoá ở chế độ nền cũng đã có trong ngăn Trình chạy dịch vụ trong một 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 Trình chạy dịch vụ.
  3. Nhập một số văn bản vào hộp văn bản Sync (Đồng bộ hoá).
  4. Nhấp vào Đồng bộ hoá.

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

Hình 3. Sau khi nhấp vào Đồng bộ hoá, DevTools sẽ gửi một sự kiện đồng bộ hoá ở chế độ nền có thẻ tuỳ chỉnh update-content đến worker dịch vụ

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 sử dụng 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 vấn đề trên trang web của mình trước khi người dùng phát hiện ra!

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

Hãy sử dụng các lựa chọn sau để thảo luận về các tính năng, bản cập nhật mới 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.

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

Danh sách tất cả nội dung đã được đề cập trong loạt bài Tính năng mới trong DevTools.