Trong lớp học lập trình này, bạn sẽ được hướng dẫn về 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. Vào cuối bài tập, bạn sẽ có các kỹ năng cần thiết để tìm ra những gì ứng dụng web của riêng bạn đang tải và khi ứ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 Network (Mạng) để xem lưu lượng truy cập mạng của ứng dụng minh hoạ.
Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen
(Toàn màn hình).Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
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 cho thấy tất cả thành phần được tải nhờ thao tác điều hướng ban đầu của bạn:
Cách diễn giải nội dung
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, thuộc 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 tài sản bổ sung (được gọi là tài nguyên phụ của tài liệu chính) sẽ được chuyển từ nguồn ban đầu này.
Các hàng thứ hai và thứ ba, hiển thị một stylesheet CSS và một 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 đưa ra.
Xem xét thời điểm các yêu cầu đó được thực hiện, sơ đồ thác nước cho thấy chúng sẽ không bắt đầu cho đến rất muộn trong quá trình phản hồi yêu cầu điều hướng.
Khi kết hợp lại với nhau, 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 thêm một số yêu cầu khác đối với thời gian chạy
Khi bảng điều khiển Network (Mạng) vẫn mở và ghi lại, đã đến lúc mô phỏng một hoạt động 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 khác vào trang sau khi hoàn tất bướ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 Find Me (Tìm tôi) trong ứng dụng, rồi nhấp vào Allow (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 vào thông tin vị trí hiện tại của bạn:
Sau khi ứng dụng web có vị trí để làm việc, thao tác nhấp vào Find Nearby Nearby (Tìm mục nhập Wikipedia lân cận) sẽ dẫn đến thêm một số yêu cầu về mạng. Bạn sẽ thấy như sau:
Diễn giải các mục nhập mới
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 nhập mới biểu thị 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) được liên kết với các mục trên Wikipedia. Mặc dù hơi khó nhìn thấy từ ảnh chụp màn hình, nhưng các mục nhập trong cột Thác nước trực tiếp xuất phát 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ỳ theo khoảng thời gian bạn mở trang trước khi bạn nhấp vào Tìm mục dự thi Wikipedia lân cận. Điều quan trọng nhất ở đây là thời điểm bị ngắt kết nối khỏi yêu cầu điều hướng ban đầu. Bạn có thể biết được điều này từ khoảng trống lớn tồn tại trong màn hình Thác nước, thể hiện khoảng thời gian giữa lần tải đầu tiên và thời điểm thực hiện yêu cầu API Wikipedia.
Các yêu cầu được đưa ra sau một khoảng thời gian sau khi điều hướng sẽ thuộc danh mục "yêu cầu khi bắt đầu chạy", khác với nhóm yêu cầu ban đầu dùng để hiển thị trang trong lần đầu bạn điều hướng tới trang đó.
Tổng hợp mọi thứ
Sau khi trải qua các bước trong lớp học lập trình này, bạn hiện đã quen với các công cụ có thể dùng để phân tích những nội dung mà bất kỳ ứng dụng web nào tải.
Bảng điều khiển Mạng giúp bạn trả lời câu hỏi về cái gì đang được tải, thông qua URL trong cột Tên và dữ liệu trong cột Loại, cùng với thời điểm được tải, thông qua hiển thị 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, đối với HTML, JavaScript, CSS (và có thể là các thành phần khác).
- Yêu cầu thời gian chạy được đưa ra do người dùng tương tác với trang. Quá trình này thường có thể bắt đầu bằng một yêu cầu tới một API, sau đó chuyển thành một số yêu cầu tiếp theo dựa trên dữ liệu API được truy xuất.