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

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 máy khách

Nếu đã từng thử gỡ lỗi một ứng dụng qua 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 cấu hình.

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. Dịch vụ 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 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 Công cụ cho nhà phát triển.
  • Hai ứng dụng giao thức WebSocket riêng biệt, chẳng hạn như Puppeteer hoặc giao diện chrome-remote-remote, 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.
  • Giờ đây, nhiều Tiện ích của Chrome có thể sử dụng đồng thời API chrome.debugger trên cùng một thẻ.

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 làm IDE. 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ẽ vẫn tồn tại đố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.

Workspace 2.0 được xây dựng dựa trên phiên bản 1.0, bổ sung thêm 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 dịch. 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) năm 2016. Tuy nhiên, nhóm đã hoãn phát hành tính năng này để giải quyết một số vấn đề.

Vui lòng xem phần "Authoring" (Tạo) (khoảng 14:28) trong bài nói chuyện về Công cụ cho nhà phát triển từ CDS 2016 để xem cách hoạt động của Không gian làm việc 2.0.

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 để 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 Kiểm toán.

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ế 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 trên ngăn Service Worker trong Chrome 63, bạn hiện có thể thực hiện điều này. 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 có dữ liệu tuỳ chỉnh thông 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á ở chế độ 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 đã xuất hiện trong ngăn Service Workers từ lâu, 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á trong nền cùng với 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 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ố trong 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.

Chrome 127

Chrome 126

Chrome 125

Chrome 124

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

Chrome 101

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