Вопрос или проблема
Я работаю над улучшением логирования отладки и заметил, что когда дело доходит до длинных кусков стилизованного текста, консоль склонна добавлять переносы строк. Интересно, могу ли я предотвратить это поведение. Может быть, есть что-то в стилях, что могло бы элегантно это предотвратить?
Вот пример:
const cssHeadField = `border-bottom: 1px solid grey;font-family: 'Courier New',monospace;font-weight: 600;font-size: 1.2em;background-color: Orange; color: black`;
const cssError = `background-color: Red; color: black`;
console.log(`без форматирования вообще %c и теперь заголовок вступает в силу и теперь он останавливается: %c и теперь куча текста без форматирования, оуп! %can error here%c еще немного текста без... %coh, другая ошибка!%c`, cssHeadField, "", cssError, "", cssError, "")
console.log(`без форматирования вообще %c и теперь заголовок вступает в силу и теперь он останавливается: %c и теперь куча текста без форматирования, оуп! %can error here, может быть, более длинное описание ошибки или что-то, что было бы многострочным или что-то в этом роде?%c еще немного текста без... %coh, другая ошибка! Эта тоже должна быть длинной, просто чтобы протестировать%c`, cssHeadField, "", cssError, "", cssError, "");
Ответ или решение
Проблема с добавлением неожиданных переносов строк при использовании стилей %c в консоли JavaScript может возникать из-за специфичного поведения консоли в браузерах. Когда вы пытаетесь вывести длинные строки текста, особенно с различными форматированными частями, некоторые браузеры могут автоматически добавлять переносы строк, чтобы текст не превышал ширину окна консоли.
Вот несколько подходов, которые могут помочь вам избежать этой проблемы:
-
Разделение длинных строк на более короткие части. Одним из прямых решений является разделение длинных строк на несколько более коротких вызовов
console.log(). Например:const cssHeadField = `border-bottom: 1px solid grey;font-family: 'Courier New',monospace;font-weight: 600;font-size: 1.2em;background-color: Orange; color: black`; const cssError = `background-color: Red; color: black`; console.log(`no formatting at all %c and now head field kicks in and now it stops: %c and now a bunch of text that has no formatting, oop! %c`, cssHeadField, "", cssError); console.log(`an error here, maybe a longer error description too something that would be multiline or something right? %c some more text with no formatting... %c another error!`, "", cssError); -
Использование символа пробела для разбиения строки. Можно добавить пробелы или другие символы между стилями, чтобы принудительно разбить строки в нужных местах:
console.log(`no formatting at all %c and now head field kicks in %c - текст длинный и его лучше разбить %c`, cssHeadField, "", cssError); -
Уменьшение общего количества форматируемого текста. Если возможно, попробуйте сократить текст или убрать ненужные части форматирования. Каждый раз, когда вы добавляете
%c, вы создаете новую часть текста, и слишком много таких фрагментов может вызвать нежелательное поведение:console.log(`%cShorter Text: %cError!`, cssHeadField, cssError); -
Проверка консоли в различных браузерах. Различные браузеры имеют свои собственные реализации консоли и могут по-разному обрабатывать стили. Если вы заметили проблему в одном браузере (например, Chrome), попробуйте протестировать в Firefox или Edge, чтобы увидеть, сохраняется ли она.
При использовании этих методов вы можете добиться более предсказуемого поведения в консольном выводе. Однако, поскольку консоль оставляет некоторые моменты на усмотрение браузера, полного контроля над форматированием вы не сможете достигнуть в 100% случаев.