Sử dụng bảng điều khiển Application (Ứng dụng) để kiểm tra, sửa đổi và gỡ lỗi tệp kê khai ứng dụng web, trình chạy dịch vụ và bộ nhớ đệm của trình chạy dịch vụ.
Ứng dụng web tiến bộ (PWA) là những ứng dụng hiện đại, chất lượng cao được tạo bằng công nghệ web. PWA cung cấp các chức năng tương tự như ứng dụng iOS, Android và ứng dụng dành cho máy tính. Các loại chiến dịch phụ đó là:
- Đáng tin cậy ngay cả trong điều kiện mạng không ổn định.
- Có thể cài đặt để chạy các nền tảng của hệ điều hành, chẳng hạn như thư mục Applications (Ứng dụng) trên Mac OS X, trình đơn Start (Bắt đầu) trên Windows và màn hình chính trên Android và iOS.
- Xuất hiện trong trình chuyển đổi hoạt động, công cụ tìm kiếm trên thiết bị như Tiêu điểm và trong trang tính chia sẻ nội dung.
Hướng dẫn này chỉ thảo luận về các tính năng của Ứng dụng web tiến bộ trong bảng điều khiển Application (Ứng dụng). Nếu bạn đang tìm kiếm trợ giúp về các ngăn khác, hãy xem phần cuối của hướng dẫn này, Hướng dẫn về các ngăn ứng dụng khác.
Tóm tắt
- Sử dụng thẻ Tệp kê khai để kiểm tra tệp kê khai ứng dụng web.
- Sử dụng thẻ Trình chạy dịch vụ cho một loạt tác vụ liên quan đến trình chạy dịch vụ, chẳng hạn như huỷ đăng ký hoặc cập nhật dịch vụ, mô phỏng sự kiện đẩy, chuyển sang chế độ ngoại tuyến hoặc dừng trình chạy dịch vụ.
- Xem bộ nhớ đệm của trình chạy dịch vụ trên thẻ Cache Storage (Bộ nhớ đệm).
- Huỷ đăng ký một worker dịch vụ và xoá tất cả bộ nhớ và bộ nhớ đệm chỉ bằng một lần nhấp vào nút trong thẻ Xoá bộ nhớ.
Tệp kê khai ứng dụng web
Nếu muốn người dùng có thể thêm ứng dụng của bạn vào thư mục Applications (Ứng dụng) trên Mac OS X, trình đơn Start (Bắt đầu) trên Windows và màn hình chính trên Android và iOS, bạn cần có tệp kê khai ứng dụng web. Tệp kê khai xác định cách ứng dụng xuất hiện trên màn hình chính, nơi chuyển hướng người dùng khi khởi chạy từ màn hình chính và giao diện của ứng dụng khi khởi chạy.
Sau khi thiết lập tệp kê khai, bạn có thể sử dụng thẻ Tệp kê khai của bảng điều khiển Ứng dụng để kiểm tra tệp kê khai đó.
- Để xem nguồn tệp kê khai, hãy nhấp vào đường liên kết bên dưới nhãn App Manifest (Tệp kê khai ứng dụng) (
manifest.webmanifesttrong ảnh chụp màn hình ở trên). - Các phần Identity (Giá trị nhận dạng) và Presentation (Hiển thị) chỉ hiển thị các trường từ nguồn tệp kê khai theo cách thân thiện hơn với người dùng.
- Phần Trình xử lý giao thức cho phép bạn kiểm tra việc đăng ký trình xử lý giao thức URL của PWA chỉ bằng một lần nhấp vào nút. Để tìm hiểu thêm, hãy xem phần Kiểm thử việc đăng ký trình xử lý giao thức URL.
- Phần Biểu tượng hiển thị mọi biểu tượng mà bạn đã chỉ định và cho phép bạn kiểm tra mặt nạ của các biểu tượng đó.
- Tập hợp các phần Lối tắt #N hiển thị thông tin về tất cả đối tượng lối tắt của bạn.
- Tập hợp phần Screenshot #N (Ảnh chụp màn hình #N) hiển thị ảnh chụp màn hình cho giao diện người dùng cài đặt phong phú hơn của ứng dụng.
Ngoài ra, nếu DevTools gặp lỗi, chẳng hạn như không thể tải biểu tượng, thì thẻ Tệp kê khai sẽ hiển thị phần Khả năng cài đặt mô tả lỗi.
Xem và kiểm tra biểu tượng có thể che mờ
Mục Icons (Biểu tượng) của thẻ Manifest (Tệp kê khai) hiển thị tất cả biểu tượng của ứng dụng. Trong phần này, bạn cũng có thể kiểm tra khu vực an toàn cho các biểu tượng có thể che mờ, định dạng biểu tượng thích ứng với các nền tảng.
Để cắt bớt các biểu tượng sao cho chỉ khu vực an toàn tối thiểu mới hiển thị, hãy đánh dấu vào 
Chỉ hiển thị khu vực an toàn tối thiểu cho các biểu tượng che mờ được.
Nếu toàn bộ biểu trưng của bạn hiển thị trong vùng an toàn, thì bạn đã hoàn tất.
Cài đặt điều kiện kích hoạt
Chrome cho phép bạn bật và quảng bá việc cài đặt PWA ngay trong giao diện người dùng. Tìm hiểu Cách cung cấp trải nghiệm cài đặt trong ứng dụng của riêng bạn.
Cách kích hoạt quy trình cài đặt PWA:
- Mở trang đích của PWA trong Chrome.
Ở bên phải thanh địa chỉ ở trên cùng, hãy nhấp vào
Cài đặt.
Làm theo hướng dẫn trên màn hình.
Tính năng Cài đặt ứng dụng không thể mô phỏng quy trình làm việc cho thiết bị di động. Hãy lưu ý cách trình duyệt Chrome trên máy tính hiển thị nút cài đặt trong thanh địa chỉ, mặc dù DevTools đang ở Chế độ thiết bị. Tuy nhiên, nếu bạn có thể thêm thành công ứng dụng vào máy tính, thì ứng dụng đó cũng sẽ hoạt động trên thiết bị di động.
Nếu muốn kiểm thử trải nghiệm thực sự trên thiết bị di động, bạn có thể kết nối một thiết bị di động thực với DevTools thông qua tính năng gỡ lỗi từ xa. Để kích hoạt quá trình cài đặt trên thiết bị di động đã kết nối, hãy mở trình đơn có biểu tượng ba dấu chấm 
rồi nhấp vào 
Cài đặt ứng dụng.
Kiểm tra lối tắt
Lối tắt ứng dụng cho phép bạn cung cấp quyền truy cập nhanh vào một số thao tác phổ biến mà người dùng thường xuyên cần thực hiện.
Để kiểm tra các lối tắt mà bạn đã xác định trong tệp kê khai, hãy di chuyển đến các mục Lối tắt #N của thẻ Tệp kê khai.
Kiểm tra ảnh chụp màn hình để có giao diện người dùng cài đặt phong phú hơn
Khi bạn thêm nội dung mô tả và một bộ ảnh chụp màn hình vào tệp kê khai, ứng dụng của bạn sẽ có hộp thoại cài đặt phong phú hơn.
Để kiểm tra ảnh chụp màn hình, hãy di chuyển đến phần Screenshot #N (Ảnh chụp màn hình #N) của thẻ Manifest (Tệp kê khai).
Kiểm thử việc đăng ký trình xử lý giao thức URL
PWA có thể xử lý các đường liên kết sử dụng một giao thức cụ thể để mang lại trải nghiệm tích hợp hơn. Để tìm hiểu cách tạo trình xử lý, hãy xem phần Đăng ký trình xử lý giao thức URL cho PWA.
Cách kiểm thử trình xử lý:
- Mở Công cụ cho nhà phát triển trên trang đích của PWA. Ví dụ: hãy xem PWA minh hoạ này.
- Trên trang minh hoạ, hãy cài đặt PWA và tải lại ứng dụng sau khi cài đặt. Trình duyệt hiện đã đăng ký PWA làm trình xử lý cho giao thức
web+coffee. - Trong phần Application (Ứng dụng) > Manifest (Tệp kê khai) > Protocol Handler (Trình xử lý giao thức), hãy nhập URL mà bạn muốn trình xử lý kiểm tra rồi nhấp vào Test protocol (Kiểm thử giao thức).
Trong ví dụ này, trình xử lý có thể xử lý americano,chaivàlatte-macchiato. - Khi Chrome hỏi bạn có thể mở ứng dụng không, hãy xác nhận bằng cách nhấp vào Open Protocol Handler (Mở trình xử lý giao thức).
- Trong hộp thoại tiếp theo, hãy cho phép ứng dụng xử lý các đường liên kết
web+coffee.
Nếu trình xử lý xử lý thành công đường liên kết, bạn sẽ thấy hình ảnh một tách cà phê được mở trong ứng dụng.
Trình chạy dịch vụ
Trình chạy dịch vụ là một công nghệ cơ bản trong nền tảng web trong tương lai. Đây là các tập lệnh mà trình duyệt chạy ở chế độ nền, tách biệt với trang web. Các tập lệnh này cho phép bạn truy cập vào các tính năng không cần trang web hoặc tương tác của người dùng, chẳng hạn như thông báo đẩy, đồng bộ hoá ở chế độ nền và trải nghiệm ngoại tuyến.
Hướng dẫn liên quan:
Thẻ Service Workers (Trình chạy dịch vụ) trong bảng điều khiển Application (Ứng dụng) là nơi chính trong DevTools để kiểm tra và gỡ lỗi trình chạy dịch vụ.
- Nếu một worker dịch vụ được cài đặt cho trang đang mở, thì bạn sẽ thấy worker đó được liệt kê trên thẻ này. Ví dụ: trong ảnh chụp màn hình ở trên, có một worker dịch vụ được cài đặt cho phạm vi của
https://airhorner.com/. - Hộp đánh dấu
Ngoại tuyến sẽ đưa DevTools vào chế độ ngoại tuyến. Điều này tương đương với chế độ ngoại tuyến có trong bảng điều khiển Mạng hoặc tuỳ chọn Go offlinetrong Trình đơn lệnh. - Hộp đánh dấu
Cập nhật khi tải lại buộc worker dịch vụ phải cập nhật mỗi khi tải trang. - Hộp đánh dấu
Bỏ qua đối với mạng sẽ bỏ qua trình chạy dịch vụ và buộc trình duyệt truy cập vào mạng để lấy các tài nguyên đã yêu cầu. - Đường liên kết Yêu cầu mạng sẽ đưa bạn đến bảng điều khiển Mạng có danh sách các yêu cầu bị chặn liên quan đến worker dịch vụ (bộ lọc
is:service-worker-intercepted). - Đường liên kết Cập nhật thực hiện một lần cập nhật của worker dịch vụ được chỉ định.
- Nút Push (Đẩy) mô phỏng một thông báo đẩy không có tải trọng (còn gọi là tickle).
- Nút Sync (Đồng bộ hoá) mô phỏng một sự kiện đồng bộ hoá ở chế độ nền.
- Đường liên kết Huỷ đăng ký sẽ huỷ đăng ký trình chạy dịch vụ đã chỉ định. Hãy xem phần Xoá bộ nhớ để biết cách huỷ đăng ký worker dịch vụ và xoá bộ nhớ và bộ nhớ đệm chỉ bằng một lần nhấp vào nút.
- Dòng Source (Nguồn) cho bạn biết thời điểm cài đặt trình chạy dịch vụ hiện đang chạy. Đường liên kết là tên của tệp nguồn của worker dịch vụ. Khi nhấp vào đường liên kết, bạn sẽ được chuyển đến nguồn của worker dịch vụ.
- Dòng Trạng thái cho bạn biết trạng thái của worker dịch vụ. Số trên dòng này (
#16trong ảnh chụp màn hình) cho biết số lần cập nhật worker dịch vụ. Nếu bật hộp đánh dấu
Cập nhật khi tải lại, bạn sẽ thấy số này tăng lên mỗi khi tải trang.
Bên cạnh trạng thái, bạn sẽ thấy đường liên kết bắt đầu (nếu worker dịch vụ đang dừng) hoặc đường liên kết dừng (nếu worker dịch vụ đang chạy). Trình chạy dịch vụ được thiết kế để trình duyệt có thể dừng và bắt đầu bất cứ lúc nào. Bạn có thể mô phỏng việc đó bằng cách dừng rõ ràng worker dịch vụ bằng đường liên kết stop (dừng). Việc dừng worker dịch vụ là một cách hay để kiểm thử cách mã của bạn hoạt động khi worker dịch vụ khởi động lại. Lỗi này thường xuất hiện do các giả định không chính xác về trạng thái toàn cục ổn định. - Dòng Clients (Ứng dụng) cho bạn biết nguồn gốc mà worker dịch vụ được đưa vào phạm vi. Nút tập trung chủ yếu hữu ích khi bạn có nhiều worker dịch vụ đã đăng ký. Nếu bạn nhấp vào nút tập trung bên cạnh một worker dịch vụ đang chạy trong một thẻ khác, thì Chrome sẽ tập trung vào thẻ đó.
Bảng Chu kỳ cập nhật cho bạn biết các hoạt động của worker dịch vụ và thời gian đã trôi qua, chẳng hạn như cài đặt, chờ và kích hoạt. Để xem dấu thời gian chính xác của từng hoạt động, hãy nhấp vào nút
Mở rộng.
Để biết thêm thông tin, hãy xem phần Vòng đời của worker dịch vụ.
Nếu trình chạy dịch vụ gây ra lỗi, thẻ Trình chạy dịch vụ sẽ hiển thị biểu tượng Lỗi 
cùng với số lỗi bên cạnh dòng Nguồn.
Đường liên kết có số này sẽ đưa bạn đến Bảng điều khiển có tất cả lỗi đã ghi lại.
Để xem thông tin về tất cả worker dịch vụ, hãy nhấp vào Xem tất cả lượt đăng ký ở cuối thẻ Worker dịch vụ. Đường liên kết này sẽ đưa bạn đến chrome://serviceworker-internals/?devtools, nơi bạn có thể gỡ lỗi thêm cho worker dịch vụ.
Bộ nhớ đệm của trình chạy dịch vụ
Thẻ Bộ nhớ đệm cung cấp danh sách chỉ có thể đọc các tài nguyên đã được lưu vào bộ nhớ đệm bằng cách sử dụng Cache API (trình làm việc dịch vụ).
Xin lưu ý rằng trong lần đầu tiên bạn mở bộ nhớ đệm và thêm tài nguyên vào bộ nhớ đệm đó, DevTools có thể không phát hiện được sự thay đổi. Tải lại trang và bạn sẽ thấy bộ nhớ đệm.
Nếu có hai hoặc nhiều bộ nhớ đệm đang mở, bạn sẽ thấy các bộ nhớ đệm đó được liệt kê bên dưới trình đơn thả xuống Bộ nhớ đệm.
Mức sử dụng hạn mức
Một số phản hồi trong thẻ Bộ nhớ đệm có thể được gắn cờ là "mờ". Đây là một phản hồi được truy xuất từ một nguồn gốc khác, chẳng hạn như từ CDN hoặc API từ xa, khi CORS không được bật.
Để tránh rò rỉ thông tin trên nhiều miền, hệ thống sẽ thêm khoảng đệm đáng kể vào kích thước của phản hồi mờ dùng để tính toán hạn mức bộ nhớ (tức là liệu có ngoại lệ QuotaExceeded nào được gửi hay không) và được API navigator.storage báo cáo.
Thông tin chi tiết về khoảng đệm này khác nhau tuỳ theo trình duyệt, nhưng đối với Google Chrome, điều này có nghĩa là kích thước tối thiểu mà bất kỳ phản hồi mờ nào được lưu vào bộ nhớ đệm đều góp phần vào mức sử dụng bộ nhớ tổng thể là khoảng 7 megabyte. Bạn nên lưu ý điều này khi xác định số lượng phản hồi mờ mà bạn muốn lưu vào bộ nhớ đệm, vì bạn có thể dễ dàng vượt quá hạn mức bộ nhớ sớm hơn nhiều so với dự kiến dựa trên kích thước thực tế của các tài nguyên mờ.
Hướng dẫn liên quan:
Xóa bộ nhớ
Thẻ Xoá bộ nhớ là một tính năng rất hữu ích khi phát triển ứng dụng web tiến bộ. Thẻ này cho phép bạn huỷ đăng ký trình chạy dịch vụ và xoá tất cả bộ nhớ đệm và bộ nhớ chỉ bằng một lần nhấp vào nút. Hãy xem phần bên dưới để tìm hiểu thêm.
Hướng dẫn liên quan:
Các hướng dẫn khác về Bảng điều khiển ứng dụng
Hãy xem các hướng dẫn bên dưới để được trợ giúp thêm về các ngăn khác của bảng điều khiển Application (Ứng dụng).
Hướng dẫn liên quan: