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.
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.
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 startTo run a faster production version use
npm run start-prodinstead ofnpm 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/from-addon/
add-on
If you'd like to develop the add-on perf.html uses see the Gecko Profiler repository.
Say hello on slack in the #perf channel.