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

Если вы работаете над проектом с использованием такого фреймворка, как Angular 2, скорее всего, в вашей консоли постоянно появляется много ошибок и предупреждений. Больно прокручивать последние 20 предупреждений, чтобы добраться до интересующей вас ошибки, или пробираться через десятки журналов, чтобы найти ту, которая вам действительно небезразлична.

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

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

console.log('COMPONENT', thingToLog) 

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

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

Надеюсь, это поможет вам ускорить отладку!

Первоначально опубликовано в моем блоге на vlaservi.ch/blog