Firefox Performance kiểm tra khả năng phản hồi website


Firefox là một trình duyệt web tuyệt vời cho người dùng. Đây cũng là một trong những trình duyệt tốt nhất dành cho nhà phát triển. Tại sao? Bởi vì ứng dụng nguồn mở bao gồm một số công cụ được thiết kế dành riêng cho các nhà phát triển. Các công cụ này bao gồm Trình kiểm tra trang (được sử dụng để kiểm tra và sửa đổi HTML và CSS của một trang), Bảng điều khiển Web (ghi nhật ký thông tin được liên kết với một trang web) và Trình gỡ lỗi JavaScript.

Một công cụ khác được tìm thấy trong menu Nhà phát triển web là Firefox Performance, cung cấp cho bạn cái nhìn sâu sắc về khả năng phản hồi, JavaScript và hiệu suất bố cục của trang web của bạn. Công cụ này cũng cho phép bạn tạo một bản ghi hoặc hồ sơ của một trang web theo thời gian. Khi bạn dừng ghi âm, bạn sẽ được trình bày tổng quan về mọi thứ xảy ra để hiển thị trang web trong trình duyệt.

Sử dụng Firefox Performance kiểm tra khả năng phản hồi website

Từ tổng quan đó, bạn sẽ có được một số hiểu biết rất cần thiết để giúp cải thiện hiệu suất của trang web bạn đã phát triển.

Hiệu suất đi kèm với bốn công cụ phụ sẽ được sử dụng:

Waterfall: Hiển thị các hoạt động khác nhau mà trình duyệt thực hiện khi bạn sử dụng trang web đang được thử nghiệm.
The Call Tree : Hiển thị các chức năng JavaScript.
The Flame Chart : Hiển thị ngăn xếp cuộc gọi JavaScript.
The Allocations view : Hiển thị phân bổ heap được tạo bởi mã của bạn.

Những gì bạn cần

  • Phiên bản cập nhật của Firefox
  • Một trang web để kiểm tra

Tôi sẽ trình diễn trên phiên bản Nightly version of Firefox trên Pop! _OS Linux. Nền tảng bạn sử dụng không thành vấn đề, miễn là bạn có phiên bản trình duyệt web bao gồm công cụ Performance (Hiệu suất).

Cách khởi động công cụ Firefox Performance

Điều đầu tiên bạn phải làm là khởi động công cụ Performance. Để làm điều này, hãy mở Firefox và nhấp vào nút menu ở góc trên bên phải. Nhấp vào Web Developer | Performance . Điều này sẽ mở một khung mới ở dưới cùng của cửa sổ trình duyệt (Hình A).

Firefox Performance  kiểm tra khả năng phản hồi website
Created with GIMP

Tiếp theo, duyệt đến trang web được đề cập và sau đó nhấp vào nút Start Recording Performance . Khi quá trình ghi đã bắt đầu, hãy hành động trong trang web bạn đang kiểm tra. Công cụ Performance sau đó sẽ bắt đầu thu thập dữ liệu (Hình B).

Cách khởi động công cụ Firefox Performance
Created with GIMP

Bộ đệm Performance sẽ lấp đầy rất nhanh. Khi nó đã được lấp đầy, nó sẽ bắt đầu ghi đè dữ liệu trước đó, vì vậy bạn nên chắc chắn nếu bạn muốn giữ dữ liệu đầu tiên được ghi lại, để xem tỷ lệ phần trăm bộ đệm và dừng ghi trước khi đạt 100%.

Khi Performance đã dừng ghi, nó sẽ hiển thị những gì nó đã khám phá. Sau đó, bạn có thể cuộn qua mọi bản ghi và chọn một đối tượng, nó sẽ mở các chi tiết trong một khung bên phải (Hình C).

Created with GIMP

Bạn sẽ thấy một liên kết trong các chi tiết (trong trường hợp ở trên, liên kết là osd.js: 1). Nhấp vào liên kết đó để mở Debugger, sẽ hiển thị mã được liên kết với đối tượng bạn đã chọn (Hình D).

Created with GIMP

Sau đó, bạn có thể quay lại tab Performance để tiếp tục lướt qua mọi bản ghi trong hồ sơ đã ghi. Nhấp vào Call Tree (Hình E) hoặc Flame Chart để hiểu rõ hơn về hiệu suất mã của bạn.

Created with GIMP

Nếu bạn muốn lưu hồ sơ này, bấm Lưu trong thanh bên trái. Điều này sẽ tải hồ sơ dưới dạng tệp JSON vào ổ đĩa cục bộ của bạn. Bạn có thể xem hồ sơ đã lưu bằng cách nhấp vào nút Nhập (biểu tượng trực tiếp bên phải của đồng hồ) trong thanh bên trái. Mở tệp JSON đã lưu và bạn có thể quét qua hồ sơ được ghi lại trước đó.

Công cụ Firefox Performance là một công cụ mà mọi nhà phát triển web nên sử dụng để giúp khắc phục lý do tại sao một trang web không hoạt động theo tiêu chuẩn của bạn. Nó dễ sử dụng, miễn phí và cung cấp quá nhiều thông tin cho nhu cầu gỡ lỗi của bạn.

Xem thêm :Tại Đây
Blog Download Template Blogspot : Tại Đây
Blog Download Phần Mềm Free : Tại Đây
Blog Download Acapella : Tại Đây
Trang mã hóa URL : Tại Đây


Welcome to F4vnn.com - Blog Thủ Thuật, tất cả nội dung trên website được chúng tôi sưu tập trên Internet. Nếu có vấn đề về bản quyền với bài viết trên Blog vui lòng liên hệ với và chúng tôi sẽ xóa bài viết ngay lập tức . Liên lạc với Admin qua mail: hoangvansy90@gmail.com!

ĐỪNG QUÊN ĐĂNG KÝ FANPAGE ĐỂ NHẬN THỦ THUẬT MỚI NHẤT NHÉ!