Как цветной консольный вывод в Chrome ускоряет отладку JavaScript

console.log('Обычное сообщение');
console.error('Что-то пошло не так!');
console.warn('Осторожно, возможны проблемы');
console.info('Полезная информация');
console.debug('Отладочные данные');

console.log('%cЦветной текст', 'color: blue; font-size: 20px');
console.log('Обычный текст %cЦветной текст%c снова обычный', 'color: green; font-weight: bold', '');

// Основные цвета и форматирование
console.log('%cВажное сообщение', 'color: white; background-color: red; padding: 2px 5px; border-radius: 3px');

// Использование шрифтов
console.log('%cСтильный текст', 'font-family: Arial; font-size: 20px; font-weight: bold; text-shadow: 1px 1px 2px black');

// Градиенты и продвинутые эффекты
console.log('%cРадужный текст', 'background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); color: white; padding: 5px');

// Комбинирование разных стилей в одном сообщении
console.log('%cУспех: %cОперация выполнена', 'color: green; font-weight: bold', 'color: black; font-style: italic');

// Определение констант со стилями
const styles = {
success: 'color: green; background: lightgreen; padding: 2px 4px; border-radius: 2px',
error: 'color: white; background: red; padding: 2px 4px; border-radius: 2px',
warning: 'color: black; background: yellow; padding: 2px 4px; border-radius: 2px',
info: 'color: white; background: blue; padding: 2px 4px; border-radius: 2px'
};

// Использование стилей
console.log('%cУспех!', styles.success);
console.log('%cОшибка!', styles.error);
console.log('%cПредупреждение!', styles.warning);
console.log('%cИнформация', styles.info);

function logSuccess(message) {
console.log(`%c✓ Успех: %c${message}`, 'color: green; font-weight: bold', 'color: black');
}

function logError(message) {
console.log(`%c✗ Ошибка: %c${message}`, 'color: red; font-weight: bold', 'color: black');
}

// Использование
logSuccess('Данные сохранены');
logError('Не удалось загрузить файл');

// Базовая группировка с цветным заголовком
console.log('%cПроцесс авторизации', 'color: blue; font-weight: bold');
console.group();
console.log('1. Проверка учетных данных');
console.log('2. Генерация токена');
console.log('3. Сохранение в localStorage');
console.groupEnd();

// Вложенные группы с разными цветами
console.log('%cЗагрузка приложения', 'color: purple; font-size: 16px; font-weight: bold');
console.groupCollapsed('%cИнициализация компонентов', 'color: green');
console.log('Загрузка настроек...');
console.log('Инициализация роутера...');
console.groupCollapsed('%cЗагрузка пользовательских данных', 'color: orange');
console.log('Запрос к API...');
console.log('Обработка ответа...');
console.groupEnd();
console.log('Компоненты загружены');
console.groupEnd();
console.log('%cПриложение готово!', 'color: green; font-weight: bold');

console.groupCollapsed('%cАсинхронная операция #1254', 'background: #333; color: #fff; padding: 2px 5px');
console.log('%cНачало: %c' + new Date().toISOString(), 'font-weight: bold', 'font-weight: normal');

// Имитация асинхронной операции
setTimeout(() => {
console.log('%cПромежуточное состояние: %cобработка данных', 'color: orange; font-weight: bold', 'color: black');

setTimeout(() => {
console.log('%cЗавершено: %c' + new Date().toISOString(), 'color: green; font-weight: bold', 'color: black');
console.groupEnd();
}, 1000);
}, 1000);

function createLogger(moduleName, color) {
return {
start: (message) => {
console.groupCollapsed(`%c${moduleName}%c ${message}`, `background: ${color}; color: white; padding: 2px 5px; border-radius: 3px`, 'color: black');
},
log: (message) => console.log(message),
success: (message) => console.log(`%c✓ %c${message}`, 'color: green; font-weight: bold', 'color: black'),
warn: (message) => console.log(`%c⚠ %c${message}`, 'color: orange; font-weight: bold', 'color: black'),
error: (message) => console.log(`%c✗ %c${message}`, 'color: red; font-weight: bold', 'color: black'),
end: () => console.groupEnd()
};
}

// Использование
const authLogger = createLogger('Авторизация', '#007bff');
const dataLogger = createLogger('Данные', '#28a745');

authLogger.start('Начало процесса входа');
authLogger.log('Проверка учетных данных...');
authLogger.success('Аутентификация успешна');
authLogger.end();

dataLogger.start('Загрузка данных пользователя');
dataLogger.warn('Используется кешированная версия');
dataLogger.log('Применение данных к интерфейсу...');
dataLogger.end();

// Простой массив объектов
const users = [
{ id: 1, name: 'Анна', role: 'admin', status: 'active' },
{ id: 2, name: 'Борис', role: 'editor', status: 'inactive' },
{ id: 3, name: 'Виктория', role: 'user', status: 'active' }
];

// Вывод всего массива в виде таблицы
console.table(users);

// Вывод только определенных столбцов
console.table(users, ['name', 'role']);

// Цветной заголовок перед таблицей
console.log('%cДанные пользователей', 'color: white; background: #4CAF50; padding: 5px; border-radius: 5px 5px 0 0');
console.table(users);

// Обрамление для таблицы
console.log('%c ', 'background: #4CAF50; padding: 2px; border-radius: 0 0 5px 5px');

// Добавление визуальных индикаторов к данным
const enhancedUsers = users.map(user => ({
id: user.id,
name: user.name,
role: user.role === 'admin' ? '👑 admin' : user.role,
status: user.status === 'active' ? '✅ active' : '❌ inactive'
}));

console.log('%cПользователи с индикаторами', 'color: white; background: #2196F3; padding: 5px; border-radius: 5px 5px 0 0');
console.table(enhancedUsers);
console.log('%c ', 'background: #2196F3; padding: 2px; border-radius: 0 0 5px 5px');

const departments = {
engineering: [
{ id: 1, name: 'Алексей', level: 'senior', salary: 150000 },
{ id: 2, name: 'Мария', level: 'middle', salary: 120000 }
],
marketing: [
{ id: 3, name: 'Дмитрий', level: 'senior', salary: 140000 },
{ id: 4, name: 'Светлана', level: 'junior', salary: 90000 }
]
};

// Вывод таблиц по группам
Object.entries(departments).forEach(([deptName, staff]) => {
console.log(`%c${deptName.toUpperCase()}`, 'color: white; background: #673AB7; padding: 5px; border-radius: 5px 5px 0 0');
console.table(staff);
console.log('%c ', 'background: #673AB7; padding: 2px; border-radius: 0 0 5px 5px');
});

function logStateChange(prevState, newState, label = 'Изменение состояния') {
console.log(`%c${label}`, 'color: white; background: #9C27B0; padding: 5px; border-radius: 5px 5px 0 0');
console.group('Предыдущее состояние:');
console.table(prevState);
console.groupEnd();
console.group('Новое состояние:');
console.table(newState);
console.groupEnd();
console.log('%c ', 'background: #9C27B0; padding: 2px; border-radius: 0 0 5px 5px');
}

// Пример использования
const prevState = { count: 5, loading: true, error: null };
const newState = { count: 10, loading: false, error: null };
logStateChange(prevState, newState, 'Состояние счетчика');

class LifecycleLogger extends React.Component {
componentStyle = 'color: white; background: #61dafb; padding: 2px 4px; border-radius: 2px';

componentDidMount() {
console.log(`%c${this.props.name || 'Component'}%c didMount`, this.componentStyle, 'color: green');
}

componentDidUpdate(prevProps, prevState) {
console.group(`%c${this.props.name || 'Component'}%c didUpdate`, this.componentStyle, 'color: orange');
console.log('Previous props:', prevProps);
console.log('Current props:', this.props);
console.groupEnd();
}

componentWillUnmount() {
console.log(`%c${this.props.name || 'Component'}%c willUnmount`, this.componentStyle, 'color: red');
}
}

function logApiRequest(url, method, data) {
console.groupCollapsed(`%cAPI ${method}%c ${url}`, 'background: #0057ff; color: white; padding: 2px 6px; border-radius: 3px', 'color: #0057ff');
console.log('Time:', new Date().toISOString());
if (data) {
console.log('Request data:', data);
}
console.groupEnd();

return fetch(url, {
method,
body: data ? JSON.stringify(data) : undefined,
headers: {
'Content-Type': 'application/json'
}
})
.then(response => response.json())
.then(result => {
console.groupCollapsed(`%cAPI Response%c ${url}`, 'background: #4caf50; color: white; padding: 2px 6px; border-radius: 3px', 'color: #4caf50');
console.log('Status: Success');
console.log('Data:', result);
console.groupEnd();
return result;
})
.catch(error => {
console.groupCollapsed(`%cAPI Error%c ${url}`, 'background: #f44336; color: white; padding: 2px 6px; border-radius: 3px', 'color: #f44336');
console.log('Status: Failed');
console.error('Error:', error);
console.groupEnd();
throw error;
});
}

// Использование
logApiRequest('https://api.example.com/users', 'GET');
logApiRequest('https://api.example.com/posts', 'POST', { title: 'Новый пост', content: 'Содержание поста' });

function measurePerformance(label, callback) {
console.log(`%c⏱ Начало измерения: %c${label}`, 'color: #2196F3; font-weight: bold', 'color: black');
const startTime = performance.now();

try {
const result = callback();
const endTime = performance.now();
const duration = endTime – startTime;

let color = '#4CAF50'; // зеленый для быстрых операций
if (duration > 100) color = '#FF9800'; // оранжевый для средних
if (duration > 1000) color = '#F44336'; // красный для медленных

console.log(`%c⏱ Окончание: %c${label} %c- ${duration.toFixed(2)}ms`, 
'color: #2196F3; font-weight: bold', 
'color: black', 
`color: ${color}; font-weight: bold`);

return result;
} catch (error) {
console.log(`%c⏱ Ошибка в: %c${label}`, 'color: #2196F3; font-weight: bold', 'color: red');
console.error(error);
throw error;
}
}

// Примеры использования
measurePerformance('Сортировка массива', () => {
const arr = Array.from({length: 10000}, () => Math.random());
return arr.sort();
});

measurePerformance('Обработка данных', () => {
// Имитация тяжелой операции
let result = 0;
for (let i = 0; i < 1000000; i++) {
result += Math.sqrt(i);
}
return result;
});

function setupEventLogging() {
const eventColors = {
click: '#4CAF50',
mouseover: '#2196F3',
keydown: '#9C27B0',
submit: '#FF9800',
change: '#607D8B'
};

const logEvent = (e) => {
const color = eventColors[e.type] || '#333333';
const targetInfo = e.target.id ? `#${e.target.id}` : (e.target.className ? `.${e.target.className.split(' ')[0]}` : e.target.tagName.toLowerCase());

console.log(
`%c${e.type}%c ${targetInfo}`,
`background: ${color}; color: white; padding: 2px 4px; border-radius: 2px`,
'color: black'
);

if (e.type === 'submit') {
console.group('Form data:');
const formData = new FormData(e.target);
for (let [key, value] of formData.entries()) {
console.log(`${key}: ${value}`);
}
console.groupEnd();
}
};

// Регистрация обработчиков событий
document.addEventListener('click', logEvent);
document.addEventListener('mouseover', logEvent);
document.addEventListener('keydown', logEvent);
document.addEventListener('submit', logEvent);
document.addEventListener('change', logEvent);
}

// Вызов функции инициализации
setupEventLogging();

const Logger = (() => {
const LogLevel = {
DEBUG: 0,
INFO: 1,
WARN: 2,
ERROR: 3,
FATAL: 4
};

let currentLevel = LogLevel.INFO; // По умолчанию уровень INFO

const styles = {
[LogLevel.DEBUG]: 'color: #7f8c8d', // серый
[LogLevel.INFO]: 'color: #2980b9', // синий
[LogLevel.WARN]: 'color: #f39c12', // желтый
[LogLevel.ERROR]: 'color: #c0392b', // красный
[LogLevel.FATAL]: 'background: #c0392b; color: white; padding: 2px; font-weight: bold' // ярко-красный
};

const levelNames = {
[LogLevel.DEBUG]: 'DEBUG',
[LogLevel.INFO]: 'INFO',
[LogLevel.WARN]: 'WARN',
[LogLevel.ERROR]: 'ERROR',
[LogLevel.FATAL]: 'FATAL'
};

function log(level, message, ...args) {
if (level >= currentLevel) {
const timestamp = new Date().toISOString();
console.log(
`%c[${levelNames[level]}]%c ${timestamp} -`,
styles[level],
'color: inherit',
message,
...args
);
}
}

return {
LogLevel,
setLevel: (level) => { currentLevel = level; },
debug: (message, ...args) => log(LogLevel.DEBUG, message, ...args),
info: (message, ...args) => log(LogLevel.INFO, message, ...args),
warn: (message, ...args) => log(LogLevel.WARN, message, ...args),
error: (message, ...args) => log(LogLevel.ERROR, message, ...args),
fatal: (message, ...args) => log(LogLevel.FATAL, message, ...args)
};
})();

// Использование
Logger.debug('Детальная информация для отладки');
Logger.info('Компонент инициализирован');
Logger.warn('Устаревший метод, будет удален в следующей версии');
Logger.error('Не удалось загрузить модуль', { module: 'auth', reason: 'network error' });
Logger.fatal('Критическая ошибка, приложение может работать некорректно');