Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save 0xbharath/4ae27c4d1cd9255e6d59fc526b4044ce to your computer and use it in GitHub Desktop.
Save 0xbharath/4ae27c4d1cd9255e6d59fc526b4044ce 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