Export console logging functions to extensions

[westonruter]

I just learned about console.context() via https://devtoolstips.org/tips/en/create-contextual-console-loggers/

This can be used to filter messages by the context via the context: operator in the filter search box.

We could create info, warn, and log, error functions which we expose to the client-side extensions' initialize() and finalize() functions as well. Maybe these functions could automatically take into account the value of isDebug coming from WP_DEBUG in PHP, so that they automatically no-op when called. That would avoid the need to wrap calls in if ( isDebug ) { ... } all the time in extensions.

[ShyamGadde]

I noticed that console.context() is currently "an experiment in Chromium-based browsers only" according to the article you linked. This might cause errors in Firefox, Safari, and other non-Chromium browsers.

Would it make sense to implement simple feature detection before using it? Maybe something like:

function createLogger(...) {
    ...
    if (typeof console.context === 'function') {
        // Use console.context
    } else {
        // Fall back to regular console with prefixed messages
    }
    ...
}

This way we could still benefit from context in supported browsers.

[westonruter]

@ShyamGadde yes, that makes sense. That being said, if this is experimental maybe it's too early to ship.

In the mean time, we could look at exporting log, info, warn, and error functions to the async initialize and finalize functions used by extensions which include the isDebug check by default.

This would eliminate the following code:

performance/plugins/embed-optimizer/detect.js

Lines 21 to 39 in 4a79036

	/**
	* Logs a message.
	*
	* @param {...*} message
	*/
	function log( ...message ) {
	// eslint-disable-next-line no-console
	console.log( consoleLogPrefix, ...message );
	}
	/**
	* Logs an error.
	*
	* @param {...*} message
	*/
	function error( ...message ) {
	// eslint-disable-next-line no-console
	console.error( consoleLogPrefix, ...message );
	}

performance/plugins/image-prioritizer/detect.js

Lines 34 to 44 in 4a79036

	/**
	* Logs a message.
	*
	* @since 0.3.0
	*
	* @param {...*} message
	*/
	function log( ...message ) {
	// eslint-disable-next-line no-console
	console.log( consoleLogPrefix, ...message );
	}

And if the functions included the isDebug checks by default, we could remove the conditions from:

performance/plugins/embed-optimizer/detect.js

Lines 64 to 66 in 4a79036

	if ( isDebug ) {
	log( 'Loaded embed content rects:', loadedElementContentRects );
	}

performance/plugins/embed-optimizer/detect.js

Lines 85 to 93 in 4a79036

	if ( isDebug ) {
	const elementData = getElementData( xpath );
	log(
	`boundingClientRect for ${ xpath } resized:`,
	elementData.boundingClientRect,
	'=>',
	domRect
	);
	}

performance/plugins/embed-optimizer/detect.js

Lines 118 to 120 in 4a79036

	if ( isDebug ) {
	log( `Resized element ${ xpath }:`, entry.contentRect );
	}

performance/plugins/image-prioritizer/detect.js

Lines 100 to 115 in 4a79036

	if ( entry.url.length > 500 ) {
	if ( isDebug ) {
	log( `Skipping very long URL: ${ entry.url }` );
	}
	return;
	}
	// Also skip Custom Elements which have excessively long tag names. This is the maxLength defined in image_prioritizer_add_element_item_schema_properties().
	if ( entry.element.tagName.length > 100 ) {
	if ( isDebug ) {
	log(
	`Skipping very long tag name: ${ entry.element.tagName }`
	);
	}
	return;
	}

And so on.

[westonruter]

We can revisit console.context() when it becomes stable.