Log to console for easier troubleshooting

Chrome DevTools offers logging features that make it easier to debug your applications. Use these tools to understand how data flows through your components, why a transform returns an unexpected value, or whether an event handler fires more than once.

Copy link to this section

Log values using console.log

Use console.log to print values directly to the Console tab in Chrome DevTools. Chrome renders objects in an expandable format, which makes it easy to inspect arrays, fields, and nested structures at runtime.

// {package}/ui/c3/src/customInstances/WindTurbine.ReadFromAppState.tsx

import { getConfigFromApplicationState } from '@c3/ui/UiSdlApplicationState';

const turbines = getConfigFromApplicationState(
  'WindTurbine.AppState',
  reduxState,
  ['turbines']
);

console.log('Turbine data from application state:', turbines);

Use this technique to confirm that a selector or helper returns the structure you expect. You can expand the turbines array in the Console tab to view each object, inspect missing fields, or verify element count, without modifying the underlying code.

Use this when: A value appears empty in the UI, a transform depends on missing data, or a component does not render expected fields.

Copy link to this section

Categorize console output by severity

Use log levels such as debug, info, warn, and error to group messages by severity or intent. Chrome DevTools formats each level differently and allows you to filter the console by level, which helps reduce visual noise when troubleshooting.

console.debug('Raw transform result:', result); // Detailed, low-priority diagnostic
console.info('App initialized with:', initParams); // One-time startup message
console.warn('Missing required prop:', props.status); // Potential configuration issue
console.error('Failed to fetch turbines:', err); // Actionable failure

Use consistent log levels throughout the codebase to communicate urgency and intent. For example, reserve console.error for failures that affect the user experience, and use console.debug for fine-grained details you expect to remove before release.

Use this when: You need to highlight important messages, prioritize failures, or filter logs during development.

Copy link to this section

Group related logs for better readability

Use console.group() to organize related log messages under a single heading in the Chrome DevTools console. Expand or collapse the group to reduce clutter when a function or event handler produces several logs in sequence.

console.group('WindTurbine fetch');
console.log('Args:', args);
console.log('Response:', data);
console.groupEnd();

Use console.groupCollapsed() to keep the group collapsed by default:

console.groupCollapsed('Transform input');
console.log('context.uiInput:', context.uiInput);
console.groupEnd();

Grouped logs help you inspect related messages without scrolling through interleaved output from other parts of the application. This is especially useful when debugging transforms, action handlers, or backend responses.

Use this when: You log multiple related values in the same function or lifecycle and want to organize them under a single label.

Copy link to this section

Track how many times a function or hook runs

Use console.count(label) to print a running tally each time the console evaluates the line. Chrome increments the count automatically and groups messages under the specified label.

console.count('useEffect ran');

This helps you detect unexpected re-renders, repeated calls to an event handler, or frequent executions of a transform. For example, place the counter inside useEffect, useCallback, or a Redux listener to confirm whether React executes logic more often than expected.

The counter resets only when you refresh the page or restart DevTools.

Use this when: You want to verify how often a component re-renders, an effect runs, or an action fires.

Copy link to this section

Trace the call stack for unexpected behavior

Use console.trace(label) to print a snapshot of the JavaScript call stack at the point of execution. Chrome DevTools shows the exact path that led to the function call — including file names, line numbers, and calling functions.

console.trace('updateTurbines called');

This is especially useful when a reducer, effect, or event handler runs unexpectedly and you need to identify what triggered it. Add console.trace inside custom hooks, Redux listeners, or transforms to locate the source of the call.

The trace appears as a collapsible stack in the Console tab.

Use this when: You want to understand the origin of a function call that occurs unexpectedly or without a clear trigger.

Copy link to this section

Pause execution with debugger

Use the debugger statement to stop execution at a specific line of code when Chrome DevTools is open. The browser will pause before executing the statement, allowing you to inspect variables, evaluate expressions, and step through code in the Sources panel.

if (!props.data) {
  debugger;
}

Use this technique when the console alone is not enough. You can examine in-scope values such as props, state, and local variables, and trace control flow across components, effects, or transforms. Chrome highlights the paused line and shows the full call stack.

This works in .tsx files, callbacks, hooks, epics, and .c3typ transforms.

Use this when: You want to stop execution at a specific point and inspect application state, props, or control flow before proceeding.

Copy link to this section

Add logpoints at runtime without editing code

Use a logpoint in Chrome DevTools to print messages at runtime without modifying your source files. Logpoints allow you to inspect values on a specific line, even in minified or bundled code, and are useful when debugging in production-like environments.

1. Open the Sources panel.

2. Locate the source file using ⌘+P (or Ctrl+P).

3. Right-click a line number and select Add logpoint.

4. Enter an expression or message, such as:

   Text

   Copy code to clipboard

   "Transform input:", context.uiInput

Logpoints behave like console.log() but do not require file changes, redeployments, or refreshes. Chrome evaluates the expression every time the line executes.

Use this when: You need to inspect values quickly without changing code, especially in QA, staging, or production environments.