Всё ещё используете console.log? Вот почему вместо этого вам следует использовать отладчик Chrome
Пожалуйста, не говорите мне, что вы всё ещё используете журналы консоли для отладки своего приложения.
Хорошо, все так делают, иногда я тоже пользуюсь консольными логами… НО в Chrome есть прекрасно работающий отладчик и не требуется никаких настроек, он просто… работает.
Позволь мне показать тебе:
Или, если вы предпочитаете читать, вот краткое изложение того, о чём видео (но позвольте мне порекомендовать вам посмотреть демонстрацию в видео).
-------------
Если вы никогда не использовали отладчик, представьте, что вы можете запускать код построчно, где вы можете видеть все значения ваших переменных в любой момент времени, вы можете запустить дополнительный код для проверки ваших предположений, вы можете приостановить код, только если условие выполнено и многое другое!
Ок круто, но как?
Меня зовут Леонардо, и я каждую неделю рассказываю о веб-разработке и открытом исходном коде. Сегодня давайте вместе посмотрим на отладчик Chrome.
Доступ к отладчику
В Chrome вы можете нажать F12 или щёлкнуть правой кнопкой мыши страницу и выбрать Inspect, чтобы открыть инструменты разработчика.
Вы это уже знаете, но чаще всего вы используете вкладку Console или Network, но есть ещё много чего.
Чтобы получить доступ к отладчику, вы можете щёлкнуть вкладку Sources, а затем слева вы увидите все файлы, из которых состоит ваше приложение.
Отсюда вы можете либо перейти к файлу, который хотите отладить, либо использовать панель поиска, чтобы найти его. Умный способ — использовать командной панели (Cmd + P на Mac, которая должна быть Ctrl + P в Windows), а затем ввести имя файла, который вы хотите отлаживать.
Отсюда вы можете щёлкнуть номер строки, чтобы добавить точку останова, и код приостановится, когда достигнет этой строки.
Использование оператора debugger;
Кроме того, вы можете добавить оператор debugger; в свой код. Когда вы переключитесь на браузер и начнёте использовать своё приложение, вы увидите, что ничего не происходит.
Однако, если у вас открыты инструменты разработчика, вы увидите, что отладчик приостановит выполнение кода в этой строке.
Это может быть полезно, если вы хотите отлаживать определённую часть своего кода и хотите быстро добавить точку останова из вашего редактора, но не забудьте удалить её перед коммитом и пушем.
Продолжение следует...
Перевод с некоторыми авторскими правками.
Автор оригинала: Leonardo Montini.