This directory stores pre-built assets of the Perfetto UI web app, along with some additional files authored by the DevTools team, to support custom styling for the Perfetto UI. We embed this web app in an iFrame on the DevTools Performance page. This allows us to leverage the first-in-class trace viewer for viewing Dart and Flutter timeline traces.
This build output is included with the DevTools app bundle so that we can load the Perfetto UI web app from source at runtime. We do this for the following reasons:
This build output should be updated as needed, for example, if the Perfetto team releases some new features or fixes we want to take advantage of. Outside of ad hoc updates, this output should be refreshed at least once per quarter.
To update the Perfetto build output, run the update_perfetto.sh
script located in devtools/tools/
. Be sure that all DevTools-authored files under assets/perfetto
are not deleted by mistake.
If you are making changes to a local Perfetto branch and you want to test those changes in the DevTools embedding, follow these steps:
ui/build
from your perfetto
directory. You may need to run tools/install-build-deps --ui
before you are able to build. See Perfetto's UI development instructions for more details.perfetto_compiled
build to your local build: update_perfetto.sh -b /Users/me/path/to/perfetto/out/ui/ui/dist
Then run DevTools on web, and you should see changes from your local Perfetto branch applied to the embedded Perfetto timeline view in DevTools.