Lớp học lập trình này sẽ hướng dẫn bạn quy trình diễn giải tất cả lưu lượng truy cập mạng cho một ứng dụng mẫu hơi phức tạp. Khi kết thúc bài tập này, bạn sẽ có những kỹ năng cần thiết để tìm hiểu nội dung mà ứng dụng web của riêng bạn đang tải và thời điểm ứng dụng đó thực hiện từng yêu cầu.
Chuyển đến Bảng điều khiển mạng
Chuyển đến bảng điều khiển Mạng để xem lưu lượng truy cập mạng cho ứng dụng minh hoạ.
Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào biểu tượng Toàn màn hình
.Nhấn tổ hợp phím `Ctrl+Shift+J` (hoặc `Command+Option+J` trên máy Mac) để mở DevTools.
Nhấp vào thẻ Mạng.
Tải lại trang để xem lưu lượng truy cập mạng.
Bảng điều khiển Mạng hiển thị tất cả thành phần được tải do thao tác điều hướng ban đầu của bạn:
Cách diễn giải các mục nhập
Mỗi hàng lưu lượng truy cập mạng được ghi lại đại diện cho một cặp yêu cầu và phản hồi.
Hàng đầu tiên, với loại document, là yêu cầu điều hướng ban đầu cho HTML của ứng dụng web. Đây là nguồn cho thác nước; mỗi yêu cầu tiếp theo cho các thành phần bổ sung (được gọi là tài nguyên phụ của tài liệu chính) sẽ được lấy từ nguồn ban đầu này.
Hàng thứ hai và thứ ba, hiển thị stylesheet CSS và tài nguyên phụ script đang được tải, là các yêu cầu phụ thuộc do tài liệu chính khởi tạo.
Khi xem xét thời điểm các yêu cầu đó được thực hiện, sơ đồ dạng thác nước cho thấy rằng các yêu cầu này chỉ bắt đầu rất muộn trong quá trình phản hồi yêu cầu điều hướng.
Tổng hợp lại, các yêu cầu về tài liệu HTML, CSS và JavaScript là cần thiết để hiển thị toàn bộ trang trong quá trình điều hướng ban đầu.
Tạo một số yêu cầu thời gian chạy bổ sung
Khi bảng điều khiển Network (Mạng) vẫn mở và ghi, đã đến lúc mô phỏng một số thao tác phổ biến đối với nhiều ứng dụng web: các yêu cầu API bổ sung dùng để thêm dữ liệu vào trang sau khi hoàn tất thao tác điều hướng ban đầu.
Kích hoạt các yêu cầu bổ sung này bằng cách nhấp vào Tìm tôi trong ứng dụng, sau đó nhấp vào Cho phép trong cửa sổ bật lên xuất hiện. Thao tác này sẽ cho phép trang web truy cập thông tin vị trí hiện tại của bạn:
Sau khi ứng dụng web có một vị trí để hoạt động, việc nhấp vào Tìm mục trên Wikipedia ở gần sẽ dẫn đến một số yêu cầu mạng bổ sung. Bạn sẽ thấy nội dung tương tự như sau:
Diễn giải các mục nhập mới
Giống như trước đây, mỗi hàng lưu lượng truy cập mạng được ghi lại đại diện cho một cặp yêu cầu và phản hồi.
Hàng đầu tiên của các mục mới đại diện cho một yêu cầu có loại fetch, tương ứng với cách ứng dụng web yêu cầu dữ liệu từ API Wikipedia.
Tất cả các hàng sau đây đều là hình ảnh (png hoặc jpeg) liên kết với các mục trên Wikipedia. Mặc dù hơi khó để xem từ ảnh chụp màn hình, nhưng các mục nhập của chúng trong cột Thác nước trực tiếp chảy từ phản hồi API.
Đối với tất cả các yêu cầu bổ sung này, thời điểm sẽ thay đổi tuỳ thuộc vào thời gian bạn mở trang trước khi nhấp vào Tìm mục trên Wikipedia ở gần. Quan trọng nhất ở đây là when bị ngắt kết nối với yêu cầu điều hướng ban đầu. Bạn có thể biết điều này từ khoảng trống lớn tồn tại trong màn hình Thác nước, đại diện cho khoảng thời gian đã trôi qua giữa lần tải ban đầu và thời điểm yêu cầu API Wikipedia được thực hiện.
Các yêu cầu được thực hiện sau một khoảng thời gian sau khi điều hướng sẽ thuộc danh mục "yêu cầu thời gian chạy", trái ngược với nhóm yêu cầu ban đầu dùng để hiển thị trang khi bạn điều hướng đến trang đó lần đầu tiên.
Tóm tắt
Sau khi thực hiện các bước trong lớp học lập trình này, bạn đã quen thuộc với các công cụ mà bạn có thể sử dụng để phân tích nội dung mà mọi ứng dụng web tải.
Bảng điều khiển Mạng giúp bạn trả lời câu hỏi về nội dung đang được tải, thông qua các URL trong cột Tên và dữ liệu trong cột Loại, cùng với thời điểm nội dung đó đang được tải, thông qua chế độ hiển thị dạng thác nước.
Bạn cũng đã thấy rằng các yêu cầu do một trang web đưa ra (thường) có thể được nhóm thành một trong hai danh mục:
- Các yêu cầu ban đầu, được thực hiện ngay sau khi chuyển đến một trang mới, cho HTML, JavaScript, CSS (và có thể là các thành phần khác).
- Các yêu cầu trong thời gian chạy được thực hiện do người dùng tương tác với trang. Quá trình này thường bắt đầu bằng một yêu cầu đến một API, sau đó chuyển sang một số yêu cầu tiếp theo dựa trên dữ liệu API được truy xuất.