Все, что сокращает часть вашего тяжелого рабочего времени, полезно для вашей продуктивности. Отладка - одна из таких сложных задач. Разработчики стремятся писать код без ошибок, но все мы знаем, что это непросто. Никому не нравится видеть ошибки в своем коде - эти красные цветные линии не очень привлекательны, верно? Тем не менее, ошибки - это хорошо, если вы обнаружите их на ранней стадии. Их правильная отладка даст вам новые знания и чувство удовлетворения. Было бесчисленное количество моментов, когда я многому научился, отлаживая свой собственный код и видя, как он может бросить вызов моим собственным представлениям.

Мы все учимся, совершая ошибки, и снова совершаем ошибки, чтобы узнать больше.

Хватит мотивации. Перейдем к делу.

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

1. Использование сокращенного обозначения значений свойств объекта в console.log

Это мой любимый трюк с console.log, и он должен быть первым в списке. Вы, должно быть, написали торренты операторов console в своей базе кода, пытаясь выяснить значение переменной. Удобство использования сделало «консоль» лидером чемпионата по отладке ». Золотая линия выглядит так:

console.log(a);

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

console.log(a); // prints 20
console.log(b); // prints 30
console.log(c); // prints 40
// Sorry what was the reference variable for '30'? 
// I am kind of lost 😕

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

console.log('a', a); // prints a 20
console.log('b', b); // prints b 30
console.log('c', c); // prints c 40

Но, как я уже сказал, нам нужно сократить время и написать меньше строк, чтобы быть более эффективными и продуктивными, верно? Итак, хитрость заключается в том, чтобы заключить переменную в фигурные скобки '{} ’. На самом деле это не уловка, а языковая функция, известная как сокращенная запись значения свойства объекта. Подробнее об этом вы можете узнать здесь.

// use object shorthand property value notation
console.log({ a }); // prints { a: 20 };
console.log({ b }); // prints { b: 30 };

Это даст вам ссылочную переменную вместе с ее значением. Меньше кода - больше ценности.

Бонус: используйте var вместо const или let при объявлении переменных в консоли Chrome. вкладка, чтобы избежать раздражающей синтаксической ошибки. ‘Var’ - ваш приятель из блокнота.

2. Больше не нужно переносить фигурные скобки для жирных стрелочных функций.

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

const foo = x => 2 * x; // how awesome is that 😊

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

const arr = [1, 2, 3];
const newArr = arr.map(el => el * el); // [1, 4, 9]

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

const arr = [1, 2, 3];

// using curly braces and return statement
const newArr = arr.map(el => {
 console.log({ el }); // prints {el: 1}, {el: 2}, {el: 3}
 return el * el;
});

Какие! ты издеваешься надо мной 🙈? Это не идеально. Это не только отнимает много времени, но и на то, чтобы вернуться назад, потребуется больше времени. Лучшее решение выглядит примерно так:

const arr = [1, 2, 3];

// more concise and inline 🎉
const newArr = arr.map(el => console.log({ el } ) ||  el * el);

Здесь происходят две вещи:

  • console.log () всегда возвращает undefined, что является ложным значением.
  • Учитывая такой оператор, как expr1 || expr2, Логический оператор ИЛИ ||, возвращает expr1, если его можно преобразовать в true; в противном случае возвращает выражение2.

Итак, возвращаемое значение console.log ({el}) было undefined, и поэтому было выполнено второе выражение el * el. Прелесть этого изменения в том, что вы видите значение inline. Никакого отладчика или громоздкой фигурной церемонии не требуется. Большая победа, правда? 😊

Это очень удобно, если вы поклонник функционального программирования и используете такую ​​библиотеку, как Ramda.

3. Добавьте точки журнала - меньше разбрасывания console.log в коде.

console.log стал незаменимой частью нашего пути отладки. Мы стараемся разбрызгивать его повсюду в нашем коде; он стал нашей первой линией защиты от ошибок. Проблема в затратах времени на очистку. Очевидно, вы можете найти каждый оператор консоли и удалить его вручную. Но что, если я скажу, что есть лучшее решение? Обнимите нового ребенка в городе - Точка регистрации.

Google добавил эту функцию в Chrome 73. Она позволяет добавлять консольные операторы в ваш исходный код прямо из инструмента разработки.

Шаги:

  • Откройте раздел Источники вашего инструмента разработки и найдите свой исходный код.
  • Щелкните правой кнопкой мыши любой номер строки, в которую вы хотите добавить операторы консоли.
  • Появится список опций; выберите Добавить точку журнала.
  • Появится редактор точки останова, позволяющий ввести имя переменной. Это похоже на то, как вы пишете свое выражение внутри функции console.log ().
  • Используйте трюк с сокращенной записью свойств, который я показал вам выше. Щелкните за пределами редактора или нажмите Enter, чтобы сохранить.
  • Оранжевый значок будет представлять вашу точку входа, и все готово.

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

Действия говорят громче, чем слова:

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

4. Хранение и копирование

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

Чтобы скопировать любую ссылочную переменную, например x, в буфер обмена, просто введите copy (x) на вкладке консоли и нажмите Enter. Chrome скопирует эту переменную в буфер обмена, и вы сможете вставить ее куда угодно, используя обычную команду paste.

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

Посмотрим, как это работает:

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

Убить двух зайцев одним выстрелом.

Бонус: вы можете использовать «Ctrl + f» для поиска совпадения определенной строки по всему объекту ответа в разделе предварительного просмотра.

5. Точка останова для ваших сетевых запросов.

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

В одном из наших проектов в Страховой компании мы создавали пользовательский интерфейс, управляемый данными. Каждый следующий вопрос в форме определялся предыдущими действиями пользователя и впоследствии передавался по сети. Нам нужно было проанализировать, что при срабатывании определенного типа запроса мы можем точно отладить полезную нагрузку запроса. В итоге я нашел замечательное решение под названием XHR / fetch Breakpoints. Это позволило мне поставить условную точку останова на мои запросы на выборку.

Точки останова XHR позволяют ставить точки останова на все ваши сетевые запросы. Но реальная сила - это возможность применять точку останова через раздел 'URL-адрес'. Вы можете добавить туда любое ключевое слово, и Chrome поставит паузу, когда обнаружит URL-адрес запроса, содержащий совпадающее слово. Как это круто !!

Шаги:

  • Откройте вкладку Источники вашего инструмента разработчика и на правой боковой панели.
  • Вы должны увидеть раздел XHR / fetch Breakpoint под Breakpoints.
  • Нажмите кнопку +, и редактор Точки останова должен появиться с просьбой ввести ключевое слово.
  • Введите ключевое слово и нажмите Enter.

6. Копирование вашего запроса как cURL

Это удобно, если вы хотите запустить свой запрос из инструмента командной строки, такого как cmd или bash. Вы также можете вставить скопированную ссылку в свое приложение Postman, и она заполнит все заголовки запроса за вас. Очень удобно для визуализации вашего запроса.

  • Откройте вкладку Сеть в инструменте разработчика Chrome.
  • Найдите запрос, который хотите скопировать, и щелкните правой кнопкой мыши, чтобы открыть несколько вариантов.
  • При наведении указателя мыши на параметр Копировать отобразится список другого формата, в котором вы можете скопировать свой запрос.
  • Выберите Копировать как cURL, и он будет сохранен в ваш буфер обмена.

7. Не упускайте из виду изменения CSS - сохраняйте стиль при обновлении.

Этот совет предназначен для наших друзей UI / дизайнеров. Мы знаем, что в разделе Стили на вкладке Элементы мы можем изменить CSS. Но эти изменения не сохраняются при обновлении страницы. Если вы хотите сохранить изменения, внесенные в существующую таблицу стилей, вы можете сделать это, выполнив следующие действия:

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

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

Примечание: добавление новых изменений стиля не сохраняется!

Последние мысли

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

Надеюсь, вам понравилась эта статья. Дайте мне знать свои мысли в комментариях ниже, и если вам понравилось, несколько 👏 обязательно заставят меня улыбнуться 😃. Теперь идите и удалите несколько ошибок 🐞.