workbox/test/workbox-core/static/logger.html

<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <p>
      IMPORTANT: Chrome DevTools recently changed to hide console.debug logs, so
      if you do the debug logs, please check DevTools is set to show all levels.
    </p>
    <h1>Current Log Level: "<span class="js-current-level"></span>"</h1>
    <h3>logger.*()</h3>
    <button class="js-debug">logger.debug()</button>
    <button class="js-log">logger.log()</button>
    <button class="js-warn">logger.warn()</button>
    <button class="js-error">logger.error()</button>
    <button class="js-group">logger.groupCollapsed()</button>

    <script>
      // Fakery to make it load in the window
      self.registration = {
        scope: 'inject-scope',
      };
    </script>

    <script src="/__WORKBOX/buildFile/workbox-core"></script>
    <script>
      const logger = workbox.core._private.logger;

      const SIMPLE_OUTPUT_TESTS = [
        // String
        'Hello from demo.',
        // Objects
        {
          foo: {
            bar: {
              baz: 'Yo.',
            },
          },
        },
        ['Example of an Array', {with: 'objects'}, true, false],
        true,
        false,
        1234,
      ];
      const MULTIPLE_ARGS_OUTPUT_TESTS = [
        ['Testing', 'multiple', 'strings'],
        ['Testing', {mixed: 'items'}, 'in', ['a', 'log']],
        [{this: 'is'}, 'different', 'cos', {strings: 'are'}, 'not first'],
      ];

      const allLogBtns = [
        {
          className: '.js-log',
          funcName: 'log',
        },
        {
          className: '.js-debug',
          funcName: 'debug',
        },
        {
          className: '.js-warn',
          funcName: 'warn',
        },
        {
          className: '.js-error',
          funcName: 'error',
        },
      ];
      allLogBtns.forEach((logBtnDetails) => {
        const btnElement = document.querySelector(logBtnDetails.className);
        btnElement.addEventListener('click', () => {
          SIMPLE_OUTPUT_TESTS.forEach((output) => {
            logger[logBtnDetails.funcName](output);
          });

          MULTIPLE_ARGS_OUTPUT_TESTS.forEach((output) => {
            logger[logBtnDetails.funcName](...output);
          });

          console.log('\n\n');
        });
      });

      const groupBtn = document.querySelector('.js-group');
      groupBtn.addEventListener('click', () => {
        logger.groupCollapsed(`I'm the title for logger.groupCollapsed()`);

        const innerLog = [`I'm inside the group`, {cool: true}];
        logger.debug(...innerLog);
        logger.log(...innerLog);
        logger.warn(...innerLog);
        logger.error(...innerLog);

        logger.groupCollapsed(
          `I'm the title for a nested logger.groupCollapsed() call`,
        );
        const nestedLog = [`I'm doubly inside`, {superCool: true}];
        logger.debug(...nestedLog);
        logger.log(...nestedLog);
        logger.warn(...nestedLog);
        logger.error(...nestedLog);
        logger.groupEnd();

        logger.groupEnd();

        console.log('\n\n');
      });
    </script>
  </body>
</html>