Uploaded image for project: 'Jenkins'
  1. Jenkins
  2. JENKINS-39657

Runtime JavaScript bundle analyser for Chrome Dev Tools

    XMLWordPrintable

Details

    Description

      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.

      Attachments

        Issue Links

          Activity

            tfennelly Tom FENNELLY added a comment -

            I did a small bit of hacking on this while on xmas hols and intend doing more in my own spare time, so marking it as in-progress.

            tfennelly Tom FENNELLY added a comment - I did a small bit of hacking on this while on xmas hols and intend doing more in my own spare time, so marking it as in-progress.
            tfennelly Tom FENNELLY added a comment - - edited

            Experimenting with adding something that allows us to easily turn on and off logging levels for different log categories.

            Currently looking at using @jenkins-cd/diag for the logging. Some Yak Shaving required though first because need to make some changes to @jenkins-cd/diag first in order to make it use client-side localStorage more sanely wrt log categories etc, which is leading to a bit more Yak Shaving as we need a better way of managing client-side localStorage, which resulted in me playing with @jenkins-cd/storage (see JENKINS-40768).

            tfennelly Tom FENNELLY added a comment - - edited Experimenting with adding something that allows us to easily turn on and off logging levels for different log categories. Currently looking at using @jenkins-cd/diag for the logging. Some Yak Shaving required though first because need to make some changes to @jenkins-cd/diag first in order to make it use client-side localStorage more sanely wrt log categories etc, which is leading to a bit more Yak Shaving as we need a better way of managing client-side localStorage, which resulted in me playing with @jenkins-cd/storage (see JENKINS-40768 ).
            tfennelly Tom FENNELLY added a comment -

            Spent the last few days learning how Chrome Devtool Extensions hang together via a smaller project so as to learn the moving parts before I try creating the bundle analyser stuff. It allows configuration of the BO logging, which happens via the @jenkins-cd/logging package. See https://github.com/tfennelly/jenkins-logging-chrome-ext.

            tfennelly Tom FENNELLY added a comment - Spent the last few days learning how Chrome Devtool Extensions hang together via a smaller project so as to learn the moving parts before I try creating the bundle analyser stuff. It allows configuration of the BO logging, which happens via the @jenkins-cd/logging package. See https://github.com/tfennelly/jenkins-logging-chrome-ext .
            tfennelly Tom FENNELLY added a comment -

            michaelneale Here's a video of this WiP, starting from the point where it demos the current state of the tooling. Anyone interested in setup and general blurb can go back to the start.

            tfennelly Tom FENNELLY added a comment - michaelneale Here's a video of this WiP, starting from the point where it demos the current state of the tooling. Anyone interested in setup and general blurb can go back to the start.
            michaelneale Michael Neale added a comment -

            thanks tfennelly that is most useful, now less flying blind.

            michaelneale Michael Neale added a comment - thanks tfennelly that is most useful, now less flying blind.
            tfennelly Tom FENNELLY added a comment -
            tfennelly Tom FENNELLY added a comment - Can be downloaded and installed from https://github.com/tfennelly/jenkins-js-modules-chrome-ext

            People

              tfennelly Tom FENNELLY
              tfennelly Tom FENNELLY
              Votes:
              0 Vote for this issue
              Watchers:
              2 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: