Skip to content

Instantly share code, notes, and snippets.

@0xbharath

0xbharath/profiling-a-chrome-extension.md

Forked from bvaughn/profiling-a-chrome-extension.md
Created February 21, 2024 05:46
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.
Download ZIP
Profiling a custom Chrome extension
Raw
profiling-a-chrome-extension.md

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