Blue Ocean client-side functionality is delivered as a series of JavaScript "bundles" (CommonJS modules bundled in self contained executable JavaScript files). js-modules and js-builder add the functionality that allows these bundles to "cooperate" with each other, with some bundles providing modules to other bundle (i.e. are dependencies of), allowing those other bundles to not contain modules that they might ordinarily contain.

There are a number of reasons for us wanting/needing to do this, not least the fact that all our bundles must use/share the same instance of react at runtime.

At the moment, it's really quite difficult to analyse what's happening at runtime across all these bundles. For example, it's hard to check what bundles contain what modules i.e. it's hard to get a definitive answer to a questions like:

• What bundles currently loaded in the browser contain module XYZ?
• What bundle is providing the instance of react that's being used by the blueocean-personalization extensions bundle? You'd need to know the answer to this when you see react errors (from e.g. personalization) that "look" like we might be leaking in another instance of react.
• Are there any bundles active in the browser that are older than a specific time, or number of minutes etc? This would be useful if you want to check did you actually rebuild everything the way you thought.

We need to be able to answer these questions more easily in order to analyse the bundles we are generating and in order to verify that the runtime environment is as we expect/want it to be. At the moment, it requires us to manually open each of the raw bundle sources in the browser and have a look inside. As well as obviously being very tedious, it's also obviously going to be confusing and error prone, leading to wrong conclusions etc and making it harder to diagnose issues.

This chrome extension will hopefully allow us to easily and accurately "query" across all active bundles in the browser at runtime and answer the sorts of questions listed above.

Original description:

Lots of things we could use this for but I have a few things in mind immediately, one of which I have an immediate need for:

1. js-modules bundle inspector. The ability to look inside js-modules loaded bundles and inspect their contents. Query support of different kinds e.g. find loaded bundles that contain modules that match a name pattern, or bundles that depend on bundle "X". I have an immediate need for this wrt JENKINS-39646.
2. Configure logging categories e.g. the ability to easily turn on/off SSE event logging.
3. View available extension points on a page.