Skip to content

Instantly share code, notes, and snippets.

@bvaughn
Last active February 21, 2024 05:46
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save bvaughn/ab6a6aefcda21dd2db69c7eaa7bf3332 to your computer and use it in GitHub Desktop.
Save bvaughn/ab6a6aefcda21dd2db69c7eaa7bf3332 to your computer and use it in GitHub Desktop.
Profiling a custom Chrome extension

Chrome's profiler ("Performance tab) is very useful for measuring JavaScript performance, but what if you want to measure the performance of a custom extension?

For example, what if I would like to profile the following interaction:


The interaction we want to profile


I could try to use the Performance, but once I start profiling- I'm unable to switch back to my extension tab!


Performance tab doesn't let us click another tab


There is a way to to work around this, although it has limits. First, you'll have to undock the extension:


undock an extension


Next, you'll need to open a second Chrome developer tools window (to debug the first!)


open a second Chrome developer tools window


Now, with a little preparation, you can use the second developer tools to trigger the interaction you want to profile in the first!


Using a second DevTools panel to simulate an event


Thanks to Dan (@gaearon) for the idea!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment