perf.html
perf.html visualizes performance data recorded from web browsers. It is a tool designed to consume performance profiles from the Gecko Profiler but can visualize data from any profiler able to output in JSON. The interface is a web application built using React and Redux and runs entirely client-side.
Mozilla develops this tool for examining the performance of Firefox as well as examining web page performance in the Firefox Developer Tools.
This project was previously called Cleopatra.
Usage
Visit perf-html.io
π
This project is live on https://perf-html.io/. You need to install the add-on provided at that website to record profile data from Firefox.
Development
You'll find documentation for the project in the docs folder as well as
README.md
files in most folders in /src.
We use Yarn as our dependency manager so you'll need to go and install it before running the following commands.
git clone git@github.com:devtools-html/perf.html.git
cd perf.html
yarn install
yarn start
To run on a different port, set the
PERFHTML_PORT
env variable to something else, egPERFHTML_PORT=1234 yarn start
To run a faster production version use
yarn start-prod
instead ofyarn start
Assuming you've installed the add-on from perf-html.io you'll need to configure it to point to your local web development server.
- Go to
about:addons
- Find the Gecko Profiler add-on
- Click Preferences button
- Change the value of the Reporter URL to
http://localhost:4242/
add-on
If you'd like to develop the add-on perf.html uses see the Gecko Profiler repository.
Discussion
Say hello on slack in the #perf channel.
License
Optional Notices
Some permissive software licenses request but do not require an acknowledgement of the use of their software. We are very grateful to the following people and projects for their contributions to this product:
- The zlib compression library (Jean-loup Gailly, Mark Adler and team)