babel-console-source

Babel Plugin: Console Source A Babel plugin that automatically prepends the source file and line number to console.log calls, making your debugging experience infinitely better.

The Problem We all use console.log() to debug, but in a large application, your console can quickly fill up with messages. It becomes difficult to know where each log is coming from without manually adding identifying strings to every single call.

// Where did this come from? Which component? Which file? console.log('Data updated', newData);

The Solution This Babel plugin automatically transforms your code at build time to add the source location to every console.log call.

Your code (before):

// In src/components/UserProfile.js console.log("User loaded", user);

What Babel outputs (after):

// The plugin automatically adds the file and line number! console.log("[UserProfile.js:42]", "User loaded", user);

This provides incredible debugging context for free, with zero effort.

Installation npm install --save-dev @your-username/babel-plugin-console-source

Usage In your Babel configuration file (babel.config.js or .babelrc), add the plugin to your plugins array. It's often best to only enable this during development.

// babel.config.js module.exports = api => { // Use api.env() to check the current environment const isDevelopment = api.env('development');

return { presets: [ // ... your other presets ], plugins: [ // Only apply the plugin in the development environment isDevelopment && '@your-username/babel-plugin-console-source', // ... your other plugins ].filter(Boolean), // .filter(Boolean) removes any falsey values }; };