Почему не работает console log
Перейти к содержимому

Почему не работает console log

  • автор:

Не работает console log

введите сюда описание изображения

В firefox после сегодняшнего обновления у меня перестал работать console.log(); что делать?

Отслеживать
viiprogrammer
задан 20 дек 2015 в 15:14
viiprogrammer viiprogrammer
1,183 9 9 серебряных знаков 28 28 бронзовых знаков

Всё там работает. возможно вы что-то не так делаете. что-нибудь не так с экранированием в коде к примеру и т.д. ошибку выдает? нет? что получается? что делаете?

20 дек 2015 в 15:19

да там даже console.log(‘123’); не работает , может это только у меня. ошибки вы выдаёт пишет тк «undefined»

20 дек 2015 в 15:32
добавьте скриншот того как «не работает»
20 дек 2015 в 15:36
все я добавил тк толку
21 дек 2015 в 19:35

Судя по скриншоту отключен журнал. Нужно нажать CTRL+SHIFT+K. Откроется консоль. В нижнем ряду будут кнопки «Сеть» «CSS» «JS» «Защита» «Журнал». Включите журнал и все заработает.

25 апр 2016 в 21:27

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

введите сюда описание изображения

Что есть сам объект console у Вас? Должен быть такой:

Проверьте, не переопределил ли его какой-либо скрипт.

Отслеживать
ответ дан 22 дек 2015 в 7:48
Кир Трибунский Кир Трибунский
56 4 4 бронзовых знака

Что значит «не работает»? Где не работает? Проверьте подключенные на странице скрипты: переменную console можно переопределить, изменив таким образом стандартное поведение. Это можно сделать нечайно (например, в случае ошибки = вместо == или === ).

Отслеживать
ответ дан 20 дек 2015 в 18:06
486 3 3 серебряных знака 10 10 бронзовых знаков
не работает на любом сайте
21 дек 2015 в 19:32
Смотрите в набор плагинов. Отрубите все для начала
21 дек 2015 в 20:14
Отключил весь js на странице и нечего
22 дек 2015 в 4:38

  • javascript
  • firefox
    Важное на Мете
Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.2.14.4854

Прекратите использовать console.log

Прекратите использовать console.log для всего. Я вижу, как многие разработчики регулярно используют console.log метод таким образом, который я считаю неправильным.

Недостатки использование console.log для отладки

Многие разработчики до сих пор используют console.log метод для отладки своего приложения. Например, чтобы убедиться, что код запускается или что переменная имеет правильное значение.

В этом есть несколько недостатков.

Вы не можете отследить жизненный цикл вашего приложения, лишь отслеживаете значение переменной в данный момент времени.

Часто случается так, что console.log забываются в нескольких местах кода, что кроме гипотетической потери производительности (мизерной, но размер которой варьируется в зависимости от объема данных, вызываемых через метод 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.debug из рабочей версии

За исключением третьего случая, который мы только что рассмотрели, я советую вам использовать что-то вроде git pre-commit хука или плагина для проверки методов или ключевых слов, которые вы не хотите видеть в рабочей версии приложения.

Вы можете использовать UglifyJS для фильтрации по этим ключевым словам.

Спасибо, за внимание ��.

Текст переведен с английского: оригинал

Почему не выводится console.log?

62d92c0624022191239156.png

Начал изучать js, но когда все выводят в консоль с помощью console.log, то у меня почему то не выводится, еще показывает что вроде что то есть, но скрыто, написано hidden

  • Вопрос задан более года назад
  • 279 просмотров

Комментировать

Решения вопроса 1

Алексей Уколов @alexey-m-ukolov Куратор тега JavaScript

У вас в фильтре указано «none» — все сообщения, которые не содержат эту подстроку, скрываются.

Ответ написан более года назад

Нравится 4 1 комментарий

member54 @member54 Автор вопроса

Ответы на вопрос 0

Ваш ответ на вопрос

Войдите, чтобы написать ответ

javascript

  • JavaScript

Почему запрос берет url с http js?

  • 1 подписчик
  • 6 часов назад
  • 33 просмотра

javascript

  • JavaScript
  • +1 ещё

Не работает фильтер js?

  • 1 подписчик
  • 7 часов назад
  • 45 просмотров

console . log ( )

console . log ( ) — это метод, предназначенный для печати в консоль браузера.

При написании скриптов иногда нужно увидеть промежуточный результат прямо в консоли браузера — это просто, удобно и не требует никакой дополнительной логики для отображения.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Вызов console . log ( ) выведет в консоль все переданные аргументы:

 console.log('hello')// 'hello'console.log(true, < a: true >, 100)// true 100 console.log('hello') // 'hello' console.log(true,  a: true >, 100) // true 100      

Как понять

Скопировать ссылку «Как понять» Скопировано

⚡️ В момент разработки все действия кажутся долгими, поэтому можно воспользоваться молниеносным выводом в консоль.

Почему консоль разработчика, а не alert ( ) ?

Откройте консоль и выполните:

 const a = alert(a) const a =  id: 1, value: 'one text' > alert(a)      

Вывод при таком подходе не отражает содержимого объекта а — мы увидим только надпись «[object Object]». Помимо этого приходится каждый раз закрывать диалоговое окно, что раздражает.

Другое дело если совершать эти действия в консоли:

 const a = console.log(a)// Object const a =  id: 1, value: 'one text' > console.log(a) // Object     

Результат представлен в виде дерева, которое удобно раскрывается — видны все параметры.

Если хочется вывести отладочное сообщение на страницу, то придётся воспользоваться или alert ( ) или создавать отладочный HTML-блок div или textarea , чтобы записать туда свои вычисления с помощью записи в свойство inner Text . Перед этим не забудьте привести объект в строку с помощью JSON . stringify ( ) — проще будет читать.

Особенность работы в браузере

Скопировать ссылку «Особенность работы в браузере» Скопировано

В браузере с помощью console . log ( ) можно проверить мутацию ссылочного типа. Этого можно добиться, раскрыв выведенное значение в консоли. Всё что нам нужно сделать — нажать на иконку с перевёрнутым треугольником (►).

В качестве примера создадим массив с героями диснеевских мультфильмов. Изначально в нем будет располагаться только Микки Маус, а после вызова console . log ( ) , добавим и Плуто.

 const disneyCharacters = [< name: 'Mickey Mouse', type: 'mouse' >]console.log(disneyCharacters)disneyCharacters.push() const disneyCharacters = [ name: 'Mickey Mouse', type: 'mouse' >] console.log(disneyCharacters) disneyCharacters.push(name: 'Pluto', type: 'dog' >)      

Нажмём на иконку с перевёрнутым треугольником (►) в консоли и увидим результат вывода:

В консоли отображается массив с обоими героями

Причина в том, что значение ссылочного типа читается браузером только при его первом раскрытии. Этот процесс также называют ленивым чтением (lazy-read).

Google Chrome при этом показывает информационную иконку, при наведении на которую отобразится подсказка с текстом: «This value was evaluated upon first expanding. It may have changed since then.»

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

console . log ( ) и console . dir ( )

Скопировать ссылку «console.log() и console.dir()» Скопировано

В пространстве объекта console существуют различные методы. Есть два похожих метода console . log ( ) и console . dir ( ) .

console . log ( ) отражает любой объект в консоли в удобном виде. Если это примитив — то его значением, если объект — его древовидной формой. DOM-элемент — его можно также раскрыть и увидеть, что внутри.

Но console . log ( ) показывает содержимое DOM, а не его свойства. Если нужно увидеть свойства DOM-элемента, то лучше использовать console . dir ( ) :

 const el = document.createElement('div')const el2 = document.createElement('div')el2.appendChild(el)console.log(el)console.dir(el) const el = document.createElement('div') const el2 = document.createElement('div') el2.appendChild(el) console.log(el) console.dir(el)      

️ console . log ( ) удобен для исследования объектов и их вложенных элементов, а console . dir ( ) удобен для просмотра свойств объекта.

Если делать console . log ( ) и console . dir ( ) простого объекта, то разница минимальна:

 const a = console.log(a)console.dir(a) const a =  cat: "miu", dog: "woof" > console.log(a) console.dir(a)      

�� В каждом браузере свой набор инструментов работы с console . Смотрите, поддерживается ли тот или иной метод в вашем браузере в таблице на MDN

Виталий Баев советует

Скопировать ссылку «Виталий Баев советует» Скопировано

�� Часто нам необходимо вывести в консоли содержимое переменных. Например, вывести переменные language и count можно так:

 const language = 'JavaScript'const count = 100 console.log('language:', language, 'count:', count)// language: JavaScript count: 100 const language = 'JavaScript' const count = 100 console.log('language:', language, 'count:', count) // language: JavaScript count: 100      

Но можно сделать проще и быстрее. Сравните:

 const language = 'JavaScript'const count = 100 console.log(< language, count >)// const language = 'JavaScript' const count = 100 console.log( language, count >) //     

�� Если у нас есть массив с каким-то количеством однотипных объектов, то можно воспользоваться console . table ( ) :

 const data = [ < section: 'HTML', count: 212 >, < section: 'CSS', count: 121 >, < section: 'JavaScript', count: 182 >, < section: 'Tools', count: 211 >,] console.table(data);// ┌─────────┬──────────────┬───────┐// │ (index) │ section │ count │// ├─────────┼──────────────┼───────┤// │ 0 │ 'HTML' │ 212 │// │ 1 │ 'CSS' │ 121 │// │ 2 │ 'JavaScript' │ 182 │// │ 3 │ 'Tools' │ 211 │// └─────────┴──────────────┴───────┘ const data = [  section: 'HTML', count: 212 >,  section: 'CSS', count: 121 >,  section: 'JavaScript', count: 182 >,  section: 'Tools', count: 211 >, ] console.table(data); // ┌─────────┬──────────────┬───────┐ // │ (index) │ section │ count │ // ├─────────┼──────────────┼───────┤ // │ 0 │ 'HTML' │ 212 │ // │ 1 │ 'CSS' │ 121 │ // │ 2 │ 'JavaScript' │ 182 │ // │ 3 │ 'Tools' │ 211 │ // └─────────┴──────────────┴───────┘      

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *