Кодеры, есть проблема с вредителями? Используйте отладчик прямо сейчас!

Я знаю, что я не одинок, когда говорю, что позволяю ошибкам жить в моем коде бесплатно (вставьте здесь отсылку к проблеме вредителей в Нью-Йорке). Я также знаю, что я не одинок в бесконечных программистских каламбурах**. Но именно поэтому я здесь, чтобы призвать к действию моих коллег-новичков в JavaScript (особенно ваших покорных слуг): начните использовать отладчик прямо сейчас!

Существует много компьютерных программ для отладки, но поскольку я еще не знаком с ними, я расскажу о методе отладки, с которым познакомились мои коллеги по школе Flatiron в Нью-Йорке и с которым я познакомился в первые несколько недель: отладчик Google Chrome. Этот инструмент легко доступен через DevTools, встроенные в Chrome инструменты веб-разработчика. Если вы не знаете, как туда добраться, вот небольшая карта:

1. Щелкните правой кнопкой мыши в любой части вашего браузера.
2. Нажмите «Проверить».

Пауза. Прямо сейчас мы получили доступ только к DevTools. Это первый шаг к тому, чтобы увидеть всю мощь отладчика! Прежде чем двигаться дальше, давайте перейдем к тому, где в настоящее время живут ошибки — к вашему файлу index.js в Visual Studio Code. Если ваши строки кода не работают, обычно вы можете увидеть, где находится ошибка, с помощью нашей полезной вкладки Chrome Console:

Но что происходит, когда у вас есть строки кода, которые кажутся такими, что должны работать? В консоли нет ни ошибок, ни этих нежелательных, но полезных красных волнистых линий под точками с запятой или скобками в VS Code. К сожалению, код по-прежнему не работает, а наша веб-страница еще не завершена! В этот момент может вмешаться наш истребитель. Введите слово «отладчик» прямо над строкой кода, над которой вы работаете, сохраните файл, а затем обновите веб-страницу:

Если вам показалось, что ваш компьютер просто дал сбой или какой-то суперзлодей, обладающий способностью останавливать время, заморозил вашу страницу, ОТЛИЧНО! Это именно так мы хотим, чтобы наша страница выглядела, чтобы начать процесс отладки а-ля Google Chrome. Прежде чем мы слишком забегаем вперед с информационной перегрузкой, давайте сосредоточимся на следующих частях окна DevTools:

1. Желтый: наш код
2. Зеленый: текущее состояние отладчика с кнопкой воспроизведения/паузы в левом верхнем углу.
3. Красный: окно точек останова
4. Синий: окно Scope

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

Точки останова делают паузу в строке кода, которую собираетсявыполнить. Это когда мы можем переориентировать наше внимание на наше окно Scope:

Ошибка в этом конкретном примере немного сложна; хотя мы можем видеть ключи и значения нашего объекта данных, веб-страница продолжает отображаться вот так:

Итак, как нам сделать это? Во-первых, определить, что мы знаем из того, что у нас есть. С помощью инструмента отладки мы видим, что работаем с объектом и его свойствами. Мы также можем видеть значения переменных, определенных в глобальной области видимости. С помощью этих подсказок мы можем сделать вывод, какой встроенный метод JavaScript извлечь из нашего программирования «Rolodex» (он же Google, если вы, как и я, еще не запомнили всю лексику методов JS***). В нашем примере мы обнаруживаем, что нам не нужно использовать встроенный метод JavaScript для вставки другого набора объектов Node — .append() — а использовать один из них для изменения интерфейса Node: .textContent().

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

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

Для меня кнопка «Перейти», расположенная в окне, обведенном зеленым, оказалась наиболее эффективной при обнаружении ошибок. Код «перехода» позволяет DevTool выполнять весь код в функциях, через которые вы переходите, при этом отображая значения свойств, расположенные в окне Scope:

Хотя я знаю, что это лишь малая часть того, как использовать необычный инструмент отладчика Chrome, я хочу поощрить выработку привычки использовать его на протяжении всего нашего пути программирования. Пожалуйста, обращайтесь, если у вас есть какие-либо вопросы, и помните, не позволяйте этим ошибкам кусаться ;)

ссылки и ресурсы

**На этом каламбуры не заканчиваются. Это механизм преодоления моего синдрома самозванца. Как сказали бы крутые ребята, «съеживаться и расстраиваться».

****Это бесконечный список, так как программирование развивается каждый день. Это возможность обучения и навык сам по себе!