Не надо. Научитесь использовать вместо этого отладчик. Вот как это сделать.
Как вы устраняете проблемы с вашим продуктом? Один из способов - прочитать ваш код построчно и попытаться найти проблему. Если ты умеешь ловить жуков своими простыми глазами, ты мой герой. Знайте, что боги программистов сделали вам большой подарок. Для остальных из нас, простых смертных, это не вариант.
Даже когда вы смотрите на свой собственный код, все равно трудно отловить ошибки. Люди не видят собственных ошибок.
Решение: Используйте отладчик.
Я видел, как многие разработчики считают отладчики ненужными. Особенно в сети. Большинство разработчиков просто регистрируют / выводят значения переменных на консоль / экран. С другой стороны, я также видел, как лучшие из лучших используют отладчики как мастера.
Конечно, вы можете исправить свои ошибки, распечатав ненужную информацию на консоли, но за это придется заплатить. Вы тратите слишком много времени, пытаясь найти ту строку, в которой есть ошибка. Вы должны все записывать. Вам нужно обновиться, подождать и в сотый раз выполнить те же старые шаги в пользовательском интерфейсе. Я знаю, потому что все это делал сам. Вам нужно дождаться завершения обновления. Вы должны ждать этого, и вы должны ждать этого. Если вы регистрируете неправильную переменную, вы начинаете заново. Все может запутаться, и вы, возможно, никогда не узнаете, где бродят ошибки.
Отладка - это гораздо более быстрый способ отловить ошибки. Это просто и быстро. Вы отмечаете, где исполнение должно остановиться. В этот момент вы можете увидеть все состояние вашего приложения. Вы можете шаг за шагом проходить свой код, и на каждом шаге вы можете узнать, как ваше приложение отреагирует. Таким образом, вы ускорите процесс, выиграете время, и ваше время не будет потрачено зря.
Инструменты разработчика Chrome
Для отладки кода javascript вы можете использовать инструмент отладки Google Chrome.
Сначала запустите Инструменты разработчика Chrome (классный ярлык, который вы должны запомнить прямо сейчас: cmd + alt + i). Затем перейдите на вкладку Источник. Вы увидите, что страница разделена на 3 панели.
- Навигатор: в этом разделе перечислены все файлы вашего проекта.
- Панель содержимого: вы можете увидеть содержимое выбранного файла.
- Отладчик: вы можете отлаживать свой код с помощью инструментов в этом разделе.
Панель отладчика
Эта панель разделена на 5 частей, и все они значительно упростят наш процесс отладки.
- Кнопки отладчика
- Контрольные точки
- Смотреть
- Стек вызовов
- Сфера
Кнопки отладчика
Во время отладки эти кнопки помогут вам ориентироваться в коде как чемпион.
Контрольные точки
Точки останова - это точки, в которых наша программа приостанавливается. Благодаря точкам останова мы можем приостановить работу нашего приложения именно в тот момент, когда захотим что-нибудь проверить. Точки останова - это самая фундаментальная функция отладчика.
Смотреть
В этом разделе вы можете ввести имя переменной, которую хотите отслеживать.
Значение вашей переменной отображается в этой части, пока включен режим отладки. Если переменная не установлена или не может быть найдена в этом состоянии, то значение переменной отображается как ‹недоступно›. Использование Watch позволяет вам сосредоточиться только на тех переменных, которые вы хотите отслеживать, и я думаю, что это одна из величайших возможностей этого отладчика.
Сфера
Панель «Область видимости» показывает все переменные, которые отладчик может достичь в момент паузы. Вы увидите, что переменные сгруппированы от локальных до глобальных.
Стек вызовов
В этом разделе показан путь к точке останова. Я имею в виду, что вы можете видеть, как каждая функция вашего кода выполняется в обратном порядке. Кроме того, вы можете легко перемещаться между функциями одним щелчком мыши.
Как приостановить приложение в определенный момент?
Это важный навык - знать, как использовать точки останова и, что более важно, как разместить их в точном нужном месте.
1) Напишите в коде ключевое слово «отладчик».
Предположим, мы знаем, в чем проблема. Тогда нужно просто поставить «отладчик» над этой строкой. Когда код будет выполнен, отладчик увидит его и остановится там. (Обратите внимание, что инструменты разработчика должны быть открыты для работы.)
Прохладный! Теперь вы готовы отлаживать свой код.
2) Установите точку останова на определенной строке:
Вы также можете установить точки останова с помощью панели содержимого. Для этого просто щелкните номера строк на панели содержимого, и все готово. Это особенно полезно, если вы пытаетесь выявить ошибку, которая возникает только в производственной среде с реальными данными.
Таким же образом можно создать условные точки останова. Что делать, если у вас есть цикл, который должен повторяться 100 раз, но вы хотите, чтобы он остановился и проверил переменную в конкретной строке в 50-м цикле?
Чтобы создать условные точки останова, щелкните правой кнопкой мыши номер строки и выберите «Изменить точку останова». Затем появится поле ввода, и вы можете написать свой условный оператор прямо здесь. Круто, не правда ли?
Вы также должны прочитать Как использовать Chrome DevTools как профессионал, чтобы узнать, как легко найти конкретный файл, и 20 других профессиональных советов.
3) Установить точку останова при манипулировании DOM
Еще одна интересная особенность отладчика Dev Tools: вы можете устанавливать точки останова в DOM. Подумайте об этом, у вас незнакомая кодовая база, и вам нужно исправлять ошибки. Единственное, что у вас есть, это изменение элементов DOM. Вы не знаете, с чего начать. Тогда эта функция - именно то, что вам нужно. Вы можете установить точки останова на 3 различных событиях манипулирования DOM. Просто решите, какой из этих случаев подходит вам.
- Модификация поддерева
- Модификация атрибутов
- Удаление узла
a) Модификация поддерева: всякий раз, когда дочерние элементы узла добавляются, удаляются или изменяются (не изменяя дочерние атрибуты), отладчик приостанавливает страницу и переводит вас на точную строку код, вызывающий это.
б) Изменение атрибутов: если вы выберете этот параметр, страница будет приостанавливаться при изменении атрибутов выбранного элемента.
c) Удаление узла: он приостанавливает страницу, когда выбранный элемент DOM удаляется со страницы.
Выберите DOM на вкладке «Элементы», щелкните элемент правой кнопкой мыши. Вы можете увидеть точки останова DOM под опцией «Break on…».
Кстати, вы можете использовать эти параметры в одном и том же элементе DOM одновременно.
4) Установите точку останова в EventListener
Точки останова прослушивателя событий находятся в разделе отладчика. Он позволяет приостанавливать работу приложения всякий раз, когда запускается выбранное событие. Вы можете установить точки останова для всех видов основных событий, таких как события мыши или события анимации. Список показан на изображении ниже.
Вы можете выбрать дополнительные события, которые отображаются под основными событиями. Вы можете выбрать их по одному или все, просто щелкнув главное событие, такое как «мышь», «клавиатура» и «перетаскивание».
Например, вы выбрали событие щелчка под событием мыши в разделе Точка останова прослушивателя событий. Это означает, что всякий раз, когда вы щелкаете что-то, что вызывает событие щелчка, ваше приложение будет приостановлено.
5) Установить точку останова при исключении
Вы можете приостановить свой код прямо перед тем, как код выдаст исключение. Для этого нажмите кнопку «Пауза при исключении» на кнопках отладчика. Эта кнопка помогает приостановить выполнение кода до возникновения исключения.
Сделайте себе одолжение и начните использовать отладчик. Сегодня.
Поначалу использование отладчика может показаться запутанным или ненужным, но когда вы привыкнете к нему, вы значительно ускорите поиск ошибок. Еще одно преимущество использования отладчика состоит в том, что ваши навыки чтения кода будут улучшены.
Мы работаем над JotForm 4.0 последние 1,5 года. Это потрясающая программа. Я очень горжусь нашими достижениями, поскольку мы приближаемся к дате запуска и наблюдаем, как наши бета-пользователи восхищаются продуктом. Без отладчика мой вывод для моей команды остался бы на уровне 50%.
Изучите свой отладчик, и вы будете доминировать над своим кодом. Но не забывайте ценную цитату дяди Бена:
«С большой силой приходит большая ответственность» ~ Дядя Бен
