A way to see console.log() messages without breaking old browsers AND only on dev servers

logMessage1-import.js

import {ENV} from '../../env'; // (ENV = 'dev' || 'prod')

export default function logMessage(message, styles) {
  // 'ENV' will establish if this should be rendered or not.
  // Since it's set to 'dev' by default, 'console.log' messages
  // will not output in production.
  if (ENV === 'dev' && typeof parent.window.console === 'object') {
    parent.window.console.log(message, styles);
  }
}

// example// Use:
const helloWorld = 'hello world';
logMessage(`%c [helloWorld]: ${helloWorld}`, 'padding: 5px 5px 5px 2px; background: #bada55; color: black');
logMessage(`%c [helloWorld]: ${helloWorld}`, 'padding: 5px 5px 5px 2px; background: #de1e7e; color: white');
logMessage(`%c [helloWorld]: ${helloWorld}`, 'padding: 5px 5px 5px 2px; background: orange; color: white');
logMessage(`%c [helloWorld]: ${helloWorld}`, 'padding: 5px 5px 5px 2px; background: #551a8b; color: white');
logMessage(`%c [helloWorld]: ${helloWorld}`, 'padding: 5px 5px 5px 2px; background: black; color: white');

logMessage2-inline.js

const logMessage = message => {
  // set this to false if you don't want to print console log messages through this function
  const debug = true;
  if (debug && typeof parent.window.console === 'object') {
    parent.window.console.log(message);
  }
};

// example
logMessage('hello world');