Console log не работает разбираемся в ошибках отладки и ищем другие методы решения


Содержание материала:

14 подсказок для отладки JavaScript, о которых Вы могли не знать

Когда дело доходит до поиска причин ошибок, знание своего инструмента может сыграть ключевую роль. Несмотря на то, что JavaScript обладает репутацией языка, который трудно отлаживать, если Вы знаете парочку трюков, поиск причины ошибки займет меньше времени.

Мы составили список из 14 подсказок для отладки, о которых Вы могли не знать, но которые могут помочь Вам отладить JavaScript код.

Большинство из этих подсказок для Chrome и Firefox, хотя, большинство из них работает и в средствах разработки для других браузеров.

1. ‘debugger;’

После console.log, ‘debugger;‘ мой любимый быстрый и «грязный» инструмент для отладки. Как только Вы добавляете его в свой код, Chrome автоматически останавливает выполнение кода в этой точке. Вы можете даже обернуть его в условие, чтобы он срабатывал только тогда, когда Вам это необходимо.

2. Отображение объектов в виде таблиц

Иногда у Вас есть сложный набор объектов, которые Вы хотите просмотреть. Вы можете использовать console.log для их отображения, а потом пролистывать огромный список, или использовать console.table. Так намного легче понять, с чем Вы имеете дело.

3. Попробуйте посмотреть на разных разрешениях

Было бы потрясающе, если бы на Вашем столе было любое мобильное устройство, однако в реальном мире это невозможно. Как изменить размер окна просмотра? Chrome предоставляет Вам все необходимое. Перейдите в инструменты разработчика, а затем нажмите кнопку «Режим переключения устройства». Посмотрите, как ваши медиа-выражения оживают!

4. Быстрый поиск DOM-элементов

Выберите DOM-элемент на панели элементов, а затем обращайтесь к нему в консоли. Инструменты разработчика в Chrome запоминают последние пять элементов: последний выбранный элемент $0, предпоследний выбранный элемент $1, и т.д.

Если Вы выбирали следующие элементы в порядке ‘item-4’, ‘item-3’, ‘item-2’, ‘item-1’, ‘item-0’, то Вы можете получить доступ к DOM-элементам, как показано в консоли:

5. Замер времени выполнения кода с помощью console.time() и console.timeEnd()

Может быть очень полезно узнать, за какое время выполняется фрагмент кода, особенно при отладке медленных циклов. Вы можете установить несколько именованных таймеров. Посмотрим пример:

Этот код выдаст следующий результат:

6. Получение стек-трейса для функции

Вероятно Вы знаете, что в JavaScript-фреймворках очень много кода.

Этот код отрисовывает интерфейс, инициирует события, поэтому в конечном счете Вам захочется узнать, что привело к вызову функции.

Поскольку JavaScript не является сильно структурированным языком, иногда бывает полезно получить информацию о том, что и когда произошло. В этот момент на сцену выходит console.trace.

Представьте, что Вы хотите увидеть весь стек вызовов для функции funcZ в экземпляре car на 33 строке.

Теперь мы видим, что func1 вызывает func2, которая вызывает func4. Func4 создает экземпляр Car, а затем вызывает функцию car.funcX, и т.д.

Даже если Вы считаете, что хорошо знаете сценарий выполнения программы, это может быть очень удобно. Предположим, Вы хотите улучшить свой код. Получите стек-трейс и список всех связанных функций, каждая из которых доступна для просмотра.

7. Форматирование минифицированного кода

Иногда Вы можете столкнуться с проблемой прямо на продакшене, а ваших сурс-мапов нет на сервере. Ничего страшного. Chrome может отформатировать Ваши JavaScript-файлы, приведя их в более читаемый формат. Конечно, код будет не так информативен, как исходный код, но, по крайней мере, Вы можете понять что в нем происходит. Нажмите кнопку <> «Pretty Print«, расположенную под просмотрщиком кода в инспекторе.

8. Быстрая отладка функции

Предположим, Вы хотите добавить точку останова для функции.

Есть два самых распространенных способа это сделать:

  1. Найти нужную строку в инпекторе и добавить точку останова
  2. Добавить debugger в Ваш скрипт

Оба этих решения требуют поиска нужного файла и нужной строки, которую Вы хотите отладить.

Использование консоли для этой цели, вероятно, менее распространено. Используйте debug(funcName) в консоли, и скрипт приостановит свое выполнение, когда достигнет нужной функции.

Это очень быстрый способ, однако он не работает на закрытых и анонимных функциях. Но если у Вас другая ситуация, то это, вероятно, самый быстрый способ отладить функцию. (Прим. авт.: есть функция console.debug, которая нужна для другого.)

9. Скрипты, не требующие отладки

На современных проектах часто используются фреймворки и библиотеки. Большинство из них хорошо протестированы, и работают достаточно стабильно. Но отладчик все еще обходит файлы, которые не имеет смысла отлаживать. Решение заключается в складывании скриптов в «черный ящик», который не нужно отлаживать. В этот ящик могут входить и Ваши скрипты. Подробнее об этом читайте в этой статье.

10. Найдите важные вещи с помощью более сложных способов отладки

При более сложных сценариях отладки может потребоваться вывести много строк. Одним из способов структурирования выводимых данных является использования различных функций console. Например, console.log, console.debug, console.warn, console.info, console.error, и т.д. Затем Вы можете отфильтровать их в инспекторе. Но иногда это не совсем то, что Вам нужно при отладке. Теперь Вы можете проявить творческий подход, и создавать собственные форматы вывода данных в консоли с помощью CSS.

11. Отслеживайте вызовы функций и ее аргументы.

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

Это отличный способ увидеть, с какими аргументами вызывается функция. Но я должен сказать, что было бы неплохо, если бы консоль могла определить, сколько аргументов ожидать. В приведенном выше примере func1 ожидает три аргумента, но передается только два. Если это не обрабатывается в коде, то это может привести к ошибке.

12. Быстрый доступ к элементам в консоли

Более быстрый способ использовать querySelector в консоли — это использовать $. $(‘css-селектор’) — вернет первый подходящий элемент, а $$(‘css-селектор’) — вернет все подходящие элементы. Если Вы используете элемент больше одного раза, можно сохранить его в переменную.

13. Postman великолепен (но Firefox быстрее)

Многие разработчики, используют Postman для тестирования AJAX-запросов.

Иногда, для этих целей проще использовать браузер.

Когда Вы больше не беспокоитесь о куках для авторизации, если работаете со страницей, защищенной паролем. Вот как Вы можете редактировать и повторно отправлять запросы в Firefox.

Откройте инспектор и перейдите на вкладку «Сеть». Кликните правой кнопкой мыши по интересующему запросу, а затем выберите «Отредактировать» и «Отправить повторно». Теперь Вы можете менять все что угодно: исправить заголовок, отредактировать параметры и нажать «Отправить повторно».

Ниже я привел пример запроса, который был отправлен несколько раз с разными параметрами:

14. Точка останова в момент изменения DOM-элемента

DOM может быть забавным. Иногда, элементы в нем меняются по непонятной для Вас причине. Однако, когда Вам нужно отлаживать JavaScript, Chrome позволяет Вам приостановить выполнение кода, при изменении DOM-элемента. Щелкните правой кнопкой мыши по интересующему элементу в инспекторе, и выберите условие остановки выполнения.

Выход за пределы console.log() — 8 методов консоли, которые следует использовать при отладке JavaScript и Node

Выйдите за пределы console.log и изучите функции консоли, которые вы никогда не использовали для отладки!

Каждый JavaScript разработчик использовал console.log(‘text’) . Модуль console является одним из наиболее распространенных утилит в JavaScript и API реализован в Node:

предоставляет простую консоль отладки, которая похожа на механизм консоли JavaScript, предоставляемый веб-браузерами.

Это определение написано на странице документации Node.js для модуля console ��. Тем не менее, начинающие склонны консультироваться с онлайн-учебниками вместо того, чтобы читать документацию. Начинать с новых технологий, упуская шанс научиться правильно использовать этот новый инструмент до 100% его потенциала.

Когда речь идет о API консоли, новички обычно используют только некоторые функции , такие как �� console.log() , ⚠️ console.warn() , или ❌ console.error() применения их отладки, в то время как часто есть много других методов, которые вполне могут реализовать наши требования и улучшить эффективность отладки.

Эта статья предназначена для того, чтобы раскрыть некоторые из наиболее интересных методов console со связанными примерами. Давайте посмотрим список из 8 лучших функций из модуля консоли!

Все следующие методы доступны в глобальном экземпляре console , поэтому нет необходимости запрашивать модуль console .

1) console.assert ✅

Функция console.assert используется для проверки, если переданный аргумент является tru или false значение. Если переданное значение равно false, функция записывает дополнительные аргументы, переданные после первого, в противном случае выполнение кода продолжается без какого-либо журнала.

Оба случая правдивого или ложного утверждения.

Метод assert особенно полезен, когда вы хотите проверить наличие значений, сохраняя консоль в чистоте (избегайте регистрации длинного списка свойств и т.д.).

2) console.count и console.countReset ��

Эти два метода используются для установки и очистки счетчика того, сколько раз определенная строка регистрируется в консоли:

Топ-пост этого месяца:  Как N первых постов в цикле заключить в html тег (div)

Подсчитайте и сбросьте вхождения журнала для строки «Hello».

3) console.group и console.groupEnd ��

Функции .group и .groupEnd позволяют создать и завершить группу журналов в вашей консоли. Вы можете передать метку в качестве первого аргумента .group() для описания того, о чем она:

Три группы для описания семейных ролей.

4) console.table ��


Этот конкретный метод невероятно полезен для описания объекта или содержимого массива в удобной для человека таблице:

Таблица для списка пользовательских объектов.

console.table облегчает проверку и регистрацию вложенных и сложных массивов / объектов.

5) console.time и console.timeEnd ⏱

В случае, если вы хотите проверить производительность вашего кода во время выполнения и решить ее, вы создаете начальную временную метку с помощью API объекта Date и используете ее для вычисления разницы после выполнения вашего кода? Что-то вроде этого:

Ну, используя функции time и timeEnd , не нужно делать этот трюк. Вы можете создать свой отчет о времени, просто выполнив:

Как видите, console.time также возвращает более точный результат.

Резюме

Всего за 3 минуты у вас теперь есть более широкий набор замечательных инструментов, доступных в API console . Интегрируйте их со своими привычками отладки, и ваша скорость разработки возрастет в геометрической прогрессии!

Отладка кода Javascript

Ошибки могут (будут) возникать, всякий раз, когда вы пишите новый программный код.

Отладка кода

Программный код может содержать синтаксические или логические ошибки.

Многие ошибки трудно диагностировать.

Часто бывает так, что в коде есть ошибки, но нет никаких проявлений. Нет никаких сообщений об ошибках, и нет никаких указаний на то, где эти ошибки искать.

Процесс поиска (и исправления) ошибок в программном коде называется отладкой кода.

Отладка — непростой процесс. К счастью, у всех современных браузеров есть встроенный отладчик JavaScript скриптов.

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

При помощи отладчика можно устанавливать точки остановки (участки кода, где процесс выполнения будет остановлен) и исследовать содержимое переменных и его изменение в ходе работы скрипта.

Обычно, чтобы начать отладку, достаточно в браузере активировать встроенный отладчик нажав клавишу F12 и в меню отладчика выбрать пункт «Консоль» («Console»). Ниже будут показаны другие способы включения отладчика в разных браузерах.

Метод console.log()

Если ваш браузер поддерживает отладку кода, то вы можете использовать команду console.log(), чтобы вывести отслеживаемые значения в окне отладчика:

Установка точек остановки

В окне отладчика можно задавать точки остановки в коде JavaScript.

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

Когда проверка значений будет закончена, вы можете продолжить выполнение скрипта (обычно при помощи кнопки Продолжить).

Ключевое слово debugger

Ключевое слово debugger останавливает выполнение скрипта JavaScript и вызывает (если есть) функцию отладки.

У этого ключевого слова то же действие, что и у точек остановки в окне отладчика.

Если отладка не доступна, то выражение debugger ничего не делает.

В следующем примере, если отладчик включен, то выполнение кода будет остановлено перед выполнением третьей строки:

Инструменты отладки основных браузеров

Обычно, чтобы начать отладку, достаточно в браузере нажать клавишу F12 и в меню отладчика выбрать пункт «Консоль» («Console»).

Иначе, чтобы начать отладку, проделайте следующее:

  • Запустите браузер.
  • В меню, выберите Дополнительные инструменты.
  • Затем выберите Инструменты разработчика.
  • Наконец, выберите Console.
  • Запустите браузер.
  • Перейдите на страницу http://www.getfirebug.com
  • В соответствии с инструкцией установите Firebug
  • Запустите браузер.
  • В меню, выберите Средства разработчика.
  • Наконец, выберите Консоль.

Отладка Front-end: Console

Разработчики пишут код и допускают ошибки, конечно, не намеренно, но все же. Чем старше ошибка, тем труднее ее найти и исправить. В этой серии статей я попытаюсь показать, что вы можете сделать, используя Google Chrome Devtools, плагины Chrome и WebStorm.

Этот туториал будет посвящена Console Chrome, наиболее часто используемому инструменту для отладки. Наслаждайтесь!

Консоль

Чтобы открыть Chrome DevTools:

  • Выберите «More Tools» > «Developer Tools» в главном меню Chrome.
  • Правй щелчек мыши на любомм элементе странице > «Inspect».
  • Нажмите Command + Option + I (Mac) или Control + Shift + I (Windows, Linux).

Посмотрите вкладку «Консоль» и что там есть.

Первая строка
— очистить консоль

top — по умолчанию контекст Консоли — top, если вы не проверяете какой-либо элемент или контекст плагина Chrome.
Вы можете изменить контекст выполнения (верхний кадр страницы).

Фильтр:
Фильтрует вывод консоли. Вы можете фильтровать по уровню важности, регулярному выражению или скрывать сетевые сообщения.

Настройки:
Скрыть сеть — Скрыть сетевые ошибки, такие как 404.
Сохранения логов — Консоль будет сохранять логи между обновлениями или навигацией.
Только выбранный контекст — мы можем изменить контекст журналов в [top].
Только пользовательские сообщения — cкрыть предупреждения, созданные с помощью браузера [нарушение].
Логи XMLHttpRequests — тут нечего объяснять.
Показывать временные метки — отметки времени отображаются в консоли ниже.
Автозаполнение из истории — Chrome помнит, что вы набрали 😉

Выбранный API консоли

Консоль будет запускать каждый JS код, который вы наберете, в контексте вашего приложения. Поэтому, если что-то доступно в глобальной области, вы можете легко увидеть его через консоль. Вы также можете просто ввести и увидеть результат выражения, например: «null === 0».

console.log — описание

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

При отладке объектов или массивов вам нужно быть осторожными. Мы видим, что fruits до модификации содержат 3 объекта, но их больше нет. Чтобы увидеть результаты в этот конкретный момент, используйте JSON.stringify , чтобы сохранить информацию видимой. Конечно, это может быть неудобно для больших объектов. Не волнуйтесь — позже мы найдем лучшее решение.

console.log — сортировка свойств объекта

Гарантирует ли JavaScript порядок свойств объекта?

4.3.3 Объект — Третье издание ECMAScript (1999)
Объект является членом типа Object. Это неупорядоченный набор свойств, каждый из которых содержит примитивное значение, объект или функцию. Функция, хранящаяся в свойстве объекта, называется методом.

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

Сюрприз! Chrome сортирует свойства в алфавитном порядке, чтобы помочь нам. Я не могу решить, нравится мне это или нет, но хорошо это иметь ввиду.

console.assert(выражение, сообщение)

Console.asser t выдает ошибку, если вычисленное выражение false . Существенно, что assert не останавливает дальнейшее выполнение кода. Это может помочь отладить длинный и запутанный код или найти ошибки, которые проявляются после нескольких итераций.

console.count(ярлык)

Проще говоря, это console.log , который подсчитывает, сколько раз он был вызван с тем же выражением. С ТЕМ ЖЕ САМЫМ.

Как вы можете видеть в примере, была подсчитана только одна и та же строка.

console.table()

Отличная функция отладки, но иногда я просто слишком ленив, чтобы использовать ее, хотя она, скорее всего, ускорит мою работу . поэтому, пожалуйста, не делайте эту ошибку. Будьте эффективны.


Отлично. во-первых, вы все хорошо разместили в таблице; во-вторых, вы также добавили console.log . Хорошая работа Chrome, но это еще не все.

Мы можем решить, хотим ли мы увидеть все или только некоторые столбцы всего объекта.
Таблица сортируема — просто нажмите на заголовок столбца, который вы хотите отсортировать.

console.group() / console.groupEnd();

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

Отлично, если вы работаете с данными. Копнем глубже.

console.trace();

trace выводит трассировку стека в консоль. Полезно знать, особенно если вы разрабатываете библиотеки или фреймворки.

console.log vs. console.dir

Здесь реализация зависит от браузера. Первоначально dir должен был хранить ссылку на объект, тогда как log нет. (лог показывал копию объекта). Теперь, как мы видели раньше, лог также сохраняет ссылку. Давайте остановимся тут, поскольку они отображают объекты по-разному. Не особо сложно и полезно при отладке HTML-объектов.

$_, $ 0 — $ 4

$_ возвращает значение последнего оцениваемого выражения.
$0 — $4 — работает как историческая ссылка на последние 5 проверенных элементов HTML.

getEventListeners(объект)

Возвращает слушателей событий, которые зарегистрированы на определенных DOM элементах. Существует также более удобный способ установки слушателей, но я расскажу об этом в следующей статье

monitorEvents(DOMElement, [events]) / unmonitorEvents(DOMElement)

Если произойдет какое-либо из этих заданных событий, мы получим информацию в консоли. Пока вы не выполните unmonitor для этого события.

Выбор элементов в консоли

Чтобы открыть этот экран, нажмите ESC на вкладке Element.

Если нет ничего другого, связанного с $

$() — document.querySelector() . Возвращает первый элемент, соответствующий селектору CSS (например, $(‘span’) вернет первый span).
$$() — document.querySelectorAll() . Возвращает массив элементов, соответствующих CSS селектору.

Копирование выведенных данных

Иногда вы работаете над данными. Возможно, вы захотите создать черновик или просто посмотреть, есть ли разница между двумя объектами. Выделять все, а затем копировать может быть сложно. К счастью, есть и другой путь.

Нажмите правой кнопкой мыши на объект и нажмите Copy или Save as global. После этого вы можете работать с сохраненным элементом в консоли.

Все, что в консоли можно также скопировать, используя copy(‘object-name’) .

Стилизуем вывод консоли

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

console.log (‘%c Truly hackers code! ‘, ‘background: #222; color: #bada55’);

% d или % i — целое число
% f — значение с плавающей запятой
% o — расширяемый элемент DOM
% O — расширяемый объект JS
% c — форматы вывода с помощью CSS

Это все на сегодня, но не все в этой теме. Ниже вы найдете ссылки для дальнейшего чтения.

Присоединяйтесь к нашим каналам FrontEndDev и Web Stack в Telegram чтобы не пропустить самое интересное!

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

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

2 ответа 2

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

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

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

Всё ещё ищете ответ? Посмотрите другие вопросы с метками javascript firefox или задайте свой вопрос.

Похожие

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

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

дизайн сайта / логотип © 2020 Stack Exchange Inc; пользовательское содержимое попадает под действие лицензии cc by-sa 4.0 с указанием ссылки на источник. rev 2020.11.7.35374

Отладка и устранение распространённых ошибок в JavaScript

Временами работа над кодом JavaScript заставляет чувствовать себя выдохшимся и измождённым, поэтому некоторые подсказки по отладке никогда не будут лишними. На примерах из песен мы постараемся разобрать типичные ошибки в коде на JS и способы, которыми их можно найти и устранить.

Топ-пост этого месяца:  Функция calc - потрясающие возможности для адаптивного веб-дизайна

Свойство не определено

Этот код выдаёт ошибку «Uncaught TypeError: Cannot read property ‘lucky’ of undefined». Дело в том, что объект girl не имеет свойства named , хотя у него есть свойство name . Поскольку свойство girl.named не определено, мы не можем получить к нему доступ, то есть оно просто не существует. Если мы заменим girl.named.lucky на girl.name , то код вернёт нам «Lucky».

Свойство — некоторое значение, привязанное к объекту JavaScript. Почитать больше об объектах можно здесь (статья на английском языке).

Отладка ошибок TypeError

Ошибки типа TypeError появляются, когда вы пытаетесь выполнить действия с данными, которые не соответствуют нужному типу, например применяете .bold() к числу, запрашиваете свойство undefined или пытаетесь вызвать как функцию что-то, не являющееся функцией. Например, вы увидите такую ошибку, если вызовете girl() , поскольку это объект, а не функция. В последнем случае вы получите «Uncaught TypeError: yourVariable.bold is not a function» и «girl is not a function».

Для отладки этих ошибок надо разобраться с переменными. Что такое girl ? И что такое girl.named ? Вы можете понять это изучая код, выводя переменные с помощью console.log , используя команду debugger или просто напечатав имя переменной в консоли. Удостоверьтесь, что вы можете манипулировать содержащимся в переменной типом данных. Если тип данных не подходит, модифицируйте его нужным образом, добавьте условие или блок try..catch , чтобы контролировать выполнение операции, или используйте эту операцию на другом объекте.

Переполнение стека

Если верить авторам песни «Baby One More Time», слово «hit» в строчке «Hit me baby, one more time» означает «позвони», то есть Бритни хочет, чтобы её бывший позвонил ей ещё раз. Это, возможно, приведёт к ещё большему количеству звонков в будущем. По сути это рекурсия, которая может вызвать ошибку в случае переполнения стека вызовов.

«Росбанк», Москва, до 60 000 ₽ (до налогов)

Конкретные сообщения об ошибке зависят от браузера, но выглядят они примерно так:

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

В показанной выше функции stillBelieve никогда не примет значение false, и поэтому мы раз за разом будем вызывать oneMoreTime , увеличивая одиночество, и никогда не завершим выполнение функции.

Если же Бритни решит положиться на своих друзей, это уменьшит её одиночество, она перестанет верить, что можно вернуть отношения, и не будет больше ждать звонка от бывшего партнёра.

Есть похожие случаи с бесконечными циклами, когда система не выдаёт сообщение об ошибке, но вместо этого страница, на которой исполняется код, зависает. Это происходит в случае цикла while без условия завершения.

Исправить это можно примерно так же, как и предыдущий пример.

Отладка бесконечных циклов и рекурсий

Для начала, если возникла проблема с бесконечным циклом, закройте вкладку, если вы пользуетесь Chrome или Edge, или окно браузера, если у вас Firefox. Затем просмотрите код: есть ли там что-то, что создаёт бесконечный цикл или рекурсию. Если ничего не обнаружили — добавьте в цикл или функцию команду debugger и проверьте значение переменных на нескольких начальных итерациях. Если они не соответствуют ожидаемым, вы это обнаружите.

В приведённом выше примере стоило бы добавить debugger самой первой строкой функции или цикла. Затем нужно открыть отладочную вкладку в Chrome и изучить переменные в Scope . С помощью кнопки «next» можно проследить, как они меняются с каждой итерацией. Обычно это помогает найти решение проблемы.

Здесь можно найти руководство на английском языке по отладке с помощью Chrome’s DevTools, а здесь — для Firefox.

Ошибка синтаксиса

SyntaxError — вероятно самая распространённая разновидность ошибок в JavaScript. Эти ошибки возникают, если вы не соблюдаете правила синтаксиса языка. Копируя посыл песни Бритни «Everytime», JavaScript говорит отсутствующим скобкам и кавычкам: «Вы нужны мне, крошки».

Соответствующие расширения текстового редактора помогут избежать ошибок. Bracket Pair Colorizer размечает скобки в коде разными цветами, а Prettier или другой инструмент статического анализа кода поможет быстро найти ошибки. Постарайтесь придерживаться правильной разметки и делайте блоки кода как можно короче и с минимальной вложенностью. Такой подход сильно облегчает отладку.

Теперь, вооружившись новыми навыками отладки, вы станете немного сильнее в JavaScript, чем были вчера.

Console log не работает: разбираемся в ошибках отладки и ищем другие методы решения

Используйте средство Консоль для просмотра ошибок и сообщений, отправки отладочных данных, проверки объектов JavaScript и узлов XML и запуска JavaScript в контексте выбранного окна или фрейма.

Окно в ваш код

Основные режимы использования средства Консоль — прием команд и вывод информации из запущенных веб-страниц:


  • Режим приема команд: в этом режиме вы можете запускать JavaScript для просмотра и изменения значений в запущенных веб-страницах, добавлять функции в выполняющийся код и отлаживать код в реальном времени.
  • Режим вывода информации: в этом режиме Internet Explorer и код JavaScript выводят состояние, ошибки и сообщения отладки для разработчиков, включая объекты JavaScript и узлы DOM, поддерживающие проверку.

Отправка информации в средство Консоль

Выбор целевого объекта выполнения

В Windows 8.1 с обновлением появилась Консоль, которая содержит раскрывающееся меню Целевой объект над областью выходных данных Консоль. Если просматриваемая веб-страница содержит элемент iframe, выберите iframe в меню Целевой объект, чтобы выполнять команды консоли исключительно в области действия элемента iframe. Если на вашей странице нет элементов iframe, то единственным выбором будет «_top».

Сообщения, отправляемые Internet Explorer на консоль

По умолчанию Консоль не отображает сообщения, пока она закрыта. Запустите консоль, открыв средства разработчика F12 и выбрав пункт Консоль (CTRL + 2). Вы также можете открыть Консоль из другого средства, нажав кнопку Открыть консоль в верхнем правом углу панели инструментов или нажав клавиши CTRL + `.

Из рисунка видно, что системные сообщения Internet Explorer делятся на три категории. Категории сообщений (в порядке, представленном на рисунке):

  • Сообщения: некритическая информация, которая может быть полезна.
  • Предупреждения: возможные ошибки на странице. Не всегда мешают запуску, но могут вызвать непредвиденное поведение.
  • Ошибки: критические ошибки, препятствующие выполнению кода. Дополнительные сведения см. в разделе, посвященном списку кодов ошибок Internet Explorer, используемых в консоли.

Начиная с накопительного пакета обновления для системы безопасности Internet Explorer (KB2976627), средства разработчика F12 также будут отображать индикатор на значке Консоль, оповещая вас о количестве сообщений об ошибках.

В окне вывода консоли можно отфильтровать эти сообщения. Значки в верхней области консоли, обозначающие тип каждого сообщения, выполняют функцию переключателей. Щелкните значок, чтобы убрать вывод сообщений соответствующего типа, и снова щелкните его, чтобы показывать такие сообщения. Вы также можете щелкнуть правой кнопкой мыши в окне вывода консоли и отметить типы сообщений в контекстном меню.

Когда вы нажимаете имя файла, указанное после сообщения, запускается средство Отладчик, и файл загружается в область сценариев.

В Windows 8.1 с обновлением появился еще один переключатель справа рядом с типами сообщений. Когда выделяется значок Очистить при переходе, консоль будет очищаться при каждом переходе браузера на новую веб-страницу. Если значок не подсвечивается, браузер будет сохранять содержимое Консоли, но сообщения, полученные на предыдущих веб-страницах, будут выделены как неактивные для визуального указания на то, что они не принадлежат текущей странице.

В предыдущих версиях средств F12 данные, выводимые на консоль, не записывались в сеансе просмотра до открытия консоли. Для разработчиков, которым требуется постоянная запись сообщений на консоли, в Windows 8.1 с обновлением добавлен параметр Всегда записывать сообщения консоли разработчика. Чтобы найти этот параметр:

  • Откройте окно Свойства браузера в меню Сервис.
  • На вкладке Дополнительно в разделе Обзор будет параметр Всегда записывать сообщения консоли разработчика.

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

Сообщения, которые разработчики могут отправить из кода на консоль

API отладки на консоли предоставляет методы для отправки информации из вашего кода на консоль. Такая информация делится на следующие типы:

Настраиваемые сообщения

Для настраиваемых сообщений существуют четыре параметра. Три параметра используют формат системных сообщений: console.info() для информационных сообщений, console.warn() для предупреждений и console.error() для ошибок. Четвертый параметр console.log() выводит обычный текст без предупреждающего значка. Все четыре параметра принимают одинаковые формы аргумента для сообщения.

    Только текст:

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

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

Сначала я думал, что обнаружил «Святой Грааль», когда понял, что можно открывать console в chrome и применять console.log() для всех моих значений, чтобы найти баги. Этот способ оказался достаточно низкоэффективным. Чтобы посмеяться, представлю несколько моих любимых случаев:

Думаю, большинство программистов начинает понимать, что отладку программ нужно производить не так. Должен же быть способ лучше!

К счастью, он действительно существует. Вы можете пользоваться инструментами для отладки в вашем браузере. Если точнее, я буду рассматривать — Chrome Developer Tools.

В этой статье я расскажу о точках прерывания, исследовании кода, установке контрольных выражений и применении поправок в Chrome Developer Tools.

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

Шаг №1: Воспроизведение бага

Для начала проведем несколько действий, которые будут воспроизводить баг:

  1. В нашем случае мы будем использовать неправильно работающий калькулятор чаевых. Если вы еще не открыли пример кода , то, пожалуйста, сделайте это;
  2. Введите 12 в «Entree 1»;
  3. Введите 8 в «Entree 2»;
  4. Введите 10 в «Entree 3»;
  5. Введите 10 в «Tax»;
  6. Выберите 20% в «Tip»;
  7. Нажмите на кнопку «Calculate Bill». Итоговая сумма должна быть 39,6, однако получается совершенно другой результат. Вместо этого появляется 14105,09… Ужас!

Шаг №2: Учимся использовать панель sources

Чтобы провести такую процедуру с кодом JavaScript. Отладить в chrome, нужно привыкнуть к использованию DevTools. Чтобы открыть Chrome Developer Tools, нажмите Command + Option + I (Mac) или Control + Shift + I (Linux).

После того как вы кликнете на панель sources наверху, вы получите доступ к 3 панелям для отладки: навигатор файлов, редактор исходного кода, окно для отладки. Покликайте на них, развлекитесь, перед тем как переходить к шагу №3.

Шаг №3: Установка первой точки прерывания

До того как я покажу вам, как установить первую точку прерывания, давайте я продемонстрирую, что имею в виду под использованием console.log() . Очевидно, во время выполнении программы происходит какая-то ошибка в подсчете итога. Попробовать провести отладку можно таким образом:

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

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

Топ-пост этого месяца:  Код для добавления всех стран мира в таксономию country (с переводами)

В нашем случае мы установим точку прерывания в самом начале выполнения программы, добавляя событие мыши.

В панели «Debugger Pane» раскройте «Event Listener Breakpoints». Там откройте «Mouse». Затем поставьте флажок «Click».

Теперь при клике на кнопку «Calculate Bill» отладчик будет приостанавливать выполнение программы на первой строчке первой функции onClick() . Если отладчик находится в другом месте, нажмите на кнопку воспроизведения, и отладчик передвинется в нужное место.

Шаг №4: Исследование кода

Во всех инструментах, в которых проводится JavaScript отладка, у пользователя есть 2 способа ориентироваться в выполнении кода. Юзер может либо «вступить», либо «перешагнуть» в случае с вызовом следующей функции.

В случае «вступления» каждая строка кода будет выполняться одна за другой внутри каждой функции.

В случае «перешагивания» вы сможете пропускать целые рабочие функции.

Ниже приведен пример, в котором я «шагаю» по своему коду. Под вкладкой «Scope» справа отображены 3 введенных значения.

Шаг №5: Установка точки прерывания на строке

Ого! Иметь возможность «перешагивать» через код — отлично, но это довольно-таки долго и проблематично, не так ли? Обычно мне нужны только значения в определенных местах. В таком случае можно устанавливать точки прерывания в конкретных строках.

От автора: Именно из-за точек прерывания на строках я перестал использовать console.log() в пользу Chrome Developer Tools.

Чтобы установить точку прерывания на строке, просто кликните на номер строки, о которой вам бы хотелось узнать больше информации. Затем запустите код, как обычно. Выполнение программы остановится на выбранной вами точке прерывания на строке. Теперь вам не придется «перешагивать» через каждую функцию.

Замечание: Если у вас возникли проблемы, убедитесь, что вы сняли флажок «Click» в «Mouse».

Как вы можете заметить, запрошенный мной итог составил 10812. В панели «Scope», а также в самом коде отображаются входные значения.

Хм… Кажется, мне стало понятно, в чем заключается баг. Сцепление строк?

Установим контрольные выражения, чтобы удостовериться.

Шаг №6: Создание контрольных выражений

Раз мы поняли, что наши входные значения неправильно складываются, давайте установим контрольное выражение для каждого из этих значений.

Контрольное выражение даст больше информации о любых данных переменной или выражении в коде.

Чтобы определить значения для «слежки», кликните на панель «Watch», что в самом верху, затем — на символ «+», когда она откроется. Здесь вы сможете ввести названия переменных или другие выражения.

В примере я установлю контрольное выражение на первом входном значении и на его типе.

Ага! Похоже, я нашел, в чем проблема. Видимо, мое первое значение хранится как данные строкового типа! Судя по всему, дело в том, как я вообще получил это значение. Наверное, виновник всего этого — querySelector() . Могли быть затронуты и некоторые другие значения. Давайте проведем отладку дальше, а затем исправим код в DevTools.

Шаг №7: Исправление кода

После дальнейшего исследования оказалось, что во всем действительно виновата функция querySelector() !

Как же это исправить? Ну, можно принудительно присвоить строковым значениям числовой тип. Например, Number(getEntree1()) в строке 74.

Чтобы отредактировать код, нужно перейти на панель «Elements» (слева от «Sources»). Если вы не видите код JavaScript, нужно расширить тег «Script». Далее кликните правой кнопкой мыши на код и выберите «Редактировать как HTML».

Если вы используете рабочую среду, сохранить код будет легко, и вы тут же его просмотрите. Если же нет, вам нужно будет сделать локальную копию веб-страницы с помощью command + s (mac) или control + s (linux).

Далее можно открыть локальную копию и ознакомиться с изменениями.


Stepan Suvorov Blog

Release 2.0

Все для обработки JavaScript error в проекте

Решил сделать что-то типа TODO списка “Что необходимо сделать для красивой обработки ошибок JavaScript в проекте”.

  • своя обертка-заглушка на объект console
  • отправка ошибок на сервер
  • переопределение обработчика window.onerror
  • создание своих классов ошибок
  • классификация ошибок
  • красивый вывод
  • режим отладки

Более подробно о каждом под катом.

Своя обертка-заглушка на объект console

Я думаю вы знаете, что часто для отладки javascript кода и для вывода какой-либо информации в консоль браузера используется объект console.

Так вот, для чего нужно писать для него обертку? Причины следующие:

  • вы поддерживать браузеры, которые до сих пор не знакомы с этим объектом – чтобы не возникло ошибок
  • вы хотите чтобы после сжатия кода из кода были удалены все вызовы данного объекта

По первому пункту все просто – код будет где-то такой(console + FireBug console):

Более подробно о втором пункте, который не так очевиден. Современные упаковщики-сжимальщики кода уже научились выкидывать ветки и методы, которые никогда не выполнятся:

будет выкинуто также и

а самое главное, что даже все вызовы метода something будут также удалены .

Если задать переменную debug равной false, то програма по сжиманию кода выбросит все вызовы метода dump. Это довольно удобно, хотя я бы порекомендовал всеже не держать отладочного кода в репозитории.

Вот тут можно проверить как это работает ( на Advanced режиме).

Отправка ошибок на сервер

Серверные ошибки довольно легко логировать. Но что если ошибки происходят на стороне клиента? Мы тоже должны о них знать! В этом нам поможет независимый от кода проекта модуль, который аяксом будет слать ошибки и не только ошибки, а всю сопроводительную информацию(браузер, строку запроса, модуль сервиса и т.д.) к нам на сервер.

Также можно продумать вариант отправки ошибок для случая, когда разрывается соединение. В данном варианте мы можем складывать дамп ошибок в локальную базу данный браузера(localStorage), а дождавшись восставноления соединение – отправить все вместе на сервер.

К сожалению, никакой готовой и полноценной библиотеки для сбора и отправки ошибок я не нашел. Если знаете – подскажите пожалуйста в комментариях. То, что частично удовлетворяло требованиям – jQuery.clientSideLogging.

Переопределение обработчика window.onerror

По поводу переопределения стандартных обработчиков мнения есть разные и я не буду утверждать, что проповедую единственно правильное решение вопроса.

Зачем? Представим себе ситуацию: произошла ошибка. Хотим ли мы, чтобы ее обработал браузер и выдал нашему пользователю системное СООБЩЕНИЕ-предупреждение о поломке сайта – не думаю. Ведь намного лучше отловить ошибку, показать пользователю красивый диалог(о том, что в системе что-то пошло не так, но мы это знаем, мы котролируем ситуацию) и не пускать ее дальше на обработку браузера.

Реализовать данный подход в коде мы можем следующим образом:

Создание своих классов ошибок

*в данном случае коректнее говорить не об ошибках, а о исключениях (Exceptions).

В крупных проектах возникает необходимость создавать свои классы ошибки(для более детальной обработки), а в некоторых случаях даже свои структуры классов ошибок.

Пример стандартного класса Error, генерируем и ловим ошибку:

Создание своего класса(наследуем от Error):

Мы их можем и по разному обрабатывать, проверяя какому классу принадлежит ( через instanceof ):

подробно о объекте Error читать тут.

Классификация ошибок

Тут очень сложно дать общие советы, которые отлично впишутся под структуру всех проектов.

Иногда имеет смысл разделять все ошибки на

  • системные – система дальше работать не может, например: разрыв соединения, выход из строя ключевого модуля, синтаксические ошибки
  • пользовательские – система может работать дальше, но какой-то модуль отработал некоректно

– тут мы четко можем определить действия для каждого типа ошибки. И если для пользовательских ошибок можно ограничится предупреждением, то при системных – необходимо будет насильно перегружать страницу/сервис.

Еще может быть полезно разделять ошибки по уровням критичности, что схоже с предыдущим но более подробно и не зависит от того, где произошла ошибка:

  • fatal error
  • warning
  • notice

Имея такую классификацию, в настройках логирования можно будет задавать уровень критичности, т.е. например писать в лог только фаталы.

Красивый вывод

В системе отлова и обработки ошибок также важную роль играет UI модуль вывода ошибок для пользователя.

И первое что нужно сделать для качественного подхода к созданию данного модуля – это поменять воприятие – смирится с мыслью, что в проекте будут ошибки , как долго бы его не тестировали, всеравно они будут. Именно такие мысли нас настоят на правильное понимание того, как лучше их отобразить.

Необходимо определится что мы хотим выводить пользователю и в каком формате. Возможные вариаты:

  • модальное окно(modal dialog)
  • стиль уведомления(notification)
  • встроенные(inline)

В зависимости от места возникновения и характера ошибки мы должны выводить разные. Но тут также важно не перестараться и не насоздавать очень много вариантов – тем самым запутав пользователя. Мы в своем проекте ограничились этими тремя.

Режим отладки

Стоит также задуматься над вопросом: хотим ли мы выводить пользователю и разработчку одни и теже ошибки/информацию о проблеме? либо при работе над сайтом и отладке мы хотим получать больше линформации? Мне кажется ответ очевиден – мы хотим чтобы разработчик имел полностью всю информацию: где произошла ошибка и что к этому привело; а для пользователя – ограничиться коротким соощением о технической неполадке.

Реализовать это можно разными путями. В нашем проекте для этого используется cookie переменная, которая задает опцию отладки. Реализовать можно вот так в виде кнопочки в браузере.

Если есть еще что-то, что необходимо помнить при создании комлексной системы обработки ошибок – пожалуйста дополните в комментариях.

Console.log не работает вообще

Не работает куча кода, и я пытаюсь определить, где проблема, но console.log() не регистрирует никаких результатов в инструментах Chrome Dev, правильно ли я делаю это?

EDIT FULL CODE ADDED

ИЗМЕНИТЬ

Некоторые биты полного кода (выше) относятся к другим файлам JS, и код не возвращает ошибок при запуске с этими файлами. После устранения неполадок я вижу консольное сообщение перед функцией прокрутки, но я не вижу консольное сообщение в функции прокрутки.

Я чувствую себя немного глупо на этом, но пусть это станет уроком для всех. Убедитесь, что вы нацеливаете правый селектор!

В основном консоль ничего не записывала, потому что этот фрагмент кода пытался захватить область прокрутки моего окна, когда на самом деле мой код был настроен иначе, чтобы прокручивать весь DIV. Как только я изменил:

Консоль начала регистрировать правильные сообщения.

Похоже, что вы либо скрывали журналы JavaScript, либо указали, что хотите видеть только ошибки или предупреждения. Откройте инструменты разработчика Chrome и перейдите на вкладку «Консоль». Внизу вы хотите убедиться, что JavaScript отмечен галочкой, а также убедитесь, что вы выбрали «Все», «Журналы» или «Отладка».

На изображении выше у меня есть JavaScript, Network, Logging, CSS и Other ticked и выбрано «All».

Другая потенциальная проблема может заключаться в том, что ваша функция $(window).scroll() не обернута внутри функции .ready() (как описано здесь):

Когда вы вставляете свой код в JSFiddle и даете некоторый фиктивный контент, ваш код работает отлично: JSFiddle demo.

Изменить:

Вопрос был отредактирован. Новый код дает две ошибки:

Неподготовлено ReferenceError: fitHeight не определен Uncaught TypeError: Не удается прочитать свойство addEventListener из null

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