фото Джейсон Леунг на Неспособный
Есть два удивительных поведения на консоли инструмента разработчика Chrome («Консоль» дальше).
Первый был указан моим другом Николас Маркора что вы можете ждать асинхрового метода, а второй – это $$ (короткая вырезанная для document.queryselectorall ) Возвращение массива, а не Nodelist объект.
Давайте рассмотрим, как они разные.
1 В ожидании в консоли
В редакторе (я использую функцию фрагменты , которая похожа на царапин, но работает как редактор), ждет не работает так, как должно быть вызвано в рамках асинхрового метода.
Чтобы обойти эту проблему, вы можете обернуть его в асинхронном методе (Async iife в данном случае).
Это было бы нормальным поведением, которое вы ожидаете, но … вы можете ждать в консоли, не завершая заявление в асинхронность Метод ~
Это волшебство ~~~
Это поведение Добавлены в Chrome Devtools с Chrome 62 , выпущен в 2017 году.
Так что это хорошая особенность Но вы должны следить, так как не можете просто вставить свой код в свой редактор. Это должно быть завернуто внутри асинхрового метода.
2⃣ $$ vs Document.queryselectorallal
$$ является частью API Console Cutilities, которая доступна только в консоли, а не часть JavaScript или Дом Анкет
Google Document описывает $$ в качестве
$$ (селектор) возвращает множество элементов, которые соответствуют данному селектору CSS. Эта команда эквивалентна вызова Document.queryselectorall ().
https://developers.google.com/web/tools/chrome-devtools/console/utilities#queryselectorall
В документации говорится, что это эквивалентно вызова document.queryselectorall () но $$ отличается где document.queryselectorall () Возвращает Nodelist объект, пока $$ возвращает массив.
Nodelist это Массивный объект , чей прототип не наследует от Array.prototype . Это означает, а Nodelist Экземпляр объекта не имеет доступа к таким методам, как Массив#карта или Массив#уменьшить .
Не могу карту над объектом Nodelist
Пока вы можете составить на карту $$
Это может вызвать проблему при копировании и вставке кода с помощью $$ Селектор и просто конвертировать его в использование document.queryselectorall () и попытаться позвонить Array.prototype
Вы можете легко преобразовать объект Nodelist в массив, используя Синтаксис спреда или Array.from кстати.
👋 Раздвигающие слова
Консоль может сэкономить вам много клавишных, но вы, возможно, захотите дважды проверить, прежде чем копировать и вставить код из консоли редактору.
Если у вас есть больше, пожалуйста, дайте мне знать 🙂
Пост Две Gotchas in Crome Developer Console появился первым Технический блог Sung .
Оригинал: “https://dev.to/dance2die/two-gotchas-in-chrome-developer-tool-console-11k3”