Я люблю JavaScript. Это беспорядочная, динамичная и иногда утомительная любовь, но тем не менее это любовь. JavaScript позволяет вам создавать проекты по-своему - вы можете быстро менять парадигмы. Это обеспечивает молниеносную разработку, но также позволяет множеству ошибок закрасться в ваш код, и знание того, как устранить эти ошибки, имеет решающее значение для того, чтобы быть успешным разработчиком JavaScript.
В этой статье я сосредоточусь на отладке с использованием интерфейсной библиотеки VueJS, которую мы используем здесь, в DealerOn, для нашей интерфейсной разработки, но процесс, который я использую для отладки моего кода, может быть применен к vanilla JavaScript и многие другие фреймворки. Я также буду использовать код из моего личного проекта в качестве примеров, пока буду описывать свой подход к отладке. Наконец, прежде чем мы начнем, имейте в виду, что это всего лишь мой личный подход, и он никоим образом не должен рассматриваться как единственный подход. Если вы найдете личный процесс отладки, который вам подходит, не стесняйтесь принять его и пойти по этому пути!
Мой процесс
- Проверить консоль
- Ручное отслеживание
- Инструменты разработчика Vue
Console.log(“old faithful”)- Есть модульные тесты!
1. Проверьте консоль.
Это первое, что вам следует сделать. Vue дает вам чрезвычайно полезные предупреждения и ошибки в консоли, которые сообщают вам, когда и где что-то сломалось. Это одна из самых простых проблем, с которыми вам придется столкнуться. Если ошибка кричит вам, что вы что-то сломали, значит, вам повезло, потому что обычно оттуда довольно легко найти и исправить. Vue довольно хорошо предупреждает вас о проблеме (и о том, в каком компоненте она находится) еще до того, как она сломается. Затем, если ваш код сломается, консоль предоставит вам довольно полезную информацию о том, что произошло. Как вы можете видеть здесь, я где-то получаю доступ к свойству неопределенного объекта. Мне просто нужно найти, где я получаю доступ к этому свойству, и выяснить, почему оно не определено. Легкий!
2. Ручное отслеживание
«О нет, но Трейси! Я обнаружил, где была моя ошибка в моем коде, но до сих пор не понимаю, что ее вызывает », - говорите вы с явным разочарованием. Что ж, прежде чем перейти к некоторым полезным инструментам, имеющимся в вашем распоряжении. Давайте сначала рассмотрим ваш код. Это шаг, который оказался самым полезным для моего роста как разработчика. Посмотрите на свой код и следуйте логике. Возьмите ручку и бумагу или делайте это в уме, но шагайте через собственный код, не запуская его. Это не только хорошо знакомит вас с кодом, но и заставляет задуматься и пересмотреть, почему вы сделали некоторые из выбранных вами решений. Если вы отслеживаете свой код и обнаруживаете, что он чрезвычайно запутан и труден для понимания, может ли ваш код быть более аккуратным? Можно ли проще переделать логику? Какие части можно изменить, чтобы упростить отслеживание? Быстрая природа JavaScript может привести к неряшливому и излишне сложному коду. Ответы на эти вопросы улучшат ваши навыки разработчика и сделают ваш код лучше и менее подверженным ошибкам в будущем. Но, как это часто бывает с JavaScript, вы обнаружите, что это всего лишь опечатка.
3. Инструменты разработчика Vue
Иногда ваши ошибки не так просты, как опечатка. Иногда ваш код работает, но он просто не выполняет то, что вы ожидали (или что-то еще). Vue Dev Tools может быть здесь чрезвычайно полезен. Их можно загрузить как расширение chrome и позволить вам проверять элементы как компоненты Vue. Это дает вам гораздо более подробное представление о состоянии компонента в любой момент. В нем перечислены все сработавшие свойства, вычисляемые поля, данные и события. Это чрезвычайно полезная информация. Например, предположим, что вы ожидаете, что данные компонента изменятся после запуска события. Инструменты разработчика позволяют вам проверять компонент в реальном времени, чтобы убедиться, что данные меняются так, как вы ожидаете. Vue Dev Tools также позволит вам получить доступ к любому компоненту, который вы выделили в консоли как $vm0, который затем можно использовать для проверки полей и вызова методов для дальнейшего тестирования!
4. Console.log («старый верный»)
Когда все остальное терпит неудачу и все становится мрачным, вашим лучшим другом всегда является console.log. Иногда информации, предоставляемой реквизитами в Vue Dev Tools, просто недостаточно, и вам нужно глубоко погрузиться в методы и знать, какое состояние переменной находится в конкретный момент или был ли вообще поражен блок кода. При разработке проекта Vue я считаю полезным периодически размещать console.logs по всему проекту по мере того, как вы разрабатываете. Например,
setTimeFormat () {
if (this.e1 === ‘AM’) {
this.ok = true
this.collapsed = null
this.updateSlots()
console.log(‘SetTimeFormat AM: ’, this.e1)
this.e1 = null
}
else if (this.e1 === ‘PM’) {
this.collapsed = true
this.ok = null
this.updateSlots()
console.log(‘SetTimeFormat PM: ’, this.e1)
this.e1 = null
}
}
Теперь, когда этот код запускается, вы можете подтверждать, что он работает правильно каждый раз, когда он вызывается, потому что вы можете заставить регистратор сообщать вам, откуда берется значение и какое оно значение в данный момент. Размещение полезных и информативных журналов console.logs по мере разработки можно сравнить с созданием модульных тестов на многих других языках. В то время это не всегда кажется необходимым, но может избавить вас от многих головных болей в будущем.
5. Есть Unit Test!
Vue Cli на самом деле позволяет создавать ваши проекты с помощью модульных тестов прямо из коробки, используя Jest или Mocha! Эти среды тестирования JavaScript позволяют разрабатывать компоненты с помощью построенных на их основе модульных тестов, чтобы гарантировать, что они выводят ожидаемые вами значения. Я не могу не подчеркнуть, насколько это важно, потому что многие разработчики, как старые, так и новые, понятия не имеют, что вы можете начать тестирование с Vue сразу же! У Vue есть отличная документация о том, как создавать компоненты с учетом модульного тестирования, и они объясняют, как это сделать лучше, чем я когда-либо мог, так что вот ссылка на эту информацию.
Заключение
Одна из самых больших жалоб, которые я получаю от людей, которые плохо знакомы с JavaScript, заключается в том, насколько сложной и утомительной может быть его отладка, но это не обязательно! В JavaScript (особенно с Vue) есть масса инструментов, позволяющих безболезненно отлавливать эти неприятные ошибки. Я надеюсь, что эта статья дала вам некоторое представление о том, какие шаги вы можете предпринять и какие инструменты вы можете использовать, когда столкнетесь со своими собственными проблемами в будущем. Удачного кодирования!
