[Перевод] Советы по отладке интерфейсной консоли

внешний интерфейс API Программа перевода самородков Chrome

Советы по отладке интерфейсной консоли

Разработчики непреднамеренно создают некоторые ошибки в процессе разработки. Чем старше ошибка, тем сложнее ее найти и исправить. В этой серии статей я постараюсь показать вам, как выполнять отладку с помощью инструментов разработчика Google Chrome, плагинов Chrome и WebStorm.

В этой статье будет представлен наиболее часто используемый инструмент отладки — консоль Chrome. приятного аппетита!

Console

Как открыть инструменты разработчика Chrome:

  • В главном меню выберите меню «Дополнительные инструменты» > нажмите «Инструменты разработчика».
  • Щелкните правой кнопкой мыши любой элемент на странице и выберите «Проверить».
  • На Mac нажмите Command+Option+I, на Windows и Linux нажмите Ctrl+Shift+I.

Обратите внимание на содержимое вкладки Консоль.

Первый ряд:

  • очистить консоль консоли

top —  По умолчанию контекст Консоли — верхний. Но это меняется, когда вы проверяете элемент или используете контекст плагина Chrome.
Здесь вы можете изменить контекст, в котором выполняется консоль (фрейм верхнего уровня страницы).

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

настраивать:
Hide network —  Скрыть сетевые ошибки, такие как 404.
Preserve log —  Консоль не будет очищать запись при обновлении страницы или перенаправлении.
Selected context onlyПосле выбора  —  диапазон протоколирования консоли может быть указан в соответствии с контекстом, выбранным top.
User messages only —  Скрыть предупреждения, такие как исключения доступа, созданные браузером.
Log XMLHttpRequests —  Как следует из названия, записывает информацию, сгенерированную XMLHttpRequest.
Show timestamps —  Отображение информации о метках времени в консоли.
Autocomplete from history —  Chrome запишет введенные вами команды для автоматического завершения.

Выберите правильный консольный API

Консоль запустит введенный вами JS-код в контексте вашего приложения. Вы можете легко просмотреть, что хранится в глобальной области видимости, через консоль или ввести его напрямую и увидеть результат выражения. Например: "null === 0".

console.log — Ссылка на объект

По определению console.log будет выводить вывод на консоль. В дополнение к этому вы должны знать, что console.log будет хранить ссылки на отображаемые вами объекты. См. код ниже:

var fruits = [{one: 1}, {two: 2}, {three: 3}];
console.log('fruits before modification: ', fruits);
console.log('fruits before modification - stringed: ', JSON.stringify(fruits));
fruits.splice(1);
console.log('fruits after modification: ', fruits);
console.log('fruits after modification - stringed : ', JSON.stringify(fruits))

Вы должны знать об этом при отладке объектов или массивов. Мы видим, чтоfruitsМассив содержал 3 объекта до того, как он был изменен, но изменился после этого. Чтобы увидеть результаты в конкретный момент, вы можете использоватьJSON.stringifyдля отображения информации. Однако этот способ не удобен для отображения крупных объектов. Позже мы представим лучшие решения.

console.log —  сортировка свойств объекта

Гарантирует ли JavaScript порядок свойств объекта?

4.3.3 Объект — ECMAScript, третье издание (1999 г.)

Объекты являются членами Object , который представляет собой неупорядоченный набор свойств, каждое из которых содержит примитивное значение, объект или функцию. Функции, хранящиеся в свойствах объекта, называются методами.

Но... его определение изменилось в ES5, свойства можно упорядочить, но вы все равно не можете быть уверены, что свойства вашего объекта можно упорядочить. Браузеры реализуют упорядоченные свойства различными способами. Выполнение приведенного ниже кода в Chrome приводит к запутанным результатам:

var letters = {
  z: 1,
  t: 2,
  k: 6
};
console.log('fruits', letters);
console.log('fruits - stringify', JSON.stringify(letters));

Chrome сортирует свойства в алфавитном порядке. Не могу сказать, понравится ли нам такой порядок, но знать, что здесь происходит, не помешает.

console.assert(expression, message)

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

function callAssert(a,b) {
  console.assert(a === b, 'message: a !== b ***** a: ' + a +' b:' +b);
}
callAssert(5,6);
callAssert(1,1);

console.count(label)

Короче говоря, это метод, который подсчитывает, сколько раз было выполнено одно и то же выражение.console.log.其它的都一样。

for(var i =0; i <=3; i++){
    console.count(i + ' Can I go with you?');
    console.count('No, no this time');
}

Как и в приведенном выше примере, только одно и то же выражение будет увеличивать статистику.

console.table()

Хорошая функция отладки, но даже если она повышает производительность, мне, как правило, лень ею пользоваться... Не уподобляйтесь мне, давайте останемся продуктивными.

var fruits = [
  { name: 'apple', like: true },
  { name: 'pear', like: true },
  { name: 'plum', like: false },
];
console.table(fruits);

Это довольно круто. Во-первых, можно все аккуратно сложить в таблицу, во-вторых, тоже получитсяconsole.logрезультат. Он отлично работает в Chrome, но совместимость со всеми браузерами не гарантируется.

var fruits = [
  { name: 'apple', like: true },
  { name: 'pear', like: true },
  { name: 'plum', like: false },
];
console.table(fruits, ['name'])

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

console.group() / console.groupEnd();

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

console.log('iteration');
for(var firstLevel = 0; firstLevel<2; firstLevel++){
  console.group('First level: ', firstLevel);
  for(var secondLevel = 0; secondLevel<2; secondLevel++){
    console.group('Second level: ', secondLevel);
    for(var thirdLevel = 0; thirdLevel<2; thirdLevel++){
      console.log('This is third level number: ', thirdLevel);
    }
    console.groupEnd();
  }
  console.groupEnd();
}

Это может помочь вам лучше обрабатывать данные.

console.trace();

console.trace выведет стек вызовов на консоль. Информация, которую он дает, полезна, если вы создаете библиотеку или фреймворк.

function func1() {
  func2();
}
function func2() {
  func3();
}
function func3() {
  console.trace();
}
func1();

Сравнение console.log и console.dir

console.log([1,2]);
console.dir([1,2]);

Как они реализованы, зависит от браузера. Вначале спецификация предполагала, что dir должен хранить ссылку на объект, а log — нет. (В журнале отображается копия объекта). Но теперь, как показано выше, журнал также содержит ссылку на объект. Они показывают объекты по-разному, но мы не будем вдаваться в это. Но dir может быть очень полезен при отладке объектов HTML.

Аннотация: console.dir подробно распечатает все свойства и методы объекта.

$_, $0 — $4

$_Возвращает значение последнего выполненного выражения.
$0 — $4 —  как почти 5 ссылок на элементы HTML при проверке элементов соответственно.

getEventListeners(object)

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

monitorEvents(DOMElement, [events]) / unmonitorEvents(DOMElement)

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

Выбрать элемент в консоли

Нажмите ESC на вкладке «Элемент», чтобы развернуть этот интерфейс.

существует$Больше ничего не делая:

$() - эквивалентно**document.querySelector()**. Он возвращает первый элемент, соответствующий селектору CSS (например,$('span')вернет первый диапазон)
?() - эквивалентно**document.querySelectorAll()**. Он возвращает все элементы, соответствующие селектору CSS, в виде массива.

Скопируйте напечатанные данные

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

Щелкните правой кнопкой мыши напечатанный объект, выберите «Копировать» или выберите «Сохранить как глобальный элемент» (сохраните ссылку на указанный элемент в глобальной области), после чего вы сможете манипулировать только что сохраненным элементом в консоли.

Ко всему в консоли можно получить доступ, используяcopy('object-name')сделать копию.

Настроить стиль вывода консоли

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

console.log('%c Truly hackers code! ', 'background: #222; color: #bada55');

%dили%i —  целочисленное значение
%f —  значение с плавающей запятой
%o —  Расширяемые элементы DOM
%O —  Расширяемые объекты JS
%c —  Форматирование вывода с помощью CSS

Это все для этой статьи, но не все для темы Console. Вы можете нажать на ссылку ниже, чтобы узнать больше об этом:

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,React,внешний интерфейс,задняя часть,товар,дизайнЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.

Категории