Прекратите использовать console.log
Прекратите использовать console.log для всего. Я вижу, как многие разработчики регулярно используют console.log метод таким образом, который я считаю неправильным.
Недостатки использование console.log для отладки
Многие разработчики до сих пор используют console.log метод для отладки своего приложения. Например, чтобы убедиться, что код запускается или что переменная имеет правильное значение.
В этом есть несколько недостатков.
Вы не можете отследить жизненный цикл вашего приложения, лишь отслеживаете значение переменной в данный момент времени.
Часто случается так, что console.log забываются в нескольких местах кода, что кроме гипотетической потери производительности (мизерной, но размер которой варьируется в зависимости от объема данных, вызываемых через метод console.log) загрязняя ваш код.
Решение состоит в том, чтобы использовать инструменты отладки, предоставляемые вашим браузером. Это может потребовать некоторого обучения, но вознаграждение перевешивает усилия.
【JavaScript】console log;の使い方を一番わかりやすくカンタン解説
Таким образом, вы будете иметь полный контроль над жизненным циклом вашего кода и не забудете свой console.log в своем коде.
Использование только метода console.log
Многие разработчики используют console.log для вывода любых видов сообщений: информации, ошибок, предупреждений и т. д.
Объект console, предоставляет доступ к отладочной консоли браузера и имеет множество методов с очень специфическими применениями.
Вот исчерпывающий список наиболее часто используемых методов:
console.error → Выводит сообщение об ошибке
console.warn → Выводит предупреждающее сообщение
console.info → Выводит информативное сообщение (особый рендеринг в Firefox, но технически идентичен console.log)
console.log → Выводит глобальное сообщение
console.debug → Выводит сообщение, если консоль настроена на показ сообщений уровня отладки
console.table → Выводит данные массива/объекта в виде таблицы
console.time (в связке с console.timeEnd) → Позволяет установить таймер, чтобы увидеть, как долго задача должна быть выполнена
Конкретный пример использования console.debug метода
Лично я использую debug метод в трех ситуациях.
В первом случае мы хотим быстро отобразить часть информации на экране (например, значение переменной). Данное сообщение по умолчанию будет «скрытым» для пользователя (за исключением случаев, когда консоль настроена в специальном режиме).
Во втором случае мы хотим использовать метод в качестве привязки к нашему исходному файлу (мы также можем использовать возможности отладчика, но лично я предпочитаю этого не делать).
В третьем случае мы хотим использовать отладку в работающем приложении. Например, функция, зарегистрированная непосредственно в объекте window, может инициировать вывод в пользовательскую консоль. Этот вариант может быть полезен, когда в нашем распоряжении нет среды для тестирования и когда ошибку, обнаруженную клиентом, трудно воспроизвести в среде разработки.
console.logって何？JavaScriptの実行結果を確認するときに、よく使うコンソールログについての解説しています
Удалить console.debug из рабочей версии
За исключением третьего случая, который мы только что рассмотрели, я советую вам использовать что-то вроде git pre-commit хука или плагина для проверки методов или ключевых слов, которые вы не хотите видеть в рабочей версии приложения.
Вы можете использовать UglifyJS для фильтрации по этим ключевым словам.
Спасибо, за внимание .
Текст переведен с английского: оригинал
Источник: habr.com
Как использовать консоль браузера для выявления ошибок на сайте
Каждый браузер оснащен консольной панелью, с помощью которой разработчики проводят тестирование веб-сайта. Вкладка Elements содержит всю информацию об инспектируемом HTML-файле: теги, таблицы стилей и т.д. Но в консоли есть и другие разделы, такие как Console, Sources, Network и прочие.
Для каких целей они используются и как можно выявить ошибки через консоль – поговорим в сегодняшней статье.
Как открыть консоль на разных браузерах
Алгоритм запуска консоли (инспектора) во всех браузерах идентичен. Есть два пути: первый – запуск через специальную клавишу на клавиатуре, второй – через функцию «Посмотреть код страницы/элемента».
Например, если воспользоваться в Chrome клавишей F12, то откроется дополнительное окно с консолью.
Второй путь заключается в просмотре кода текущей страницы – для этого необходимо кликнуть правой кнопкой мыши по любому элементу сайта и в отобразившемся меню выбрать опцию «Посмотреть код». Обратите внимание, что это название опции в Google Chrome, в других браузерах оно может отличаться. Например, в Яндексе функция называется «Исследовать элемент».
В результате перед нами снова отобразится окно, в котором будет открыта главная вкладка с кодом страницы. Подробнее о ней мы еще поговорим, а пока давайте посмотрим, как выполняется запуск консоли в браузере Safari на устройствах Mac.
Первым делом нам потребуется включить меню разработчика – для этого переходим в раздел «Настройки» и открываем подраздел «Продвинутые». Находим пункт «Показать меню «Разработка в строке меню» и отмечаем его галочкой.
Теперь можно запустить консольное окно – достаточно воспользоваться комбинацией клавиш «Cmd+Opt+C».
Как видите, запустить консоль в браузере – дело нескольких секунд. Опция полезна, когда вы верстаете новый сайт, исправляете ошибки, проводите различные тесты.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Какие вкладки есть в консоли и за что они отвечают
Консоль каждого браузера содержит практически идентичные вкладки с одним и тем же функционалом, поэтому рассмотрим каждый из блоков на примере веб-обозревателя Google Chrome.
Перед тем как перейти к разбору каждой вкладки, давайте рассмотрим основное элементы, которые могут быть полезны при работе с консолью. Первый – это включение адаптивного режима. Для этого необходимо открыть консоль и в верхнем левом углу нажать на кнопку в виде телефона/планшета.
В результате левая часть окна будет немного изменена: добавятся кнопки для выбора разрешения под нужный девайс. Например, выберем устройство iPhone X, и сайт сразу же будет выглядеть так, как он выглядел бы на телефоне.
Если выбрать опцию «Responsive», то слева от страницы отобразится дополнительная линия, которую мы можем тянуть влево или вправо – с помощью нее можно подобрать необходимое разрешение страницы. Также настроить разрешение мы можем и в верхней части окна.
И еще одна опция, которая может быть полезна – изменение расположения консольной панели. Чтобы ей воспользоваться, необходимо в верхней правой части нажать на кнопку в виде троеточия и в строке «Dock side» изменить ориентацию. Доступные положения: справа, слева, снизу, в отдельном окне.
На этом стандартный набор функций консольной панели заканчивается. Давайте посмотрим, какие в ней есть вкладки и за что они отвечают.
Elements
Основной компонент для верстальщиков. Он включает в себя всю информацию об открытой HTML-странице. Здесь мы можем не только посмотреть текущие теги и атрибуты, но и изменить их – в таком случае произойдет автоматическое изменение дизайна на странице. Если ее обновить, все вернется на свои места. Также открыт доступ к просмотру CSS и прочих элементов – для этого в правой части раздела идут вкладки Styles, Computed, Layout, Event Listeners, DOM Breakpoints, Properties и Accessibility.
Console
Еще одна важнейшая вкладка для верстальщиков – это Console. В ней мы можем узнать информацию о текущих ошибках на сайте, посмотреть исполняемый JavaScript-код, если он выведен в консоль с помощью метода console.log, и многое другое.
Если вам нужно очистить информацию, выведенную в консоль, то сделать это легко. Достаточно в верхнем левом углу нажать на кнопку в виде знака запрета.
Также в данной консоли мы можем посмотреть информацию об ошибках плагина, воспользоваться поиском по слову или фразе, а также установить различные фильтры на отображаемую информацию.
Sources
Данный раздел открывает доступ ко всей иерархии сайта: здесь мы можем посмотреть, какие используются картинки, CSS-файлы, шрифты и прочее.
Сама вкладка, как видите, разделена на 3 части. В первой содержится дерево иерархии файлов, относящихся к сайту. Вторая предназначена для просмотра содержимого этих файлов и выполнения их отладки. Для ее запуска необходимо воспользоваться последним окном.
Network
Из названия уже понятно, что данный раздел предназначен для отслеживания сетевого трафика. Его основная функция – запись сетевого журнала. Можно выявить время загрузки и обработки различных файлов, чтобы впоследствии оптимизировать страницу.
Performance
Панель отображает таймлайн использования сети, выполнения JavaScript-кода и загрузки памяти. После первоначального построения графиков будут доступны подробные данные о выполнении кода и всем жизненном цикле страницы.
Memory
В этой вкладке можно отслеживать использование памяти веб-приложением или страницей. Мы можем узнать, где тратится много ресурсов – эту информацию в последующем можно использовать для оптимизации кода.
Application
Данный раздел позволяет инспектировать и очищать все загруженные ресурсы. Мы можем взаимодействовать с HTML5 Database, Local Storage, Cookies, AppCache и другими элементами.
Основная особенность опции – чистка куки. Если вам необходимо выполнить эту процедуру, то просто откройте в левой части раздел «Cookies» и нажмите справа на значок запрета. Куки для выбранной ссылки будут очищены.
Security
Раздел Security отображает информацию о безопасном протоколе. Если его нет, то будет сообщено, что данная страница является небезопасной. Кроме того, можно получить еще некоторые сведения о:
- проверке сертификата – подтвердил ли сайт свою подлинность TLS;
- tls-соединении – использует ли сайт современные безопасные протоколы;
- безопасности второстепенных источников.
Lighthouse
Последний раздел представляет собой инструмент аудита с открытым исходным кодом. Благодаря ему разработчики могут повысить производительность и доступность своих веб-сайтов.
Выявление основных ошибок
При возникновении возможных ошибок мы сразу будем об этом уведомлены во вкладке Console – в ней отобразится информация с красной строкой текста. Рассмотрим самые распространенные ошибки, которые могут возникать в Google Chrome, Safari и Internet Explorer:
- Uncaught TypeError: Cannot read property. Ошибка возникает в Хроме при вызове метода или чтении свойства для неопределенного объекта.
- TypeError: ‘undefined’ is not an object (evaluating). Аналогична предыдущей ошибке, но только в Safari.
- TypeError: null is not an object (evaluating). Возникает в Сафари при вызове метода или чтении свойства для нулевого объекта.
- (unknown):Scripterror. Обозначает ошибку скрипта.
- TypeError: Object doesn’t support property. Встречается в Internet Explorer – возникает при вызове определенного метода.
- TypeError: ‘undefined’ is not a function. Указывает на неопределенную функцию (в Chrome).
- Uncaught RangeError: Maximum call stack. Ошибка в Chrome, означающая превышение максимального размера стека.
- TypeError: Cannot read property ‘length’. Невозможно прочитать свойство.
- Uncaught TypeError: Cannot set property. Возникает, когда скрипт не может получить доступ к неопределенной переменной.
- ReferenceError: event is not defined. Обозначает невозможность получения доступа к переменной, не входящей в текущую область.
Устранение основных и прочих ошибок может быть проблематично. Если вы считаете, что они сильно мешают производительности вашего сайта, то рекомендуем поискать информацию о них в официальной документации браузера либо на тематических форумах.
Заключение
Иногда консоль пригождается не только верстальщикам – она бывает полезна для самых простых действий. Например, чтобы посмотреть мобильную версию, скачать картинку либо узнать используемый шрифт на сайте. В общем, применять консольное окно можно в различных ситуациях – как для просмотра содержимого сайта, так и для анализа потребления памяти.
Изучайте и находите свои применения этому инструменту – он может многое. Удачи!
Источник: timeweb.com
Log console что это за программа
Как мы видим, объект консоли может предложить гораздо больше, чем старая добрая функция console.log().
Правда в том, что, вероятно, есть лучший способ логировать необходимое. Все, что для этого нужно – знать альтернативные варианты и привыкнуть к ним.
В этой статье будут представлены некоторые из наиболее полезных функций объекта console, изучив которые, вы можете сами решить, должен ли console.log() оставаться вашим единственным вариантом для отладки печати.
Давайте создадим тестовый объект для использования в качестве примера:
Вот как это выглядит, когда вызывается console.log() с нашим объектом:
console.dir()
В то время как console.log() выводит объект в строковом представлении, console.dir() распознает его как объект и печатает свойства в виде расширяемого списка:
console.assert()
С помощью console.assert() мы можем решить регистрировать что-либо только в том случае, если условие false , и сэкономить место в консоли, избегая ненужного вывода сообщений:
console.count()
Вместо того, чтобы увеличивать счетчик вручную, можно использовать console.count(), чтобы он выполнил все за нас. Можно снабдить его меткой ( Pet , например), и значение счетчика будет увеличиваться каждый раз, когда вызывается console.count(“ Pet ”) :
console.table()
Используйте console.table() для вывода визуально красивого табличного представления объекта с помеченными строками для каждого свойства:
console.time() / timeLog() / timeEnd()
Очень популярная штука. Используйте console.time() для запуска таймера. Затем при каждом вызове console.time L og () будет выводиться время, прошедшее с момента его запуска.
Когда все закончится, вызовите console.timeEnd(), чтобы вывести общее количество времени:
console.trace()
При отладке глубоко вложенных объектов или функций может потребоваться распечатать трассировку стека кода. Вызовите console.trace() из нужной функции в верхней части стека вызовов, чтобы увидеть место в коде, где был совершен вызов:
console.group() / groupEnd()
Можно группировать сообщения, чтобы избежать беспорядка в консоли, например:
Дополнительный совет:
Используйте console.groupCollapsed() вместо console.group(), и группа будет свернута по умолчанию – это значительно облегчит работу.
CSS-стиль консоли
Если хотите разнообразить визуальные возможности ведения журнала, используйте %c перед строкой и передайте стили CSS в качестве второго аргумента:
Теперь вы можете использовать консоль для рисования практически чего угодно!
Заключение
Иногда мы не осознаем, что можем немного облегчить жизнь разработчика, просто интегрировав новые возможности и привычки, например, like a pro в использовании консоли.
Надеемся, что вы извлечете полезную информацию из этого материала. Удачи в дебаге!
Дополнительные материалы:
- Разработка под Андроид: советы, инструменты и трюки
- Python + Visual Studio Code = успешная разработка
- Разработка игр Unreal Engine 4: 10 советов начинающим
- Что такое IoT-разработка и с чем ее едят?
- 6 лучших книг по разработке: управление и гибкая разработка
Источники
Источник: proglib.io
Полезные советы по использованию console.log()
Использование console.log(message) просто: аргумент message выводится в консоль.
JavaScript
console . log ( ‘My message’ ) ;
// logs «My message»
const myVar = 12 ;
console . log ( myVar ) ;
1. Именование зарегистрированных переменных
При логгинге многих переменных иногда трудно понять, какая переменная соответствует логу в консоли. Например, давайте выведем некоторые переменные:
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
JavaScript
function sum ( a , b ) <
console . log ( b ) ; return a + b ;
Когда приведенный выше код будет выполнен, вы увидите только последовательность чисел:
Чтобы указать связь между зарегистрированным значением и переменной, оберните переменную в пару фигурных скобок < b >:
JavaScript
function sum ( a , b ) <
console . log ( < b >) ; return a + b ;
Теперь, глядя на консоль, вы можете видеть, что выводится именно переменная b:
2. Расширенное форматирование
Самый распространенный способ вывести что-то в консоль — просто вызвать console.log() с одним аргументом:
JavaScript
console . log ( ‘My message’ ) ;
// logs «My message»
Иногда вам может понадобиться сообщение, содержащее несколько переменных. К счастью, console.log() может форматировать строку способом sprintf(), используя спецификаторы, такие как %s, %i и т. д. Например, давайте отформатируем сообщение, содержащее строку и целое число:
JavaScript
const user = ‘john_smith’ ;
const attempts = 5 ;
console . log ( ‘%s failed to login %i times’ , user , attempts ) ;
// logs «john_smith failed to login 5 times»
%s и %i заменяются значениями user и attempts. Спецификатор %s конвертируется в строку, а %i конвертируется в число. Вот список доступных спецификаторов:
%s — Элемент преобразуется в строку
%d или же %i — Элемент преобразуется в целое число
%f — Элемент преобразуется в число с плавающей запятой
%o — Элемент отображается с оптимально полезным форматированием
%O — Элемент отображается с общим форматированием объекта JavaScript
%c — Применяет предоставленный CSS
3. Вывод со стилем
Консоль браузера позволяет применять стили к выводимому сообщению. Вы можете сделать это, используя спецификатор %c с соответствующими стилями CSS. Например, давайте выведем сообщение с увеличенным размером шрифта и толщиной шрифта:
Источник: webformyself.com