Nếu bạn đã từng muốn biết các trang web yêu thích của mình được cấu trúc như thế nào, dịch vụ "Kiểm tra" của trình duyệt có thể là một phước lành ẩn. Chúng tôi đã đề cập đến công cụ "Kiểm tra" của Chrome và Firefox cũng cung cấp một đề xuất tương tự.

Công cụ "Inspect Element" của Firefox có thể giúp bạn điều tra nền tảng hoạt động của trang web, bao gồm các phần tử HTML và CSS mà nó sử dụng, tải của nó trên mạng, độ trễ của các phần tử tải của nó và các tệp được lưu trữ, chẳng hạn như bánh quy.

Các nhà phát triển có kinh nghiệm có thể không tìm thấy nhiều mới trong mồi này. Tuy nhiên, những người mới sử dụng và người dùng web hàng ngày nên tìm một khía cạnh mới, mạnh mẽ đối với khả năng của Firefox và rất nhiều tệp và hoạt động nằm bên dưới mọi trang web trên Internet.

Cài đặt

Nếu bạn sử dụng Firefox, bạn không cần phải làm gì thêm. Nếu bạn muốn bắt đầu sử dụng Firefox và bạn đang sử dụng Windows, Linux, Mac, iOS hoặc Android, hãy nhấp vào liên kết này để tìm phiên bản mới nhất của trình duyệt. Cài đặt các tệp trình cài đặt đã tải xuống như bình thường bằng cách nhấp đúp vào chúng hoặc nhấn vào nếu bạn đang sử dụng điện thoại thông minh.

Các bản phân phối Linux lớn có thể đi kèm với Firefox được cài đặt trước hoặc có bản sao của Firefox trong kho phần mềm / gói phần mềm của họ mà người dùng có thể dễ dàng cài đặt.

Mở "Kiểm tra phần tử"

Sau khi cài đặt Firefox, bạn có thể tìm thấy thanh tra của nó bằng cách nhấp chuột phải vào bất kỳ phần tử nào trên trang web. Điều đó sẽ cho bạn thấy một trình đơn thả xuống như một hình ảnh dưới đây, nơi "Kiểm tra Element" nằm gần dưới cùng của danh sách.

Thanh tra

Nhấp vào "Kiểm tra phần tử" sẽ ngay lập tức mở thanh tra ở cuối màn hình của bạn. Tại thời điểm này các tiêu đề có được một chút mơ hồ kể từ khi thanh tra sẽ có kỹ thuật mở "Thanh tra" một phần của dịch vụ của mình.

Trong mọi trường hợp, phần tử mà bạn nhấp vào sẽ được hiển thị ở giữa công cụ và khi bạn chạy chuột qua phần tử đó - như Tôi di chuột qua trong ảnh chụp màn hình bên dưới - “Trình kiểm tra” sẽ đánh dấu phần tử hình ảnh đó trên màn hình của bạn trong chính trang web đó.

Điều này giúp bạn dễ dàng biết những yếu tố bạn đang xem. Nó cũng làm cho nó dễ dàng để tìm thấy các thuộc tính khác nhau của những yếu tố đó. Nếu bạn nhìn sang bên phải của "Thanh tra", bạn sẽ thấy các thuộc tính của cụ thể đó , bao gồm cài đặt của nó cho lề, đệm, đường viền, kích thước phông chữ và căn chỉnh theo chiều dọc.

Nếu bạn cuộn qua bảng điều khiển bên phải đó, bạn có thể thấy các thuộc tính mà nó được thừa hưởng từ các phần tử khác. Bạn thậm chí có thể thay đổi các thuộc tính trong cửa sổ đó và xem chúng xuất hiện trên trang web trong thời gian thực.

Trình chỉnh sửa kiểu

Bạn có thể tiếp tục hành trình của mình đến lĩnh vực của các bảng định kiểu xếp tầng (CSS) bằng cách làm theo thanh công cụ ở trên cùng của thanh tra. Nhấp vào nơi nó nói "Trình chỉnh sửa kiểu" để mở một cuộc hội thoại mới hiển thị ba bảng mới ở cuối màn hình của bạn.

Ở đây bạn có thể thấy hai tập tin định kiểu mà DuckDuckGo sử dụng, các thành phần của bảng định kiểu được chọn đầu tiên và các quy tắc “@media” khác nhau của trang tính đó, điều chỉnh thiết kế đáp ứng cho màn hình nhỏ hơn và lớn hơn.

Bạn có thể chỉnh sửa các tờ kiểu này giống như bạn có thể trong phần "Thanh tra". Trong trường hợp này, có rất nhiều quy tắc để lựa chọn - 1262 quy tắc trong bảng định kiểu đầu tiên.

Nếu bạn điều hướng xa hơn trong thanh công cụ đến “Giám sát mạng”, bạn sẽ tìm thấy các yêu cầu của trang web cho các tệp đó và trạng thái của chúng. Các yếu tố khác như hình ảnh và phông chữ cũng có thể xuất hiện trong tab đó và bạn có thể xem tất cả các yêu cầu đó và kích thước của từng tệp sau khi yêu cầu được xử lý.

Hiệu suất

Khi bạn mở tab "Hiệu suất", bạn sẽ cần phải nhấp vào nút "Bắt đầu ghi hiệu suất" để thanh tra thu thập thông tin. Trong một vài giây, nó sẽ phát hiện ra khung hình mỗi giây (FPS) mà trang của bạn chạy, các sự kiện mô hình đối tượng tài liệu (DOM) diễn ra và tính toán lại theo thời gian (thường bằng mili giây). tải.

Đối với trang web này, bạn có thể thấy sự kiện DOM được tô sáng, di chuột qua, mất 6, 03 mili giây trong thời gian tải. FPS trung bình cho trang này là khoảng 39. Và biểu đồ hiển thị phạm vi thời gian phản hồi của tôi đạt 9000 mili giây cho một số sự kiện.

Ký ức

Trong thẻ "Bộ nhớ", bạn cũng sẽ cần phải nhấp vào nút - "Chụp nhanh" - để thu thập thông tin. Đối với tôi, nó tạo ra một bản đồ các sự kiện cho thấy xấp xỉ 600 Kb các chuỗi, 1 Mb các đối tượng và 1 Mb các kịch bản tìm đường vào bộ nhớ. Bạn có thể xem các phần tử giống nhau theo một vài cách khác nhau bằng cách nhấp vào trình đơn thả xuống, trong đó có "Bản đồ cây", như bạn có thể thấy trong ảnh chụp màn hình này.

Lưu trữ

Cuối cùng, nếu bạn nhấp vào tab "Bộ nhớ", bạn có thể xem các tệp vĩnh viễn mà trang web có thể đã đặt trên máy tính của bạn. Có liên quan đến hầu hết người dùng, điều này bao gồm cookie. Bạn có thể thấy một ảnh được tải trong hình dưới đây.

Bạn có thể thấy trong bảng điều khiển bên phải rằng cookie cụ thể này hết hạn vào giữa thập kỷ tiếp theo và tôi đã truy cập nó trong phiên viết bài viết này.

Phần kết luận

Có rất nhiều thứ phải bỏ qua khi sử dụng trình kiểm tra Firefox. Phần giới thiệu về nhiều phần của nó sẽ khiến bạn bận rộn trong một thời gian.

Hãy dành chút thời gian để thay đổi các phần tử HTML của trang web. Truy cập một vài trang web khác nhau để xem thời gian tải của chúng. Tìm hiểu số lượng cookie mà một trang cụ thể cố gắng lưu trữ trên máy của bạn. Đôi khi, thông tin đó có thể cho bạn tạm dừng.

Hy vọng rằng, hành trình khám phá này sẽ giúp bạn hiểu rõ hơn về những trang web nào có thể hoạt động như bạn mong đợi. Nó có thể nhiều hơn bạn đã nhận ra trước đó.

Hình ảnh tín dụng: Firefox Quantum trang chủ của DepositPhotos