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

Runtime JavaScript bundle analyser for Chrome Dev Tools

    Details

    • Similar Issues:

      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

            Hide
            tfennelly Tom FENNELLY added a comment -
            Show
            tfennelly Tom FENNELLY added a comment - Can be downloaded and installed from https://github.com/tfennelly/jenkins-js-modules-chrome-ext
            Hide
            michaelneale Michael Neale added a comment -

            thanks Tom FENNELLY that is most useful, now less flying blind.

            Show
            michaelneale Michael Neale added a comment - thanks Tom FENNELLY that is most useful, now less flying blind.
            Hide
            tfennelly Tom FENNELLY added a comment -

            Michael Neale 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.

            Show
            tfennelly Tom FENNELLY added a comment - Michael Neale 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.
            Hide
            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.

            Show
            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 .
            Hide
            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).

            Show
            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 ).
            Hide
            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.

            Show
            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.

              People

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

                Dates

                • Created:
                  Updated:
                  Resolved: