Nếu bạn từng muốn biết trang web yêu thích cấu trúc như thế nào, dịch vụ "Inspect" của trình duyệt là phước lành ẩn giấu. Chúng tôi đã giới thiệu công cụ "Inspect" của Chrome, Firefox cũng có tính năng tương tự.
Công cụ Inspect Element của Firefox giúp điều tra cơ sở vận hành trang web, bao gồm phần tử HTML và CSS, tải trọng mạng, độ trễ tải phần tử, và file lưu trữ như cookie.
Lập trình viên giàu kinh nghiệm có thể không tìm thấy nhiều mới. Người mới và người dùng web thường ngày, tuy nhiên, sẽ tìm thấy phía mạnh mới của Firefox và giếng sâu file và hoạt động dưới mọi trang web.
Cài Đặt
Nếu dùng Firefox, không cần làm thêm. Nếu muốn bắt đầu dùng Firefox, trên Windows, Linux, Mac, iOS, Android, truy cập liên kết này tìm phiên bản mới. Cài file cài đặt như bình thường: nhấp đúp hoặc chạm nếu dùng điện thoại.
Phân phối Linux chính thống thường có Firefox cài sẵn hoặc bản sao trong trung tâm phần mềm/kho package người dùng cài dễ dàng.
Mở "Inspect Element"
Sau khi cài Firefox, tìm inspector bằng cách nhấp chuột phải bất kỳ phần tử nào trên trang web. Sẽ thấy menu thả xuống như hình dưới với Inspect Element gần cuối danh sách.
Inspector (Trình Kiểm Tra)
Nhấp "Inspect Element" ngay lập tức mở inspector dưới màn hình. Lúc này tiêu đề hơi mờ vì inspector kỹ thuật đã mở phần "Inspector" của dịch vụ.
Dù sao phần tử bạn nhấp hiển thị giữa công cụ, khi di chuột qua phần tử đó - như thẻ <div> tôi di chuột trong ảnh chụp dưới - "Inspector" sẽ làm nổi bật phần tử trực quan đó trên trang web.
Điều này dễ dàng biết bạn đang xem phần tử nào. Cũng dễ tìm các thuộc tính của phần tử đó. Nếu nhìn bên phải "Inspector", thấy thuộc tính của thẻ <div> cụ thể, bao gồm cài đặt margin, padding, border, font size, vertical alignment.
Nếu cuộn panel bên phải, thấy thuộc tính kế thừa từ phần tử khác. Thậm chí thay đổi thuộc tính trong cửa sổ đó và thấy xuất hiện real-time trên trang web.
Style Editor (Trình Chỉnh Sửa Kiểu)
Tiếp tục hành trình vào cascading style sheets (CSS) bằng toolbar đầu inspector. Nhấp nơi ghi Style Editor mở hộp thoại mới hiển thị 3 panel mới dưới màn hình.
Ở đây thấy 2 file style sheet DuckDuckGo dùng, phần tử của style sheet đầu tiên được chọn, và các quy tắc @media của sheet đó, quản trị responsive design cho màn hình nhỏ/lớn.
Bạn chỉnh sửa style sheet này giống như trong phần "Inspector". Trường hợp này nhiều quy tắc chọn - 1262 quy tắc chỉ trong style sheet đầu tiên.
Nếu điều hướng tiếp toolbar đến Network Monitor, tìm yêu cầu file của trang web và trạng thái. Phần tử khác như ảnh và font cũng có thể hiện trong tab đó, thấy tất cả yêu cầu và kích thước file sau xử lý.
Performance (Hiệu Suất)
Khi mở tab Performance, nhấp nút Start Recording Performance để inspector thu thập info. Sau vài giây khám phá frames-per-second (FPS) trang chạy, sự kiện document object model (DOM), tính toán lại style, cùng thời gian (thường ms) phần tử tải.
Với trang này, thấy sự kiện DOM nổi bật, một mouseover, mất 6.03 ms. FPS trung bình khoảng 39. Biểu đồ thời gian phản ứng đạt 9000 ms cho một số sự kiện.
Memory (Bộ Nhớ)
Trong tab Memory cũng nhấp nút - Take Snapshot - thu thập info. Với tôi, tạo bản đồ sự kiện hiển thị ~600 Kb strings, 1 Mb objects, 1 Mb scripts tìm đường vào bộ nhớ. Xem những phần tử đó cách khác bằng menu thả xuống ghi Tree Map như ảnh chụp.
Storage (Lưu Trữ)
Cuối cùng, nhấp tab Storage, thấy file vĩnh viễn trang web đặt trên máy. Liên quan hầu hết người dùng, bao gồm cookie. Thấy một cookie tải trong ảnh dưới.
Thấy panel bên phải cookie này hết hạn giữa thập kỷ tới và tôi truy cập trong phiên viết bài này.
Kết Luận
Có nhiều thứ để lội khi dùng Firefox inspector. Giới thiệu nhiều phần này sẽ bận rộn bạn một lúc.
Dành thời gian thay đổi phần tử HTML trang web. Ghé vài trang khác xem thời gian tải. Tìm trang cụ thể cố lưu bao nhiêu cookie. Đôi khi thông tin đó khiến bạn ngừng suy nghĩ.
Hy vọng hành trình khám phá giúp bạn hiểu sâu hơn những gì trang web làm để hoạt động như mong đợi. Có thể nhiều hơn bạn từng nhận ra.