Сохранение структуры объекта из console.log в файл: решения

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Начнём с использования Node.js:

JS
Скопировать код
const fs = require('fs');
const logToFile = msg => fs.appendFileSync('output.log', `${msg}\n`);
console.log = logToFile;

console.log('Сохранено в файл.');  // Данный вызов добавит строку в 'output.log'

Метод fs.appendFileSync в Node.js позволяет прямо сохранить данные, минуя процесс работы с потоками.

Кинга Идем в IT: пошаговый план для смены профессии

Разбираемся с более сложными способами в браузере

После основ, переходим к браузерным платформам. Сохраним структурированные логи для анализа. Рассмотрим более сложные методы:

Создание метода Console.save

console.save по умолчанию отсутствует, но мы можем его добавить:

JS
Скопировать код
(function(console){
  console.save = function(data, filename){
    if(!data) {
      console.error('Console.save: данные отсутствуют');
      return;
    }

    if(!filename) filename = 'console.json';

    if(typeof data === "object"){
      data = JSON.stringify(data, undefined, 4)
    }

    var blob = new Blob([data], {type: 'text/json'}),
        e    = document.createEvent('MouseEvents'),
        a    = document.createElement('a');

    a.download = filename;
    a.href = window.URL.createObjectURL(blob);
    a.dataset.downloadurl =  ['text/json', a.download, a.href].join(':');
    e.initMouseEvent('click', true, false, view,
                     0, 0, 0, 0, 0, false, false, false, false, 0, null);
    a.dispatchEvent(e);
  }
})(console);

console.save использует Blob и объекты DOM для получения структурированных данных.

Плагины для непрерывного логирования

Непрерывное логирование обеспечивает debugout.js. Этот плагин сохраняет логи и вложенные объекты целиком, при этом добавляя временные метки.

JS
Скопировать код
let debugout = new debugout();
console.log = debugout.log;
// Затем...
debugout.writeLogFile(); // Мы сохраняем логи скрытно

Обработка сложных объектов

Если JSON.stringify не справляется с функциями, символами или циклическими ссылками, на помощь приходят заменители или библиотеки вроде JSON.stringify-anything.

Копирование объектов из консоли

В Chrome можно быстро скопировать данные:

  • Кликните правой кнопкой мыши по объекту в консоли.
  • Выберите "Копировать объект".
  • Вставьте в текстовый редактор.

Визуализация

Визуализируем соотношение действий и кода:

Markdown
Скопировать код
"Произносить"         -> [🗣 (console.log)] -> 📢  "Видим результат на экране"
"Писать пером" -> [✍️ (fs.writeFile)]  -> 📖  "Текст сохраняется в файле"

Аналогия с кодом:

JS
Скопировать код
console.log = function(data) {
  fs.appendFileSync('log.txt', data + '\n');
};

Ваш код произносится 🗣 и его слова записываются в файле 📖.

Логирование: не только простой текст

Фиксирование текста с форматированием, специальными символами и цветовой разметкой.

Улучшение вывода в консоли

Добавьте CSS для визуального улучшения логов:

JS
Скопировать код
console.log('%cПривет, вы прекрасны', 'font-style: italic; color: pink;');

Использование символов и emoji

Ключ к использованию специальных символов – правильная кодировка:

JS
Скопировать код
fs.writeFileSync('emoji.txt', '🦄 Волшебство единорогов! 🌈 ', 'utf8');

Усовершенствованные логи

Используйте теги для категоризации логов:

JS
Скопировать код
console.log('[ИНФО] Запись для последующего анализа');
console.log('[ВНИМАНИЕ] Будьте осторожны!');
console.log('[ОШИБКА] Ошибка произошла.');

Расширение возможностей консоли

Воспользуйтесь console.info, console.warn и console.error для улучшения визуального оттображения и отладки кода.

Полезные материалы

  1. Документация Node.js по файловой системе v21.6.1
  2. MDN: метод console.log()
  3. Настройка Node.js для записи в файл вместо вывода в консоль – Stack Overflow
  4. Чтение и запись JSON-файлов в Node.js
  5. Использование консоли разработчика JavaScript | DigitalOcean
  6. BrowserWindow в Electron
Свежие материалы