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 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.

git clone [email protected]:devtools-html/perf.html.git

cd perf.html
npm install

npm start

To run a faster production version use npm run start-prod instead of npm 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.

1. Go to about:addons
2. Find the Gecko Profiler add-on
3. Click Preferences button
4. Change the value of the Reporter URL to http://localhost:4242/from-addon/

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

MPL v2