Beyond Console.log () — Повышайте уровень навыков отладки

Что такое Visual Studio Программирование и разработка

Что такое Visual Studio

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

Зона комфорта

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

Обычный рабочий процесс разработчика — написать код в редакторе, сохранить его, затем переключиться в браузер и загрузить продукт, чтобы проверить, все ли работает. Затем мы используем инструменты разработчика в браузере, чтобы настроить CSS и, возможно, проверить, как продукты реагируют на изменение размера и мобильную эмуляцию. Мы отлаживаем наши скрипты, добавляя console.log()оператор везде, где нам нужно понимание — поддерживая тесную связь между номерами строк и отладкой.

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

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

Мы рассмотрим несколько функций свободно доступных инструментов разработчика, которые вы, вероятно, используете, но о которых не знаете. В частности, эти функции есть в инструментах разработчика браузера Chromium, а некоторые — в Visual Studio Code. Давайте начнем с того, что узнаем больше о неизменном фаворите — консоли.

Повышение уровня нашей консольной игры

На раннем этапе нашей карьеры разработчиков мы привыкли добавлять console.log(thing)в код где угодно, чтобы узнавать о том, что происходит. Часто этого достаточно, но иногда вы все равно не получаете нужную информацию или она представлена ​​в каком-то необработанном формате, который трудно понять.

Вы можете увидеть все следующие приемы, взяв эту демонстрационную страницу на GitHub и открыв ее в своем браузере с открытыми инструментами разработчика. (Или просмотрите живую демонстрацию на CodePen ).

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

let x = 2;
console.log(x) // 2
console.log({x}) // {x: 2}

Форматирование журналов

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

  • %s: журналы в виде строк
  • %iили %d: журналы как целые числа
  • %f: записывается как значение с плавающей запятой
  • %o: регистрируется как расширяемый элемент DOM
  • %O: регистрируется как расширяемый объект JavaScript

Вы можете смешивать и сочетать их. Порядок замены в первой строке — это следующий за ней порядок параметров:

console.log('%ix %s developer', 10, 'console');
// 10x console developer

Вы даже можете конвертировать с помощью этого, если вы получаете информацию, которая не в том формате, который вам нравится:

console.log('%i', 12.34455241234324234); // 12

Спецификатор %cпозволяет вам использовать CSS для стилизации вашего сообщения журнала, если вы действительно хотите выделиться:

console.log('%cPay attention to me','color:firebrick;font-size:40px')

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

Группировка журналов

Вы можете сгруппировать свои журналы, console.group()чтобы показать их как расширяемые и сворачиваемые группы.

const label = 'The Millenium Falcon Crew';
console.group(label);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(label);

Вы можете вкладывать группы и console.groupCollapsed()не расширять их по умолчанию:

const extendedlabel = 'The Millenium Falcon Crew extended';
const meat = 'Humanoids';
const metal = 'Droids';
console.group(extendedlabel);
console.groupCollapsed(meat);
console.log('Leia');
console.log('Han');
console.log('Chewie');
console.log('Ben');
console.groupEnd(meat);
console.group(metal);
console.log('R2D2');
console.log('C3PO');
console.groupEnd(metal);
console.groupEnd(extendedlabel);

Разрешить фильтрацию журнала

Вместо console.log()вы также можете использовать console.info(), console.error()и console.warn(). Это позволяет фильтровать сообщения, которые вы видите в консоли, с помощью боковой панели консоли или селектора уровней. Таким образом, вы упростите поиск собственных сообщений среди сообщений, поступающих из сторонних сценариев и других сценариев в вашем проекте.

Другие полезные методы консоли

Вероятно, вы создали переменные в процессе отладки, которые подсчитывают, как часто вызывается определенный метод или выполняются функции. Вы можете сделать то же самое, используя console.count()и console.countReset()методы.  А также вы можете создать сколько угодно из них и различать по метке:

console.count('Chocula'); // Chocula: 1
console.count(); // default: 1
console.count('Chocula'); // Chocula: 2
console.countReset('Chocula'); 
console.count(); // default: 2 
console.count(); // default: 3
console.count('Chocula'); // Chocula: 1

Вы также можете измерить, сколько времени занимает определенная часть вашего скрипта, используя console.time()метод:

console.time('go');
for(let i = ; i < 200000; i+=1) {
  let x = Math.random()*2000;
}
console.timeEnd('go'); // go: 11.7861328125 ms

В зависимости от данных, которые вы хотите регистрировать, также имеет смысл использовать правильный метод для работы. Использование console.dir()отображает не только контент, но и тип данных, которые вы ему отправляете. Например, если вам нужно XML-представление узла, вы можете использовать console.dirxml(). И console.table()отлично подходит для отображения данных JSON в виде сортируемой таблицы.

Замена ведения журнала живыми выражениями

Заманчиво использовать console.log()для отслеживания вещей, которые сильно меняются. Это не только медленно, но и довольно сложно уследить. Хотя полезно, чтобы консоль автоматически группировала похожие значения как экземпляры, это все еще много движения, и вы часто обнаруживаете, что хотите только проверить значение, а не прокручивать назад, чтобы увидеть, где произошло определенное изменение.

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

Попробуйте, активировав кнопку с глазом и войдя document.activeElement. Выражение должно отображаться bodyкак значение, пока вы не активируете любой другой элемент на странице или не сфокусируетесь на нем. Вы можете увидеть это в действии на веб-сайте SitePoint в следующем видео:

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

Живые выражения — прекрасные маленькие помощники для отслеживания изменений данных ваших скриптов без использования консоли. Это особенно полезно, когда вы регистрируете очень загруженные значения, такие как положение мыши. Вероятно, вы бы подошли к этому так:

let x = ;
let y = ;
document.addEventListener('mousemove', e => {
  x = e.x;
  y = e.y;
  console.log({x}, {y});
});

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

Читайте также:  Объектно-ориентированное программирование на Python

Использование консоли для управления текущим документом

Консоль в инструментах разработчика — это гораздо больше, чем просто способ отображения журнала. Это REPL, который позволяет вам писать и выполнять JavaScript и узнавать о доступных методах и свойствах текущего документа с помощью автозаполнения. Просто зайдите в консоль в инструментах разработчика, введите docи нажмите tab, и она автоматически преобразует его в document. Если вы добавите точку, вы увидите все доступные методы и свойства. Это увлекательный и простой способ узнать о доступных методах и свойствах, который позволяет написать большой объем кода за короткий промежуток времени.

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

  • $_сохраняет результат последней команды. Так что, если вы наберете 2+2и нажмете Enter, $_вы получите 4.
  • $0to $4- это стек последних проверенных элементов, где $0всегда находится самый новый.
  • $()и $$()являются сокращением от document.querySelector()и document.querySelectorAll().
  • $x() позволяет выбирать элементы DOM с помощью XPATH.
  • copy() копирует все, что вы даете, в буфер обмена.
  • clear() очищает консоль.
  • getEventListeners(node) перечисляет всех слушателей событий узла.
  • monitorEvents(node, events) отслеживает и регистрирует события, происходящие на узле.
  • monitor(method) создает элемент журнала всякий раз, когда вызывается метод.

Некоторые из этих методов невероятно мощны, и мы, вероятно, сами написали их в виде серии console.log()утверждений в прошлом.

Вот несколько способов использования этих методов:

monitorEvents(window, ['resize', 'scroll']);

monitorEvents($, 'key');

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

console.table($$('a'),['href','text'])

Это извлекает все ссылки в документе (как $$(’a’)сокращение от document.querySelectorAll(’a’)) и отображает их в виде сортируемой таблицы. Массив как второй параметр tableметода определяет столбцы таблицы. В противном случае каждое свойство ссылки превратилось бы в столбец, и в нем было бы трудно ориентироваться. Интересно то, что таблицу можно не только сортировать, но и копировать и вставлять — например, в Excel.

Вместо написания сложного JavaScript для фильтрации этих результатов вы можете использовать возможности селекторов CSS. Например, если вы хотите иметь таблицу srcи altинформацию обо всех изображениях в документе, которые не являются встроенными изображениями, вы можете использовать следующее:

console.table($$('img:not([src^=data])'), ['src','alt'])

Однако самое интересное в этом случае — писать сценарии, которые выполняются в контексте страницы.

Например, когда вы используете Markdown для генерации HTML, большинство генераторов страниц будут создавать автоматические идентификаторы в заголовках, чтобы обеспечить глубокую ссылку на эту часть документа. # New StuffЗаголовок превратится<h1 id=»new-stuff»>New stuff</h1>. Мне нужно было пакетно создать множество коротких URL-адресов, указывающих на эти глубокие ссылки, и я не хотел создавать их вручную.

Итак, я начал писать скрипт для консоли, чтобы сделать это за меня:

let out = '';
$$('#main [id]').filter(
    elm => {return elm.nodeName.startsWith('H')}
).forEach(elm => {
   out += `${elm.innerText}
${document.location.href}#${elm.id}
` 
});
copy(out);

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

Это также показывает интересную дополнительную функцию $$ярлыка. A document.querySelectorAll(’#main [id]’).filter()приведет к ошибке, так как возвращаемое значение — это не Arraya NodeList. Вам нужно будет преобразовать его в Arraywith […document.querySelectoAll(’#main [id]’).filter()]или Array.from(document.querySelectoAll(’#main [id]’).filter()), что довольно долго раздражало людей, переходящих с jQuery на JavaScript. $$Удобный метод позволяет для всех методов массива напрямую.

Как правило, у вас есть много возможностей для доступа и изменения чего-либо на отображаемой странице в браузере из консоли. И у вас также есть дополнительное преимущество использования вкладки Elements в инструментах разработчика, чтобы получить правильный путь. Активируйте…меню рядом с каждым узлом и выберите в контекстном меню меню копирования, чтобы получить то, что вам нужно.

Переход от консоли к исходникам

Как только вы найдете несколько забавных способов манипулирования веб-сайтами, вы скоро столкнетесь с ограничениями консоли как среды сценария. Кодировать в консоли может быть немного сложно, поскольку вы работаете в однострочном окружении. Нажатие Enterнемедленно выполняет то, что вы напечатали, и часто вы делаете это случайно. Однако есть одна хитрость. Вы можете писать многострочные скрипты, используя вместо этого Shift+ Enter.

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

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

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

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

Вы можете получить доступ к командному меню, нажав Control+ Shift+ P(Windows, Linux) или Command+ Shift+ P(macOS). Или выберите меню «Настройка и управление DevTools» ( … или ⋮ ) (в правом верхнем углу окна DevTools), а затем выберите » Выполнить команду«.

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

Фрагменты

Фрагменты — отличный способ сохранить написанные вами сценарии, которые взаимодействуют с документом. Это небольшие скрипты, которые имеют доступ как к текущему открытому документу браузера, так и к удобным методам консоли.

Попробуйте прямо сейчас, нажав сочетание клавиш в меню команд, набрав snipи нажав Enter, эффективно сообщая Инструментам разработчика создать новый фрагмент. Это приведет вас к редактору фрагментов, и он создаст новый фрагмент с общим именем. Откройте контекстное меню на имени файла сниппета слева, выберите переименовать и назовите его Получить все ссылки, как показано в этом GIF:

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

Вот сценарий. Он использует довольно много вещей, которые мы рассмотрели ранее. Скопируйте и вставьте его в редактор сниппетов:

console.clear();
let out = '';
let problems = [];
$$('a').forEach(a => {
  let text = a.innerText.trim();
  let prefix = ''; 
  if (!text) {
    if (a.querySelector('img')){
      text = a.querySelector('img').alt;
      prefix = 'Image: ';
    }
    if (a.getAttribute('aria-label')) {
      text = a.getAttribute('aria-label');
      prefix = 'Aria Label: ';
    }        
    if (a.getAttribute('aria-labelledby')) {
      text = $('#' + a.getAttribute('aria-labelledby')).innerText;
      prefix = 'Aria Labelled By: ';
    }        
  }
  if (text) {
    text = prefix + text
  } else {
    a.style.border = '1px solid firebrick';
    problems.push(a);
  }
  out += `
${text||'No Link text'}
${a.href}`;
});
if (out === '') {
  console.warn('Sorry, no links found');
} else {
  copy(out);
  console.info('done harvesting links, ready to paste');
  if (problems.length > ) {
    console.warn('There were %d issues:', problems.length);
    console.groupCollapsed('Links without text');
    problems.forEach(a => {console.dirxml(a)});
    console.groupEnd('Links without text');
  }
}

После того, как вы вставили новый контент или отредактировали фрагмент, вы увидите, что имя файла на вкладке выше и в списке слева помечено звездочкой. Это означает, что это несохраненный файл. Чтобы сохранить его на своем компьютере, нажмите CMD+ sв macOS и Ctrl+ sв Windows / Linux. Вы запускаете фрагмент в редакторе, активируя кнопку воспроизведения ниже или нажав CMD+ Enterв macOS и Ctrl+ Enterв Windows / Linux.

Читайте также:  Создание приложений для видеочата WebRTC

На следующем GIF-изображении показан сценарий, выполняемый в документе Что нового в DevTools 89 :

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

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

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

В моем случае это выглядит так:

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

Отменяет

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

Вы начинаете работу с переопределениями, создавая папку на локальном жестком диске. В моем случае я создал папку с именем local-overridesв папке «Загрузки».

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

Ниже вы можете найти кнопку + Выбрать папку для надстроек. Активация этого предложит вам выбрать папку на жестком диске для хранения файлов.

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

Как только это будет сделано, local overridesпапка появится ниже. Выше находится флажок для переключения переопределений. Это удобно, потому что вам не нужно все время удалять папку или сценарии. Вы можете снять этот флажок, и браузер снова загрузит ресурсы из Интернета. Кнопка с круглым значком рядом с параметром удаляет все переопределения.

Затем вы можете выбрать файл для переопределения. Переключитесь на вкладку Страница и спуститесь к www.google-analytics.comзаписи. Разверните раздел, и вы найдете analytics.jsфайл. Щелкните его, чтобы открыть в редакторе.

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

А пока давайте просто выделим весь код и заменим его простым:

console.info('I am in!')

После сохранения файла с помощью CMD+ s(macOS) или Ctrl+ s(Windows, Linux) вы увидите фиолетовую точку рядом с именем файла. Это показывает, какие файлы больше не загружаются с исходного веб-сайта, а вместо этого загружаются с вашего жесткого диска.

Если вы теперь перейдете в любое место на christianheilmann.com, он больше не будет загружать файл аналитики, а вместо этого будет запускать его с вашего жесткого диска. Консоль говорит: «Я в игре», и я никогда не писал этот код.

Если теперь вы заглянете в свою local-overridesпапку, вы найдете www.google-analytics.comпапку с analytics.jsфайлом внутри. Вы можете редактировать файл в инструментах разработчика или непосредственно в этой папке с помощью любого редактора по вашему выбору. Любое изменение файла будет отражено в другой среде.

Синхронизируйте свои задачи разработки и отладки с рабочими областями

Когда дело доходит до синхронизации, рабочие области — это еще одна функция, которая, похоже, недостаточно используется. Когда мы вспоминаем наш общий подход к разработке в начале этой статьи, нам кажется, что мы разрабатываем в наших редакторах и отлаживаем в браузере. В этом есть смысл, но более серьезная проблема заключается в том, как вернуть то, что мы изменили, в исходный код? Часто мы просто настраиваем несколько параметров, а затем повторяем изменения в нашем редакторе. Есть способ получше.

Первое, о чем вы, возможно, еще не знаете, — это то, что есть инструмент «Изменения». Скажем, например, вы работаете над демонстрацией небольшого списка дел и хотите немного изменить его внешний вид. Обычно вы делаете это в инструменте Elements, как показано на следующем GIF-изображении:

Обычный способ вернуть это изменение в ваш код — это скопировать и вставить цветовой код из CSS и скопировать его обратно в исходный код в вашем редакторе. Но как насчет дополнительных изменений? Инструменты разработчика также отслеживают, что вы изменили, и если вы перейдете на вкладку » Изменения «, вы получите список всех файлов, которые вы изменили, и того, что в них изменилось. Самый простой способ получить к нему доступ — снова использовать меню команд и ввести текст changes, что дает вам возможность „Показать изменения“.

Это упрощает отслеживание ваших изменений, но по-прежнему кажется странным копировать изменения обратно в исходный код.

Вы можете заставить инструменты разработчика работать с вашим редактором, добавив папку проекта в рабочую область. Чтобы это произошло, перейдите к инструменту » Источники» и перетащите на него папку проекта.

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

Слияние инструментов разработчика с редактором

Кажется хорошей идеей объединить мощь отличного редактора и возможности инструментов разработчика браузера. Вот почему мы создали расширение для Visual Studio Code, которое делает именно это. Если вы предпочитаете этот редактор, вы можете установить расширение Microsoft Edge Tools для VS Code и получить инструменты разработчика прямо в своем редакторе вместе с полнофункциональным браузером. Вы можете увидеть, как это выглядит, на следующем GIF-изображении.

Заключение

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

Оцените статью
bestprogrammer.ru
Добавить комментарий